xt-element-ui 2.1.2 → 2.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xt-element-ui",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "description": "基于 Vue 2.7 + ElementUI 的企业级组件库，提供丰富的自定义组件和扩展组件",
   "main": "lib/index.common.js",
   "module": "lib/index.esm.js",
@@ -33,8 +33,8 @@
     "docs/README.md"
   ],
   "dependencies": {
-    "echarts": "^6.1.0",
-    "element-ui": "^2.15.14",
+    "echarts": "^4.0.0",
+    "element-ui": "^2.11.1",
     "vue": "^2.6.10",
     "vue-server-renderer": "^2.7.14"
   },

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

@@ -2,7 +2,8 @@
   <el-button 
     class="xt-button" 
     :class="buttonClasses"
-    v-bind="$attrs" 
+    v-bind="$attrs"
+    :type="type"
     @click="handleClick"
   >
     <slot></slot>

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

@@ -17,8 +17,8 @@
     color: var(--xt-color-white, #ffffff);
   }
   &-success{
-    background-color: var(--xt-color-primary, #ffffff);
-    border-color: var(--xt-color-primary, #ffffff);
+    background-color: var(--xt-color-success, #ffffff);
+    border-color: var(--xt-color-success, #ffffff);
     color: var(--xt-color-white, #ffffff);
   }
   &-warning{

package/src/components/xt-card/style/index.scss

@@ -4,13 +4,13 @@
 .xt-card {
   border-radius: 8px;
   transition: all 0.3s;
-  font-size: var(--xt-card-font-size, 14px);
+  font-size: var(--xt-font-size-small, 14px);
   background-color: var(--xt-bg-color, #ffffff);
   color: var(--xt-text-color-primary, #303133);
   border-color: var(--xt-border-color, #ebeef5);
   
   .el-card__header {
-    padding: var(--xt-card-header-padding, 16px 20px);
+    padding: 16px 20px;
     border-bottom: 1px solid var(--xt-border-color, #ebeef5);
     background-color: var(--xt-bg-color, #ffffff);
     font-weight: 600;

package/src/components/xt-card-item/style/index.scss

@@ -1,54 +1,19 @@
 @import '../../../styles/variables.scss';
 
 .xt-card-item {
-  --xt-card-bg-color: var(--xt-card-bg-color, #ffffff);
-  --xt-card-border-color: var(--xt-card-border-color, #EBEEF5);
-  --xt-card-text-color: var(--xt-color-text-primary, #303133);
-  
-  border-radius: var(--xt-card-border-radius, 4px);
+  border: 1px solid var(--xt-border-color, #dcdfe6);
+  border-radius: var(--xt-border-radius-small, 4px);
   box-shadow: var(--xt-card-shadow, 0 2px 12px 0 rgba(0, 0, 0, 0.1));
-  background-color: var(--xt-card-bg-color);
+  background-color: var(--xt-bg-color-block, #ffffff);
   overflow: hidden;
-  color: var(--xt-card-text-color);
+  color: var(--xt-text-color-primary, #303133);
   transition: var(--xt-transition-duration, 0.3s);
 }
 
-.xt-card-item.is-primary {
-  --xt-card-bg-color: var(--xt-color-primary, #1890ff);
-  .card__header {
-    color: var(--xt-color-white, #ffffff);
-  }
-}
-
-
-.xt-card-item.is-success {
-  --xt-card-bg-color: var(--xt-color-success, #67c039);
-  .card__header {
-    color: var(--xt-color-white, #ffffff);
-  }
-}
-
-
-
-.xt-card-item.is-danger {
-  --xt-card-bg-color: var(--xt-color-danger, #f56c6c);  
-  .card__header {
-    color: var(--xt-color-white, #ffffff);
-  }
-}
-
-
-
-.xt-card-item.is-warning {
-  --xt-card-bg-color: var(--xt-color-warning, #e6a23c); 
-  .card__header {
-    color: var(--xt-color-white, #ffffff);
-  }
-}
 
 
 .xt-card-item .card__header {
-  padding: var(--xt-card-header-padding, 18px 20px);
+  padding: 18px 20px;
   box-sizing: border-box;
   font-weight: 600;
   font-size: var(--xt-font-size-medium, 16px);

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

@@ -1,15 +1,29 @@
 <template>
-  <div style="display:inline-block">
-    <XtFlexBox v-if="dateType=='quarter'" type="inline-flex" class="xt-date-picker" :class="{focus: isfocus}" :style="width?{width: `${width}`}:{}">
-      <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>
-    </XtFlexBox>
-    <XtFlexBox 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>
-    </XtFlexBox>
+  <div class="xt-date-picker-container">
+    <div v-if="showDimension" class="xt-date-dimension">
+      <el-radio-group v-model="dimension" size="small">
+        <el-radio-button label="date">日</el-radio-button>
+        <el-radio-button label="month">月</el-radio-button>
+        <el-radio-button label="year">年</el-radio-button>
+        <el-radio-button label="custom">自定义</el-radio-button>
+      </el-radio-group>
+    </div>
+
+    <div class="xt-date-picker-wrapper">
+      <XtFlexBox v-if="dateType=='quarter'" type="inline-flex" class="xt-date-picker" :class="{focus: isfocus}" :style="width?{width: `${width}`}:{}">
+        <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>
+      </XtFlexBox>
+
+      <XtFlexBox v-else-if="useRangeMode" 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="rangeDateType" 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="rangeDateType" placeholder="结束时间" clearable @blur="$emit('blur')" @focus="$emit('focus')"></el-date-picker>
+      </XtFlexBox>
+
+      <el-date-picker v-else ref="singlePicker" v-model="singleValue" size="small" :disabled="disabled" append-to-body :format="format" :type="dateType" :placeholder="placeholder" clearable @blur="$emit('blur')" @focus="$emit('focus')"></el-date-picker>
+    </div>
   </div>
 </template>
 <script>
@@ -17,6 +31,13 @@ const typeFormatEnum = {
   datetime: "yyyy-MM-dd HH:mm", month: "yyyy-MM", year: "yyyy", date: "yyyy-MM-dd", quarter: "yyyy-Qq", week: "yyyy-WW"
 };
 
+const rangeTypeMap = {
+  date: 'daterange',
+  month: 'monthrange',
+  year: 'yearrange',
+  custom: 'daterange'
+};
+
 import XtFlexBox from '../xt-flex-box/index.vue'
 import Quarter from "./quarter.vue";
 export default {
@@ -43,7 +64,7 @@ export default {
       type: Boolean,
       default: false
     },
-    immediate: { // 是否直接初始化 参数
+    immediate: {
       type: Boolean,
       default: true
     },
@@ -51,6 +72,18 @@ export default {
     width: {
       type: [String],
       default: '100%'
+    },
+    rangeMode: {
+      type: Boolean,
+      default: true
+    },
+    showDimension: {
+      type: Boolean,
+      default: false
+    },
+    dimension: {
+      type: String,
+      default: "date"
     }
   },
   data() {
@@ -60,8 +93,36 @@ export default {
   },
   computed: {
     format() {
+      if (this.showDimension) {
+        const formatMap = {
+          date: 'yyyy-MM-dd',
+          month: 'yyyy-MM',
+          year: 'yyyy',
+          custom: 'yyyy-MM-dd'
+        };
+        return formatMap[this.dimension] || typeFormatEnum[this.dateType];
+      }
       return typeFormatEnum[this.dateType] || "yyyy-MM-dd";
     },
+    rangeDateType() {
+      if (this.showDimension) {
+        return rangeTypeMap[this.dimension] || 'daterange';
+      }
+      const rangeMap = {
+        date: 'daterange',
+        month: 'monthrange',
+        year: 'yearrange',
+        quarter: 'quarter',
+        week: 'weekrange'
+      };
+      return rangeMap[this.dateType] || 'daterange';
+    },
+    useRangeMode() {
+      if (this.showDimension) {
+        return true;
+      }
+      return this.rangeMode;
+    },
     timeStart: {
       get() {
         return this.value && this.value[0];
@@ -69,6 +130,7 @@ export default {
       set(v) {
         this.$emit("update:value", [v, this.timeEnd]);
         this.$emit("change", [v, this.timeEnd]);
+        this.$emit("dimension-change", { dimension: this.dimension, value: [v, this.timeEnd] });
       }
     },
     timeEnd: {
@@ -78,32 +140,80 @@ export default {
       set(v) {
         this.$emit("update:value", [this.timeStart, v]);
         this.$emit("change", [this.timeStart, v]);
+        this.$emit("dimension-change", { dimension: this.dimension, value: [this.timeStart, v] });
+      }
+    },
+    singleValue: {
+      get() {
+        return this.value;
+      },
+      set(v) {
+        this.$emit("update:value", v);
+        this.$emit("change", v);
+        this.$emit("dimension-change", { dimension: this.dimension, value: v });
       }
     },
     startTimeRange() {
-      if (!this.timeEnd) return {};
-      const endTime = this.timeEnd.getTime();
-      return {
-        disabledDate: (time) => {
-          return time.getTime() > (endTime);
-        }
-      };
+      const result = {};
+
+      if (this.timeEnd) {
+        const endTime = this.timeEnd.getTime();
+        result.disabledDate = (time) => {
+          return time.getTime() > endTime;
+        };
+      }
+
+      return result;
     },
     endTimeRange() {
-      if (!this.timeStart) return {};
-      const startTime = this.timeStart.getTime();
-      return {
-        disabledDate: (time) => {
-          return time.getTime() < (startTime);
-        }
-      };
+      const result = {};
+
+      if (this.timeStart) {
+        const startTime = this.timeStart.getTime();
+        result.disabledDate = (time) => {
+          return time.getTime() < startTime;
+        };
+      }
+
+      return result;
+    }
+  },
+  watch: {
+    dimension(val) {
+      this.closePickerPanels();
+      this.$emit("dimension-change", { dimension: val, value: this.value });
     }
   },
   methods: {
+    closePickerPanels() {
+      if (this.$refs.timeStart) {
+        this.$refs.timeStart.pickerVisible = false;
+      }
+      if (this.$refs.timeEnd) {
+        this.$refs.timeEnd.pickerVisible = false;
+      }
+      if (this.$refs.singlePicker) {
+        this.$refs.singlePicker.pickerVisible = false;
+      }
+    }
   }
 };
 </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;
+  width: 100%;
+}
+
 .xt-date-picker{
   width: 100%;
   border-radius: 4px;
@@ -128,4 +238,14 @@ export default {
     display: none;
   }
 }
-</style>
+
+.xt-date {
+  width: 100%;
+}
+
+.separator {
+  padding: 0 8px;
+  color: #909399;
+  line-height: 32px;
+}
+</style>

package/src/components/xt-step-price/style/index.scss

@@ -2,10 +2,6 @@
 
 .xt-step-price {
   padding: 12px 16px;
-  background-color: var(--xt-fill-color-blank, #ffffff);
-  border: 1px solid var(--xt-border-color-lighter, #ebeef5);
-  border-radius: var(--xt-border-radius-small, 4px);
-
   &__header {
     display: flex;
     align-items: center;

package/src/components/xt-step-price-item/index.vue

@@ -42,7 +42,7 @@
 
     <xt-button
       v-if="!disabled && removable && itemsLength > 1"
-      text
+      type="text"
       icon="el-icon-delete"
       class="xt-step-price-item__delete"
       @click="onDelete"

package/src/components/xt-table/index.vue

@@ -125,6 +125,8 @@ export default {
     // 排序配置
     sortGroup: { type: Boolean, default: false },
     defaultSort: { type: Object, default: null },
+    // 过滤配置
+    filterMethod: { type: Function, default: null },
     title: { type: String, default: '' },
     height: { type: [Number, String], default: null },
     maxHeight: { type: [Number, String], default: null },
@@ -168,15 +170,22 @@ export default {
     // 排序后的数据
     sortedTableData() {
       if (!this.tableData.length) return []
-      if (!this.sortProp || !this.sortOrder) return [...this.tableData]
+
+      let data = [...this.tableData]
+
+      if (typeof this.filterMethod === 'function') {
+        data = data.filter(this.filterMethod)
+      }
+
+      if (!this.sortProp || !this.sortOrder) return data
 
       const order = this.sortOrder === 'ascending' ? 1 : -1
       const sortFn = this.resolveSortMethod(this.sortProp)
 
       if (this.sortGroup && this.groupColumns.length) {
-        return this.groupSort([...this.tableData], sortFn, order)
+        return this.groupSort(data, sortFn, order)
       }
-      return [...this.tableData].sort((a, b) => sortFn(a, b) * order)
+      return data.sort((a, b) => sortFn(a, b) * order)
     },
 
     // 处理小计、总计后的最终数据

package/src/styles/variables-export.scss

@@ -11,76 +11,4 @@
   xtColorDanger: #{$xt-color-danger};             // 危险色 - Element UI 标准红色
   xtColorInfo: #{$xt-color-info};                 // 信息色 - Element UI 标准灰色
 
-  // 主色调浅色系列
-  xtColorPrimaryLight3: #{$xt-color-primary-light-3};   // 主色浅色 30%
-  xtColorPrimaryLight5: #{$xt-color-primary-light-5};   // 主色浅色 50%
-  xtColorPrimaryLight7: #{$xt-color-primary-light-7};   // 主色浅色 70%
-  xtColorPrimaryLight8: #{$xt-color-primary-light-8};   // 主色浅色 80%
-  xtColorPrimaryLight9: #{$xt-color-primary-light-9};   // 主色浅色 90%
-
-  // ===========================
-  // 文字颜色
-  // ===========================
-  xtColorTextPrimary: #{$xt-color-text-primary};       // 主要文字颜色 - 最深
-  xtColorTextRegular: #{$xt-color-text-regular};       // 常规文字颜色 - 中等
-  xtColorTextSecondary: #{$xt-color-text-secondary};   // 次要文字颜色 - 较浅
-  xtColorTextPlaceholder: #{$xt-color-text-placeholder}; // 占位符文字颜色
-  xtColorTextDisabled: #{$xt-color-text-disabled};     // 禁用状态文字颜色
-
-  // ===========================
-  // 背景颜色
-  // ===========================
-  xtColorBgPrimary: #{$xt-color-bg-primary};       // 主背景色 - 白色
-  xtColorBgSecondary: #{$xt-color-bg-secondary};   // 次要背景色 - 浅灰
-  xtColorBgHover: #{$xt-color-bg-hover};           // 悬停背景色
-  xtColorBgContainer: #{$xt-color-bg-container};   // 容器背景色
-  xtColorBgOverlay: #{$xt-color-bg-overlay};       // 浮层背景色
-
-  // ===========================
-  // 边框颜色
-  // ===========================
-  xtColorBorder: #{$xt-color-border};                   // 边框颜色 - 标准
-  xtColorBorderLight: #{$xt-color-border-light};       // 边框浅色
-  xtColorBorderLighter: #{$xt-color-border-lighter};   // 边框更浅色
-  xtColorBorderExtraLight: #{$xt-color-border-extra-light}; // 边框极浅色
-
-  // ===========================
-  // 字体大小
-  // ===========================
-  xtFontSizeExtraLarge: #{$xt-font-size-extra-large};   // 特大字体
-  xtFontSizeLarge: #{$xt-font-size-large};              // 大字体
-  xtFontSizeMedium: #{$xt-font-size-medium};            // 中等字体
-  xtFontSizeBase: #{$xt-font-size-small};                // 基准字体
-  xtFontSizeSmall: #{$xt-font-size-mini};              // 小字体
-  xtFontSizeExtraSmall: #{$xt-font-size-extra-small};   // 特小字体
-
-  // ===========================
-  // 间距
-  // ===========================
-  xtSpacingXs: #{$xt-spacing-xs};   // 最小间距
-  xtSpacingSm: #{$xt-spacing-sm};   // 小间距
-  xtSpacingMd: #{$xt-spacing-md};   // 中间距
-  xtSpacingLg: #{$xt-spacing-lg};   // 大间距
-  xtSpacingXl: #{$xt-spacing-xl};   // 特大间距
-
-  // ===========================
-  // 圆角
-  // ===========================
-  xtBorderRadiusBase: #{$xt-border-radius-base};     // 基准圆角
-  xtBorderRadiusSmall: #{$xt-border-radius-small};   // 小圆角
-  xtBorderRadiusRound: #{$xt-border-radius-round};   // 圆角（胶囊状）
-  xtBorderRadiusCircle: #{$xt-border-radius-circle}; // 圆形
-
-  // ===========================
-  // 阴影
-  // ===========================
-  xtShadowSm: #{$xt-shadow-sm};   // 小阴影
-  xtShadowMd: #{$xt-shadow-md};   // 中等阴影
-  xtShadowLg: #{$xt-shadow-lg};   // 大阴影
-
-  // ===========================
-  // 过渡动画
-  // ===========================
-  xtTransitionDuration: #{$xt-transition-duration};         // 默认过渡时长
-  xtTransitionDurationFast: #{$xt-transition-duration-fast}; // 快速过渡时长
 }