xt-element-ui 2.1.22 → 2.1.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xt-element-ui",
-  "version": "2.1.22",
+  "version": "2.1.61",
   "description": "基于 Vue 2.7 + ElementUI 的企业级组件库，提供丰富的自定义组件和扩展组件",
   "main": "lib/index.common.js",
   "module": "lib/index.esm.js",
@@ -11,13 +11,15 @@
     "docs:build": "vuepress build docs",
     "dev": "vue-cli-service serve",
     "lib": "vue-cli-service build --target lib --name index --dest lib src/index.js",
-    "prepublishOnly": "npm run lib"
+    "prepublishOnly": "npm run lib",
+    "postinstall": "patch-package"
   },
   "peerDependencies": {
     "vue": "^2.6.10"
   },
   "devDependencies": {
     "@vue/cli-service": "~4.5.19",
+    "patch-package": "^8.0.1",
     "sass": "^1.56.0",
     "sass-loader": "^10.5.2",
     "vuepress": "^1.9.10",

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

@@ -64,25 +64,3 @@
 .xt-badge--hidden {
   display: none;
 }
-
-[data-theme='dark'], html.dark {
-  .xt-badge--primary .xt-badge__badge {
-    background: $xt-dark-color-primary;
-  }
-  
-  .xt-badge--success .xt-badge__badge {
-    background: $xt-dark-color-success;
-  }
-  
-  .xt-badge--warning .xt-badge__badge {
-    background: $xt-dark-color-warning;
-  }
-  
-  .xt-badge--danger .xt-badge__badge {
-    background: $xt-dark-color-danger;
-  }
-  
-  .xt-badge--info .xt-badge__badge {
-    background: $xt-dark-color-info;
-  }
-}

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-chart/XtBar.vue

@@ -161,9 +161,6 @@ export default {
         },
         min: 0,
         splitNumber: _self.splitNumber,
-        max: function(value) {
-          return Math.ceil(value.max / _self.splitNumber) * _self.splitNumber;
-        },
         scale: true,
         axisLabel: {
           margin: 2,

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

@@ -0,0 +1,196 @@
+<template>
+  <div class="base-date-root">
+    <el-date-picker
+      v-if="type !== 'quarter'"
+      v-model="innerValue"
+      v-bind="$attrs"
+      v-on="$listeners"
+      :type="pickerType"
+      :value-format="valueFormat"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      popper-append-to-body
+      popper-class="base-date-popper"
+    />
+
+    <el-popover
+      v-else
+      v-model="quarterPopVisible"
+      trigger="manual"
+      placement="bottom-start"
+      width="240"
+    >
+      <div class="quarter-panel">
+        <div class="quarter-header">
+          <el-button icon="el-icon-d-arrow-left" @click="year--"></el-button>
+          <span>{{ year }} 年</span>
+          <el-button icon="el-icon-d-arrow-right" @click="year++"></el-button>
+        </div>
+        <div class="quarter-list">
+          <div
+            v-for="q in 4"
+            :key="q"
+            class="quarter-item"
+            :class="{ active: quarterNum === q }"
+            @click="selectQuarter(q)"
+          >
+            Q{{ q }}
+          </div>
+        </div>
+      </div>
+
+      <el-input
+        slot="reference"
+        ref="quarterInput"
+        v-model="quarterShowText"
+        size="small"
+        readonly
+        :placeholder="placeholder"
+        :disabled="disabled"
+        clearable
+        @clear="handleClearQuarter"
+      >
+        <i slot="affix" class="el-icon-date"></i>
+      </el-input>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BaseDatePicker',
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: [String, null],
+      default: null
+    },
+    type: {
+      type: String,
+      default: 'date',
+      validator: val => ['date', 'month', 'year', 'quarter', 'week'].includes(val)
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: String,
+    valueFormat: String
+  },
+  data() {
+    return {
+      quarterPopVisible: false,
+      year: new Date().getFullYear(),
+      quarterNum: null
+    }
+  },
+  computed: {
+    pickerType() {
+      return this.type === 'quarter' ? null : this.type
+    },
+    placeholder() {
+      if (this.$props.placeholder) return this.$props.placeholder
+      const map = {
+        date: '请选择日期',
+        month: '请选择月份',
+        year: '请选择年份',
+        quarter: '请选择季度',
+        week: '请选择周'
+      }
+      return map[this.type] || '请选择日期'
+    },
+    valueFormat() {
+      if (this.$props.valueFormat) return this.$props.valueFormat
+      const map = {
+        date: 'yyyy-MM-dd',
+        month: 'yyyy-MM',
+        year: 'yyyy',
+        quarter: 'yyyy-Qq',
+        week: 'yyyy-WW'
+      }
+      return map[this.type] || 'yyyy-MM-dd'
+    },
+    innerValue: {
+      get() { return this.value },
+      set(val) { this.$emit('input', val) }
+    },
+    quarterShowText() {
+      if (!this.value) return ''
+      return `${this.year}-Q${this.quarterNum}`
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (this.type !== 'quarter' || !val) {
+          this.quarterNum = null
+          return
+        }
+        const [y, q] = val.split('-Q')
+        this.year = Number(y)
+        this.quarterNum = Number(q)
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    selectQuarter(q) {
+      this.quarterNum = q
+      const val = `${this.year}-Q${q}`
+      this.$emit('input', val)
+      this.quarterPopVisible = false
+    },
+    handleClearQuarter() {
+      this.quarterNum = null
+      this.$emit('input', null)
+    }
+  },
+  mounted() {
+    if (this.type === 'quarter' && this.$refs.quarterInput) {
+      this.$refs.quarterInput.$el.addEventListener('click', () => {
+        if (!this.disabled) this.quarterPopVisible = true
+      })
+    }
+  }
+}
+</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

@@ -0,0 +1,136 @@
+<!-- RangeDate.vue 区间业务组件 -->
+<template>
+    <div class="range-wrap">
+      <Picker
+        v-model="startVal"
+        :type="type"
+        size="small"
+        :placeholder="startPlaceholder"
+        :disabled="disabled"
+        :disabled-date="disabledStart"
+        @change="handleChange"
+      />
+      <span class="split">{{ separator }}</span>
+      <Picker
+        v-model="endVal"
+        :type="type"
+        size="small"
+        :placeholder="endPlaceholder"
+        :disabled="disabled"
+        :disabled-date="disabledEnd"
+        @change="handleChange"
+      />
+    </div>
+  </template>
+  <script>
+  import Picker from './Picker.vue'
+  export default {
+    name: 'RangeDate',
+    components: { Picker },
+    props: {
+      // 父组件v-model绑定数组 [startStr, endStr]
+      value: {
+        type: Array,
+        default: () => [null, null]
+      },
+      type: {
+        type: String,
+        default: 'date'
+      },
+      separator: {
+        type: String,
+        default: '至'
+      },
+      disabled: { type: Boolean, default: false }
+    },
+    data() {
+      return {
+        startVal: '',
+        endVal: ''
+      }
+    },
+    watch: {
+      // 外部回填回显
+      value: {
+        handler(val) {
+          const [s, e] = val || []
+          this.startVal = s || ''
+          this.endVal = e || ''
+        },
+        immediate: true
+      }
+    },
+    computed: {
+      startDate() {
+        return this.startVal ? new Date(this.startVal) : null
+      },
+      endDate() {
+        return this.endVal ? new Date(this.endVal) : null
+      },
+      startPlaceholder() {
+        const map = {
+          date: '开始日期',
+          month: '开始月份',
+          year: '开始年份',
+          quarter: '开始季度',
+          week: '开始周'
+        }
+        return map[this.type] || '开始日期'
+      },
+      endPlaceholder() {
+        const map = {
+          date: '结束日期',
+          month: '结束月份',
+          year: '结束年份',
+          quarter: '结束季度',
+          week: '结束周'
+        }
+        return map[this.type] || '结束日期'
+      }
+    },
+    methods: {
+      // 禁用开始：不能晚于已选结束
+      disabledStart(time) {
+        if (!this.endDate) return false
+        return time.getTime() > this.endDate.getTime()
+      },
+      // 禁用结束：不能早于已选开始
+      disabledEnd(time) {
+        if (!this.startDate) return false
+        return time.getTime() < this.startDate.getTime()
+      },
+      // 任意日期变更同步抛出数组给父组件
+      handleChange() {
+        this.$emit('input', [this.startVal, this.endVal])
+      }
+    }
+  }
+  </script>
+  <style scoped>
+  .range-wrap {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    width: 100%;
+  }
+  .range-wrap .el-date-editor {
+    flex: 1;
+    min-width: 130px;
+  }
+  .split {
+    flex-shrink: 0;
+    padding: 0 4px;
+  }
+  /* 手机/窄侧边栏自动竖向排列 */
+  @media (max-width: 360px) {
+    .range-wrap {
+      flex-direction: column;
+      align-items: stretch;
+    }
+    .split {
+      text-align: center;
+      margin: 4px 0;
+    }
+  }
+  </style>