xt-element-ui 1.2.2 → 1.2.4

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.js

@@ -1,2 +1,2 @@
-import ConfigProvider from './index.vue'
-export default ConfigProvider
+import XtConfigProvider from './index.vue'
+export default XtConfigProvider

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

@@ -1,4 +1,5 @@
 <script>
+import EchartsUtil from '../ex-chart/utils.js'
 export default {
   name: 'XtConfigProvider',
   inheritAttrs: false,
@@ -73,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: {
@@ -139,9 +140,9 @@ export default {
       }
       
       const sizeMap = {
-        small: '12px',
-        medium: '14px',
-        large: '16px'
+        small: '14px',
+        medium: '16px',
+        large: '18px'
       }
       if (sizeMap[this.size]) {
         result['--xt-font-size-base'] = sizeMap[this.size]
@@ -308,6 +309,9 @@ export default {
       
       // 设置 data-theme 属性
       element.setAttribute('data-theme', this.theme)
+
+      // 更新图表颜色
+      EchartsUtil.changeAllTheme(this.theme, this.size, this.primaryColor)
       
       // 触发主题改变钩子（当主题实际发生变化时）
       if (prevTheme !== this.theme && typeof this.onThemeChange === 'function') {

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/components/xt-text/style/index.scss

@@ -76,17 +76,17 @@
 }
 
 // 暗色主题
-[data-theme='dark'] .xt-text--primary {
-}
-
-[data-theme='dark'] .xt-text--success {
-  color: $xt-dark-color-success;
-}
-
-[data-theme='dark'] .xt-text--warning {
-  color: $xt-dark-color-warning;
-}
-
-[data-theme='dark'] .xt-text--danger {
-  color: $xt-dark-color-danger;
+[data-theme='dark'], html.dark {
+  .xt-text--primary {
+    color: $xt-dark-color-primary;
+  }
+  .xt-text--success {
+    color: $xt-dark-color-success;
+  }
+  .xt-text--warning {
+    color: $xt-dark-color-warning;
+  }
+  .xt-text--danger {
+    color: $xt-dark-color-danger;
+  }
 }

package/src/styles/css-variables.scss

@@ -183,7 +183,7 @@
 // 暗色主题（参考 Element Plus）
 // ============================
 :root[data-theme="dark"],
-[data-theme="dark"] {
+[data-theme="dark"], html.dark {
     color-scheme: dark;
     --xt-color-primary: #409eff;
     --xt-color-primary-light-3: rgb(51, 117, 185);

package/src/styles/element-theme.scss

@@ -70,7 +70,7 @@
 
 /* 深色主题 */
 :root[data-theme="dark"],
-[data-theme="dark"] {
+[data-theme="dark"], html.dark {
   --el-color-primary: #409eff;
   --el-text-color-primary: #ffffff;
   --el-color-primary-light-9: #1d1e1f;

package/src/utils/index.js

@@ -1,3 +1,4 @@
+import EchartsUtil from '../components/ex-chart/utils'
 // 默认配置
 const defaultConfig = {
     theme: 'white',
@@ -44,7 +45,7 @@ export const setConfig = function(config) {
 }
 
 
-// 设置主题
+// 设置主题 并更新图表主题
 export const setTheme = function(theme) {
     const validThemes = ['white', 'dark']
     if (!validThemes.includes(theme)) {
@@ -59,9 +60,13 @@ export const setTheme = function(theme) {
     if (theme === 'dark') {
       root.setAttribute('data-theme', 'dark')
     } else {
-      root.removeAttribute('data-theme')
+      root.setAttribute('data-theme', theme)
     }
     
+    // 更新图表主题
+    EchartsUtil.changeAllTheme(currentConfig.theme, currentConfig.size)
+    console.log('更新图表主题')
+    
     emitConfigChange('theme', theme)
 }
 
@@ -75,6 +80,10 @@ export const setSize = function(size) {
     
     currentConfig.size = size
     document.documentElement.setAttribute('data-size', size)
+    // 更新图表主题
+    EchartsUtil.changeAllTheme(currentConfig.theme, currentConfig.size)
+    console.log('更新图表字体')
+
     emitConfigChange('size', size)
 }
 

package/src/components/xt-upload/index.js

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