xt-element-ui 1.0.7 → 1.0.9

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

@@ -0,0 +1,176 @@
+<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: 'light'
+    },
+    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']
+        }
+      }
+      
+      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,19 @@
+// 组件样式统一入口文件
+
+// 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';

package/src/components/input/index.vue

@@ -1,20 +1,37 @@
 <template>
+  <div class="xt-input">
     <el-input
       :value="value"
       :placeholder="placeholder"
+      :style="inputStyle"
       @input="$emit('input', $event)"
     />
-  </template>
-  
-  <script>
-  export default {
-    name: 'XtInput',
-    props: {
-      value: [String, Number],
-      placeholder: {
-        type: String,
-        default: '请输入内容'
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'XtInput',
+  props: {
+    value: [String, Number],
+    placeholder: {
+      type: String,
+      default: '请输入内容'
+    },
+    color: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    inputStyle() {
+      if (this.color) {
+        return {
+          '--xt-input-focus-color': this.color
+        }
       }
+      return {}
     }
   }
-  </script>
+}
+</script>

package/src/components/input/style/index.scss

@@ -0,0 +1,27 @@
+@import '../../../styles/variables.scss';
+
+.xt-input .el-input__inner {
+  --xt-input-focus-color: var(--xt-color-primary, #409EFF);
+  
+  background-color: var(--xt-input-bg-color, #ffffff);
+  border-color: var(--xt-input-border-color, #DCDFE6);
+  color: var(--xt-input-text-color, #303133);
+  font-size: var(--xt-font-size-base, 14px);
+}
+
+.xt-input .el-input__inner::placeholder {
+  color: var(--xt-input-placeholder-color, #C0C4CC);
+}
+
+.xt-input .el-input__inner:focus {
+  border-color: var(--xt-input-focus-color);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--xt-input-focus-color) 20%, transparent);
+}
+
+.xt-input .el-input {
+  height: var(--xt-input-height, 32px);
+}
+
+.xt-input .el-input .el-input__wrapper {
+  padding: 0 var(--xt-input-padding-x, 15px);
+}