xt-element-ui 1.0.8 → 1.1.0

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

@@ -1,112 +1,93 @@
 <template>
-<FlexBox v-if="iconType=='border'" class="xt-card-item is-border" :class="[iconType=='border'?`is-${type}`:'']" 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">
-      <slot name="value">{{ label }}</slot>
+  <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>
-    <div class="unit">{{ value }}</div>
-  </div>
-  
-</FlexBox>
+    <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 '../flex-box/index.vue'
 export default {
-  name:"XtCardItem",
-  components:{
+  name: "XtCardItem",
+  components: {
     FlexBox
   },
-  props:{
-    iconType:{default:"border"},
-    type:{default:"primary"},
-    label:{},
-    value:{},
-    unit:{},
-    icon:{},
-    iconAt:{default:"right"}
+  props: {
+    iconType: { default: "border" },
+    type: { default: "primary" },
+    label: {},
+    value: {},
+    unit: {},
+    icon: {},
+    iconAt: { default: "right" },
+    color: {
+      type: String,
+      default: ''
+    }
   },
-  data(){
-    return{
+  data() {
+    return {
       circle: false,
       round: false
     }
   },
-  computed:{
-    contentAlign(){
-      return this.iconAt=='center'?'center':'start'
+  computed: {
+    contentAlign() {
+      return this.iconAt == 'center' ? 'center' : 'start'
     },
-    direction(){
+    direction() {
       const iconAtMap = {
-        left:'row',
-        right:'row-reverse',
-        top:'column',
-        bottom:'column-reverse'
+        left: 'row',
+        right: 'row-reverse',
+        top: 'column',
+        bottom: 'column-reverse'
       }
       return iconAtMap[this.iconAt]
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.xt-card-item{  
-  min-height: 40px;
-  + .xt-card-item{
-    margin-top: 10px;
-  }
-  &.is-border{
-    border-right: 3px solid transparent;
-    background-color: #f5f7fa;
-    &.is-primary{
-      border-right-color: $xt-color-primary;
-      .item-value .value{
-        color: $xt-color-primary;
-      }
-    }
-    &.is-success{
-      border-right-color: #67c23a;
-      .item-value .value{
-        color: #67c23a;
-      }
-    }
-    &.is-warning{
-      border-right-color: #e6a23c;
-      .item-value .value{
-        color: #e6a23c;
+    },
+    cardItemStyle() {
+      if (this.iconType === 'border' && this.type === 'primary' && this.color) {
+        return {
+          '--xt-card-item-color': this.color
+        }
       }
-    }
-    &.is-danger{
-      border-right-color: #f56c6c;
-      .item-value .value{
-        color: #f56c6c;
+      return {}
+    },
+    valueStyle() {
+      if (this.iconType !== 'border' && this.type === 'primary' && this.color) {
+        return {
+          color: this.color
+        }
       }
+      return {}
     }
   }
-  .item-value{
-    padding-right: 10px;
-    .value{
-      font-weight: 600;
-      font-size: $xt-font-size-base;
-    }
-  }
-  .item_label{
-    padding-left: 10px;
-  }
-  .item_unit{
-    padding-left: 5px;
-  }
 }
-</style>
+</script>

package/src/components/card-item/style/index.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/config-provider/index.js

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

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

@@ -0,0 +1,193 @@
+<template>
+  <!-- 根据 tag 属性选择渲染的标签 -->
+  <component 
+    :is="tag" 
+    :style="mergedStyle" 
+    :class="computedClass"
+    v-bind="customAttrs"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'XtConfigProvider',
+  inheritAttrs: false,
+  props: {
+    theme: {
+      type: String,
+      default: 'white'
+    },
+    size: {
+      type: String,
+      default: 'medium'
+    },
+    primaryColor: {
+      type: String,
+      default: '#409EFF'
+    },
+    vars: {
+      type: Object,
+      default: () => ({})
+    },
+    tag: {
+      type: String,
+      default: 'div',
+      validator: (value) => {
+        return ['div', 'span', 'section', 'main', 'template', 'article', 'aside'].includes(value)
+      }
+    },
+    injectBackground: {
+      type: Boolean,
+      default: false
+    },
+    injectColor: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    mergedStyle() {
+      const result = { ...this.vars }
+      
+      if (this.primaryColor) {
+        const color = this.normalizeColor(this.primaryColor)
+        result['--xt-color-primary'] = color
+        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)
+      }
+      
+      const sizeMap = {
+        small: '12px',
+        medium: '14px',
+        large: '16px'
+      }
+      if (sizeMap[this.size]) {
+        result['--xt-font-size-base'] = sizeMap[this.size]
+      }
+      
+      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']
+        }
+        if (this.injectColor) {
+          result.color = result['--xt-color-text-primary']
+        }
+      } 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'
+        
+        if (this.injectBackground) {
+          result.backgroundColor = result['--xt-color-bg-primary']
+        }
+        if (this.injectColor) {
+          result.color = result['--xt-color-text-primary']
+        }
+      }
+      
+      return result
+    },
+    computedClass() {
+      const classes = []
+      
+      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 attrs = {}
+      
+      for (const key in this.$attrs) {
+        if (!props.includes(key)) {
+          attrs[key] = this.$attrs[key]
+        }
+      }
+      
+      return attrs
+    }
+  },
+  methods: {
+    normalizeColor(color) {
+      if (!color) return '#409EFF'
+      
+      if (/^#[0-9A-Fa-f]{6}$/.test(color)) {
+        return color
+      }
+      
+      if (/^#[0-9A-Fa-f]{3}$/.test(color)) {
+        return '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3]
+      }
+      
+      if (/^#[0-9A-Fa-f]{8}$/.test(color)) {
+        return color.substring(0, 7)
+      }
+      
+      const rgbaMatch = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/i)
+      if (rgbaMatch) {
+        const r = parseInt(rgbaMatch[1])
+        const g = parseInt(rgbaMatch[2])
+        const b = parseInt(rgbaMatch[3])
+        return this.rgbToHex(r, g, b)
+      }
+      
+      console.warn('[XtConfigProvider] 无法识别的颜色格式:', color)
+      return '#409EFF'
+    },
+    
+    hexToRgb(hex) {
+      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+      return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+      } : null
+    },
+    
+    rgbToHex(r, g, b) {
+      return '#' + [r, g, b].map(x => {
+        const hex = x.toString(16)
+        return hex.length === 1 ? '0' + hex : hex
+      }).join('')
+    },
+    
+    lightenColor(hex, percent) {
+      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)
+      
+      return this.rgbToHex(r, g, b)
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,12 @@
+@import '../../../styles/variables.scss';
+
+.xt-config-provider {
+}
+
+.xt-config-provider--dark {
+}
+
+.xt-config-provider--dark.xt-config-provider--with-bg {
+  background-color: var(--xt-color-bg-primary, #1f1f1f);
+  color: var(--xt-color-text-primary, rgba(255, 255, 255, 0.95));
+}

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

@@ -1,104 +1,34 @@
-<<template>
-  <div class="xt-flex-box" :class="classAttrs" style="gap: gap">
+<template>
+  <div class="xt-flex-box" :class="classAttrs" :style="flexStyle">
     <slot></slot>
   </div>
 </template>
 
 <script>
 export default {
-    name: "XtFlex",
+    name: "XtFlexBox",
     props: {
-        type: "flex",
-        align: "center",
-        content: "start",
-        direction: "row",
-        wrap: "unset",
-        gap: {}
+        type: { type: String, default: "flex" },
+        align: { type: String, default: "center" },
+        content: { type: String, default: "start" },
+        direction: { type: String, default: "row" },
+        wrap: { type: String, default: "unset" },
+        gap: { type: String, default: "" }
     },
     computed: {
         classAttrs(){
-            const {inline, align, wrap, direction,content} = this;
-            return [`${inline?'is-inline':'flex'}`, `align-${align} content-${content} direction-${direction} wrap-${wrap}`]
-        }
-    }
-}
-</script>
-
-<style scoped lang="scss">
-.xt-flex-box{
-    &.flex{
-        display: flex;
-        &.direction{
-            &-row,&-row-reverse{
-                >.flex{
-                    width: 100%;
-                }
+            const { type, align, wrap, direction, content } = this;
+            return [`${type}`, `align-${align}`, `content-${content}`, `direction-${direction}`, `wrap-${wrap}`]
+        },
+        flexStyle() {
+            const result = {}
+            if (this.gap) {
+                result.gap = this.gap
+            } else {
+                result.gap = 'var(--xt-flex-box-gap, 8px)'
             }
-            &-column,&-column-reverse{
-                >.flex{
-                    height: 100%;
-                }
-            }
-        }
-    }
-    &.is-inline{
-        display: inline-flex;
-    }
-    
-}
-.direction{
-    &-row{
-        flex-direction: row;
-        &-reverse{
-            flex-direction: row-reverse;
-        }
-    }
-    &-column{
-        flex-direction: column;
-        &-reverse{
-            flex-direction: column-reverse;
+            return result
         }
     }
 }
-.align{
-    &-center{
-        align-items: center;
-    }
-    &-start{
-        align-items: flex-start;
-    }
-    &-end{
-        align-items: flex-end;
-    }
-
-}
-
-.content{
-    &-center{
-        justify-content: center;
-    }
-    &-around{
-        justify-content: space-around;
-    }
-    &-between{
-        justify-content: space-between;
-    }
-    &-start{
-        justify-content: flex-start;
-    }
-    &-end{
-        justify-content: flex-end;
-    }
-}
-.wrap{
-    &-wrap{
-        flex-wrap: wrap;
-    }
-    &-nowrap{
-        flex-wrap: nowrap;
-    }
-    &-unset{
-        flex-wrap: wrap;
-    }
-}
-</style>
+</script>

package/src/components/flex-box/style/index.scss

@@ -0,0 +1,91 @@
+@import '../../../styles/variables.scss';
+
+.xt-flex-box.flex {
+  display: flex;
+}
+
+.xt-flex-box.flex.direction-row > .flex,
+.xt-flex-box.flex.direction-row-reverse > .flex {
+  width: 100%;
+}
+
+.xt-flex-box.flex.direction-column > .flex,
+.xt-flex-box.flex.direction-column-reverse > .flex {
+  height: 100%;
+}
+
+.xt-flex-box.is-inline {
+  display: inline-flex;
+}
+
+.direction-row {
+  flex-direction: row;
+}
+
+.direction-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.direction-column {
+  flex-direction: column;
+}
+
+.direction-column-reverse {
+  flex-direction: column-reverse;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.align-start {
+  align-items: flex-start;
+}
+
+.align-end {
+  align-items: flex-end;
+}
+
+.align-baseline {
+  align-items: baseline;
+}
+
+.align-stretch {
+  align-items: stretch;
+}
+
+.content-center {
+  justify-content: center;
+}
+
+.content-around {
+  justify-content: space-around;
+}
+
+.content-between {
+  justify-content: space-between;
+}
+
+.content-start {
+  justify-content: flex-start;
+}
+
+.content-end {
+  justify-content: flex-end;
+}
+
+.content-evenly {
+  justify-content: space-evenly;
+}
+
+.wrap-wrap {
+  flex-wrap: wrap;
+}
+
+.wrap-nowrap {
+  flex-wrap: nowrap;
+}
+
+.wrap-unset {
+  flex-wrap: wrap;
+}

package/src/components/index.scss

@@ -0,0 +1,22 @@
+// 组件样式统一入口文件
+
+// Button 组件样式
+@import './button/style/index.scss';
+
+// Card 组件样式
+@import './card/style/index.scss';
+
+// CardItem 组件样式
+@import './card-item/style/index.scss';
+
+// Input 组件样式
+@import './input/style/index.scss';
+
+// FlexBox 组件样式
+@import './flex-box/style/index.scss';
+
+// ConfigProvider 组件样式
+@import './config-provider/style/index.scss';
+
+// Text 组件样式
+@import './text/style/index.scss';