xt-element-ui 1.2.3 → 1.2.5

package/src/components/xt-card-item/images/bar.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1781571276852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="35671" data-spm-anchor-id="a313x.search_index.0.i17.53a93a81J5fQhI" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 346.453333h179.2v611.84H0z" fill="#C0D6FF" p-id="35672" data-spm-anchor-id="a313x.search_index.0.i14.53a93a81J5fQhI" class=""></path><path d="M281.6 113.777778H460.8v844.8H281.6z" fill="#035DFF" p-id="35673" data-spm-anchor-id="a313x.search_index.0.i16.53a93a81J5fQhI" class="selected"></path><path d="M563.2 229.376h179.2v729.088H563.2z" fill="#32C894" p-id="35674"></path><path d="M844.8 338.716444H1024v620.032h-179.2z" fill="#CCF1E4" p-id="35675" data-spm-anchor-id="a313x.search_index.0.i13.53a93a81J5fQhI" class="selected"></path></svg>

package/src/components/xt-card-item/images/line.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1781571535496" class="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="54623" data-spm-anchor-id="a313x.search_index.0.i19.53a93a81J5fQhI" xmlns:xlink="http://www.w3.org/1999/xlink" width="239.84375" height="200"><path d="M25.4464 679.296C137.3696 957.952 264.3968 1061.4528 405.8624 985.088c41.5744-22.4256 85.1712-81.0752 138.24-179.5584 21.3504-39.5776 43.8272-84.736 72.448-144.7168 12.9536-27.1872 63.5392-134.8096 75.6992-160.4096 97.6128-205.1328 165.2224-323.9168 238.7456-403.2768 92.5184-99.8912 180.1216-113.4592 271.2576-27.392l8.8064-9.2928c-96.896-91.4944-192.512-76.672-289.4592 27.9808-74.7008 80.64-142.7456 200.1408-240.896 406.5024-12.2112 25.6-62.7712 133.2224-75.7248 160.384-28.5184 59.8016-50.9184 104.7808-72.1408 144.128-51.8912 96.3328-94.464 153.5488-133.0688 174.3872C267.3664 1045.2992 146.7904 947.0976 37.3504 674.56l-11.8784 4.7616z" fill="#67c8fb" p-id="54624" data-spm-anchor-id="a313x.search_index.0.i20.53a93a81J5fQhI" class="selected"></path><path d="M0.1024 472.3968c95.0272 187.1616 234.496 238.72 415.744 153.4976 69.632-32.768 118.8864-87.6288 209.3312-215.7056l9.728-13.7984 9.728-13.7216c92.3648-130.3552 146.2272-184.4736 218.6496-199.8592 93.1328-19.7632 201.8816 44.5696 340.736 215.936l9.984-8.064c-141.568-174.6944-254.3616-241.408-353.3568-220.3904-76.8512 16.3328-132.1728 71.8848-226.4576 204.9792l-9.728 13.7472-9.728 13.7984c-89.088 126.1568-137.472 180.0448-204.3392 211.4816-174.848 82.2528-306.944 33.408-398.8736-147.712L0.1024 472.4224z" fill="#5483FC" p-id="54625"></path></svg>

package/src/components/xt-card-item/images/pie.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1781571036529" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15689" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M463.368 835.6c-139.688-23.544-278.456-159-278.456-323.256 6.512-159.328 121.848-293.224 278.456-323.256V0.648C230.768 24.192 0.008 244.08 0.008 511.704c0 267.616 230.624 488.16 463.352 511.048V835.6z m0 0" fill="#83a9fd" p-id="15690"></path><path d="M837.352 511.704a322.96 322.96 0 0 1-21.6 121.048l161.832 93.592a520.536 520.536 0 0 0 44.528-214.64m0 0c6.728-267.888-199.096-493.376-466.488-511.056l0.648 187.8c186.088 23.576 281.08 159 281.08 323.256" fill="#2e65f3" p-id="15691" data-spm-anchor-id="a313x.search_index.0.i8.53a93a81J5fQhI" class="selected"></path><path d="M770.336 711.928a315.104 315.104 0 0 1-212.056 121.832v188a533.704 533.704 0 0 0 371.096-216.168l-159.04-93.664z m0 0" fill="#83a9fd" p-id="15692"></path></svg>

package/src/components/xt-card-item/index copy.vue

@@ -0,0 +1,93 @@
+<template>
+  <FlexBox 
+    v-if="iconType=='border'" 
+    class="xt-card-item is-border" 
+    :class="[iconType=='border'?`is-${type}`:'']" 
+    :style="cardItemStyle" 
+    content="between"
+  >
+    <span class="item__label" v-if="title">
+      <slot name="label">{{ label }}</slot>
+    </span>
+    <span class="item__value">
+      <slot name="value">{{ value }}</slot>
+    </span>
+    <span class="item__unit">
+      <slot name="unit">{{ unit }}</slot>
+    </span>
+  </FlexBox>
+  <FlexBox 
+    v-else 
+    class="xt-card-item" 
+    :direction="direction" 
+    :content="contentAlign"
+  >
+    <slot name="icon">
+      <el-button :type="type" :circle="circle" :round="round" plain :icon="icon"></el-button>
+    </slot>
+    <div class="item__value">
+      <span class="value" :style="valueStyle">
+        <slot name="value">{{ label }}</slot>
+      </span>
+      <div class="unit">{{ value }}</div>
+    </div>
+  </FlexBox>
+</template>
+<script>
+import FlexBox from '../xt-flex-box/index.vue'
+export default {
+  name: "XtCardItem",
+  components: {
+    FlexBox
+  },
+  props: {
+    iconType: { default: "border" },
+    type: { default: "primary" },
+    label: {},
+    value: {},
+    unit: {},
+    icon: {},
+    iconAt: { default: "right" },
+    color: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      circle: false,
+      round: false
+    }
+  },
+  computed: {
+    contentAlign() {
+      return this.iconAt == 'center' ? 'center' : 'start'
+    },
+    direction() {
+      const iconAtMap = {
+        left: 'row',
+        right: 'row-reverse',
+        top: 'column',
+        bottom: 'column-reverse'
+      }
+      return iconAtMap[this.iconAt]
+    },
+    cardItemStyle() {
+      if (this.iconType === 'border' && this.type === 'primary' && this.color) {
+        return {
+          '--xt-card-item-color': this.color
+        }
+      }
+      return {}
+    },
+    valueStyle() {
+      if (this.iconType !== 'border' && this.type === 'primary' && this.color) {
+        return {
+          color: this.color
+        }
+      }
+      return {}
+    }
+  }
+}
+</script>

package/src/components/xt-card-item/index.vue

@@ -1,93 +1,33 @@
 <template>
-  <FlexBox 
-    v-if="iconType=='border'" 
-    class="xt-card-item is-border" 
-    :class="[iconType=='border'?`is-${type}`:'']" 
-    :style="cardItemStyle" 
-    content="between"
-  >
-    <span class="item__label" v-if="title">
-      <slot name="label">{{ label }}</slot>
-    </span>
-    <span class="item__value">
-      <slot name="value">{{ value }}</slot>
-    </span>
-    <span class="item__unit">
-      <slot name="unit">{{ unit }}</slot>
-    </span>
-  </FlexBox>
-  <FlexBox 
-    v-else 
-    class="xt-card-item" 
-    :direction="direction" 
-    :content="contentAlign"
-  >
-    <slot name="icon">
-      <el-button :type="type" :circle="circle" :round="round" plain :icon="icon"></el-button>
-    </slot>
-    <div class="item__value">
-      <span class="value" :style="valueStyle">
-        <slot name="value">{{ label }}</slot>
-      </span>
-      <div class="unit">{{ value }}</div>
-    </div>
-  </FlexBox>
+    <ex-card class="xt-card-item" :bordered="false" :class="{ [`is-${type}`]: type ? true : false}">
+        <xt-text bold size="medium">{{ title }}</xt-text>
+        <xt-flex-box>
+          <div style="width: 50%;margin-bottom: 5px;">
+            <xt-text bold size="large" v-model="value" format="thousand" :type="type" :decimals="0"></xt-text>
+            <div style="margin: 5px 0;">
+              <xt-text size="small">较昨日</xt-text>
+              <xt-text v-model="change" format="normal" :type="diff > 0 ? 'success' : 'danger'" :suffix="diff > 0 ? '↑' : '↓'"></xt-text> 
+            </div>
+          </div>
+          <div style="flex: 1; height: 100%;">
+            <xt-text size="extra-large" :type="type"><i class="el-icon-user"></i></xt-text>
+          </div>
+        </xt-flex-box>
+      </ex-card>
 </template>
 <script>
-import FlexBox from '../xt-flex-box/index.vue'
 export default {
-  name: "XtCardItem",
-  components: {
-    FlexBox
-  },
-  props: {
-    iconType: { default: "border" },
-    type: { default: "primary" },
-    label: {},
-    value: {},
-    unit: {},
-    icon: {},
-    iconAt: { default: "right" },
-    color: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      circle: false,
-      round: false
-    }
-  },
-  computed: {
-    contentAlign() {
-      return this.iconAt == 'center' ? 'center' : 'start'
-    },
-    direction() {
-      const iconAtMap = {
-        left: 'row',
-        right: 'row-reverse',
-        top: 'column',
-        bottom: 'column-reverse'
-      }
-      return iconAtMap[this.iconAt]
-    },
-    cardItemStyle() {
-      if (this.iconType === 'border' && this.type === 'primary' && this.color) {
-        return {
-          '--xt-card-item-color': this.color
-        }
-      }
-      return {}
+    name: "XtCardItem",
+    props: {
+        type: { type: String, default: "primary" },
+        title: { type: String, default: '' },
+        diff: { type: Number, default: 0 },
+        value: { type: Number, default: 0 },
+        change: { type: Number, default: 0 },
     },
-    valueStyle() {
-      if (this.iconType !== 'border' && this.type === 'primary' && this.color) {
+    data() {
         return {
-          color: this.color
         }
-      }
-      return {}
     }
-  }
 }
 </script>

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

@@ -0,0 +1,72 @@
+@import '../../../styles/variables.scss';
+
+.xt-card-item {
+  --xt-card-item-color: var(--xt-color-primary, #1890ff);
+  
+  min-height: var(--xt-card-item-min-height, 40px);
+}
+
+.xt-card-item + .xt-card-item {
+  margin-top: var(--xt-card-item-gap, 10px);
+}
+
+.xt-card-item.is-border {
+  border-right: var(--xt-card-item-border-width, 3px) solid transparent;
+  background-color: var(--xt-color-bg-secondary, #f5f7fa);
+}
+
+.xt-card-item.is-border.is-primary {
+  border-right-color: var(--xt-card-item-color);
+}
+
+.xt-card-item.is-border.is-primary .item__value .value {
+  color: var(--xt-card-item-color);
+}
+
+.xt-card-item.is-border.is-success {
+  border-right-color: var(--xt-color-success, #67C23A);
+}
+
+.xt-card-item.is-border.is-success .item__value .value {
+  color: var(--xt-color-success, #67C23A);
+}
+
+.xt-card-item.is-border.is-warning {
+  border-right-color: var(--xt-color-warning, #E6A23C);
+}
+
+.xt-card-item.is-border.is-warning .item__value .value {
+  color: var(--xt-color-warning, #E6A23C);
+}
+
+.xt-card-item.is-border.is-danger {
+  border-right-color: var(--xt-color-danger, #F56C6C);
+}
+
+.xt-card-item.is-border.is-danger .item__value .value {
+  color: var(--xt-color-danger, #F56C6C);
+}
+
+.xt-card-item .item__value {
+  padding-right: 10px;
+}
+
+.xt-card-item .item__value .value {
+  font-weight: 600;
+  font-size: var(--xt-font-size-base, 14px);
+}
+
+.xt-card-item .item__value .unit {
+  font-size: var(--xt-font-size-small, 13px);
+  color: var(--xt-color-text-secondary, #909399);
+}
+
+.xt-card-item .item__label {
+  padding-left: 10px;
+  color: var(--xt-color-text-secondary, #909399);
+}
+
+.xt-card-item .item__unit {
+  padding-left: 5px;
+  color: var(--xt-color-text-secondary, #909399);
+}

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

@@ -1,72 +1,83 @@
 @import '../../../styles/variables.scss';
 
 .xt-card-item {
-  --xt-card-item-color: var(--xt-color-primary, #1890ff);
+  --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);
   
-  min-height: var(--xt-card-item-min-height, 40px);
+  border-radius: var(--xt-card-border-radius, 4px);
+  box-shadow: var(--xt-card-shadow, 0 2px 12px 0 rgba(0, 0, 0, 0.1));
+  background-color: var(--xt-card-bg-color);
+  overflow: hidden;
+  color: var(--xt-card-text-color);
+  transition: var(--xt-transition-duration, 0.3s);
 }
 
-.xt-card-item + .xt-card-item {
-  margin-top: var(--xt-card-item-gap, 10px);
+.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-border {
-  border-right: var(--xt-card-item-border-width, 3px) solid transparent;
-  background-color: var(--xt-color-bg-secondary, #f5f7fa);
-}
 
-.xt-card-item.is-border.is-primary {
-  border-right-color: var(--xt-card-item-color);
+.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-border.is-primary .item__value .value {
-  color: var(--xt-card-item-color);
-}
 
-.xt-card-item.is-border.is-success {
-  border-right-color: var(--xt-color-success, #67C23A);
-}
 
-.xt-card-item.is-border.is-success .item__value .value {
-  color: var(--xt-color-success, #67C23A);
+.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-border.is-warning {
-  border-right-color: var(--xt-color-warning, #E6A23C);
-}
 
-.xt-card-item.is-border.is-warning .item__value .value {
-  color: var(--xt-color-warning, #E6A23C);
-}
 
-.xt-card-item.is-border.is-danger {
-  border-right-color: var(--xt-color-danger, #F56C6C);
+.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.is-border.is-danger .item__value .value {
-  color: var(--xt-color-danger, #F56C6C);
+
+.xt-card-item .card__header {
+  padding: var(--xt-card-header-padding, 18px 20px);
+  box-sizing: border-box;
+  font-weight: 600;
+  font-size: var(--xt-font-size-medium, 16px);
 }
 
-.xt-card-item .item__value {
-  padding-right: 10px;
+.xt-card-item .card__body {
+  padding: var(--xt-card-padding, 20px);
 }
 
-.xt-card-item .item__value .value {
+.xt-card-item .card__body .value {
+  font-size: var(--xt-font-size-large, 18px);
   font-weight: 600;
-  font-size: var(--xt-font-size-base, 14px);
+  color: var(--xt-color-primary, #1890ff);
 }
 
-.xt-card-item .item__value .unit {
-  font-size: var(--xt-font-size-small, 13px);
+.xt-card-item .card__body .unit {
+  font-size: var(--xt-font-size-base, 14px);
   color: var(--xt-color-text-secondary, #909399);
+  margin-left: 4px;
 }
 
-.xt-card-item .item__label {
-  padding-left: 10px;
-  color: var(--xt-color-text-secondary, #909399);
+.xt-card-item .value {
+  font-weight: 600;
 }
 
-.xt-card-item .item__unit {
-  padding-left: 5px;
-  color: var(--xt-color-text-secondary, #909399);
+.xt-card-item .card__header + .card__body {
+  padding-top: 0;
+}
+
+.xt-card-item.noPadding .card__body {
+  padding: 0;
 }

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

@@ -74,9 +74,9 @@ export default {
   props: {
     theme: {
       type: String,
-      default: 'light',
+      default: 'white',
       validator: (value) => {
-        return ['light', 'dark', 'auto'].includes(value)
+        return ['white', 'dark', 'auto'].includes(value)
       }
     },
     size: {

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

@@ -5,13 +5,15 @@
       type ? 'xt-text--' + type : '',
       'xt-text--' + size,
       { 'xt-text--bold': bold },
-      { 'xt-text--money': money }
+      { 'xt-text--money': format === 'money' }
     ]"
     :style="customStyle"
   >
+    <slot name="prefix">{{ prefix }}</slot>
     <slot>
-      <template v-if="money && displayValue !== undefined">{{ displayValue }}</template>
+      <template v-if="formattedValue !== undefined">{{ formattedValue }}</template>
     </slot>
+    <slot name="suffix">{{ suffix }}</slot> 
   </span>
 </template>
 
@@ -41,7 +43,15 @@ export default {
       type: [String, Number],
       default: ''
     },
-    // 金额格式化相关属性
+
+    // 格式化模式：normal 普通 | thousand 千分位 | money 金额
+    format: {
+      type: String,
+      default: 'normal',
+      validator: (val) => ['normal', 'thousand', 'money'].includes(val)
+    },
+
+    // 兼容旧属性 money（老项目继续使用）
     money: {
       type: Boolean,
       default: false
@@ -78,6 +88,11 @@ export default {
     }
   },
   computed: {
+    // 兼容旧 money 属性：如果传了 money=true，自动切为金额模式
+    realFormat() {
+      return this.money ? 'money' : this.format
+    },
+
     customStyle() {
       const style = {}
       if (this.letterSpacing) {
@@ -85,41 +100,55 @@ export default {
       }
       return style
     },
-    displayValue() {
-      if (!this.money || this.value === '' || this.value === undefined || this.value === null) {
+
+    formattedValue() {
+      const fmt = this.realFormat
+      const { value } = this
+
+      if (value === '' || value === undefined || value === null) {
         return undefined
       }
-      
-      const numValue = typeof this.value === 'string' ? parseFloat(this.value) : this.value
-      
+
+      const numValue = typeof value === 'string' ? parseFloat(value) : value
       if (isNaN(numValue)) {
-        return this.value
+        return value
       }
-      
+
       try {
-        const formatter = new Intl.NumberFormat(this.locale, {
-          style: 'currency',
-          currency: this.currency,
-          minimumFractionDigits: this.decimals,
-          maximumFractionDigits: this.decimals,
-          signDisplay: this.showSign ? 'always' : 'auto'
-        })
-        
-        let result = formatter.format(numValue)
-        
-        // 处理前缀和后缀
-        if (this.prefix) {
-          result = this.prefix + result
-        }
-        if (this.suffix) {
-          result = result + this.suffix
+        let result = ''
+        const signOpt = this.showSign ? 'always' : 'auto'
+
+        switch (fmt) {
+          // 千分位格式化（纯数字）
+          case 'thousand':
+            result = new Intl.NumberFormat(this.locale, {
+              minimumFractionDigits: this.decimals,
+              maximumFractionDigits: this.decimals,
+              signDisplay: signOpt
+            }).format(numValue)
+            break
+
+          // 金额格式化（原有逻辑）
+          case 'money':
+            result = new Intl.NumberFormat(this.locale, {
+              style: 'currency',
+              currency: this.currency,
+              minimumFractionDigits: this.decimals,
+              maximumFractionDigits: this.decimals,
+              signDisplay: signOpt
+            }).format(numValue)
+            break
+
+          // 普通文本，直接返回原值
+          default:
+            return undefined
         }
-        
+
         return result
       } catch (e) {
-        return this.value
+        return value
       }
     }
   }
 }
-</script>
+</script>ss

package/src/index.js

@@ -29,6 +29,7 @@ import XtDatePicker from './components/xt-date-picker'
 import ExButton from './components/ex-button'
 import ExChart from './components/ex-chart'  // ExChart 组件（基于 ECharts 封装）
 import ExCard from './components/ex-card'
+import ExIcon from './components/ex-icon'    // ExIcon 组件（支持 el-icon / svg / 自定义字体）
 import ExTable from './components/ex-table'  // ExTable 组件（基于 ElementUI Table 封装）
 
 // 导入 Element UI 组件注册配置
@@ -49,6 +50,7 @@ const components = [
   ExButton,
   ExChart,
   ExCard,
+  ExIcon,
   ExTable
 ]
 
@@ -134,6 +136,7 @@ export default {
   XtDatePicker,
   ExButton,
   ExCard,
+  ExIcon,
   ExTable
 }