xt-element-ui 1.0.9 → 1.1.0

package/src/components/button/style/index copy.scss

@@ -0,0 +1,221 @@
+@import '../../../styles/variables.scss';
+
+// 颜色（使用主题变量）
+$button-color-map: (
+  default: $xt-color-text-regular,
+  primary: $xt-color-primary,
+  success: $xt-color-success,
+  warning: $xt-color-warning,
+  danger: $xt-color-danger
+);
+
+$button-bg-color-map: (
+  default: transparent,
+  primary: $xt-color-primary,
+  success: $xt-color-success,
+  warning: $xt-color-warning,
+  danger: $xt-color-danger
+);
+
+$button-hover-bg-map: (
+  default: lighten($xt-color-primary, 10%),
+  primary: lighten($xt-color-primary, 10%),
+  success: lighten($xt-color-success, 10%),
+  warning: lighten($xt-color-warning, 10%),
+  danger: lighten($xt-color-danger, 10%)
+);
+
+$button-active-bg-map: (
+  default: darken($xt-color-primary, 10%),
+  primary: darken($xt-color-primary, 10%),
+  success: darken($xt-color-success, 10%),
+  warning: darken($xt-color-warning, 10%),
+  danger: darken($xt-color-danger, 10%)
+);
+
+// 尺寸
+$button-size-map: (
+  large: 40px,
+  medium: 36px,
+  small: 32px,
+  mini: 28px
+);
+
+$button-font-size-map: (
+  large: 14px,
+  medium: 14px,
+  small: 12px,
+  mini: 12px
+);
+
+// 圆角
+$button-radius: 4px;
+
+// 基础按钮
+.xt-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  cursor: pointer;
+  border: 1px solid $xt-color-border;
+  border-radius: $button-radius;
+  padding: 0 15px;
+  box-sizing: border-box;
+  outline: none;
+  transition: all 0.2s;
+
+  // 默认尺寸：medium
+  height: map-get($button-size-map, medium);
+  font-size: map-get($button-font-size-map, medium);
+
+  &:hover {
+    opacity: 0.9;
+  }
+
+  &:active {
+    opacity: 0.8;
+  }
+
+  // 禁用状态
+  &.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  // 圆角
+  &.is-round {
+    border-radius: 20px;
+    padding: 0 18px;
+  }
+}
+
+// ------------------------------
+// 循环生成所有类型按钮
+// ------------------------------
+@each $type, $color in $button-color-map {
+  $bg: map-get($button-bg-color-map, $type);
+  $hover-bg: map-get($button-hover-bg-map, $type);
+  $active-bg: map-get($button-active-bg-map, $type);
+
+  .xt-button--#{$type} {
+    @if $type == default {
+      color: $color;
+      border-color: $xt-color-border;
+    } @else {
+      color: #fff;
+      border-color: $bg;
+    }
+    background: $bg;
+
+    &:hover {
+      background: $hover-bg;
+      border-color: $hover-bg;
+    }
+
+    &:active {
+      background: $active-bg;
+      border-color: $active-bg;
+    }
+
+    // default 按钮 hover 特殊处理
+    @if $type == default {
+      &:hover {
+        color: $hover-bg;
+        background: #ffffff;
+        border-color: $hover-bg;
+      }
+       &:active {
+        background: #fff;
+        border-color: $active-bg;
+      }
+    }
+  }
+}
+
+// ------------------------------
+// 循环生成所有尺寸
+// ------------------------------
+@each $size, $height in $button-size-map {
+  $font: map-get($button-font-size-map, $size);
+
+  .xt-button--#{$size} {
+    height: $height;
+    font-size: $font;
+
+    @if $size == large {
+      padding: 0 20px;
+    }
+  }
+}
+
+// ------------------------------
+// Plain 模式
+// ------------------------------
+.xt-button--plain {
+  background-color: transparent;
+  border-color: inherit;
+}
+
+@each $type, $color in $button-color-map {
+  $bg: map-get($button-bg-color-map, $type);
+
+  .xt-button--#{$type}.xt-button--plain {
+    @if $type == default {
+      color: $xt-color-text-regular;
+      background: transparent;
+      border-color: $xt-color-border;
+      &:hover {
+        background: $xt-color-bg-hover;
+        border-color: $xt-color-border-light;
+      }
+    } @else {
+      color: $bg;
+      background: transparent;
+      border-color: $bg;
+      &:hover {
+        background: rgba($bg, 0.1);
+        color: $bg;
+        border-color: $bg;
+      }
+    }
+  }
+}
+
+// ------------------------------
+// 暗色主题
+// ------------------------------
+html.dark .xt-button {
+  border-color: $xt-dark-color-border;
+  background: $xt-dark-color-bg-primary;
+  color: $xt-dark-color-text-primary;
+}
+
+html.dark .xt-button:hover {
+  background: $xt-dark-color-bg-secondary;
+}
+
+html.dark .xt-button--primary {
+  background: $xt-color-primary;
+  border-color: $xt-color-primary;
+}
+
+html.dark .xt-button--success {
+  background: $xt-dark-color-success;
+  border-color: $xt-dark-color-success;
+}
+
+html.dark .xt-button--warning {
+  background: $xt-dark-color-warning;
+  border-color: $xt-dark-color-warning;
+}
+
+html.dark .xt-button--danger {
+  background: $xt-dark-color-danger;
+  border-color: $xt-dark-color-danger;
+}
+
+html.dark .xt-button--info {
+  background: $xt-dark-color-info;
+  border-color: $xt-dark-color-info;
+}

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

@@ -1,9 +1,9 @@
 @import '../../../styles/variables.scss';
 
 .xt-button {
-  --xt-button-bg-color: var(--xt-color-primary, #409EFF);
-  --xt-button-border-color: var(--xt-color-primary, #409EFF);
-  --xt-button-text-color: #fff;
+  --xt-button-bg-color: transparent;
+  --xt-button-border-color: var(--xt-color-border, #DCDFE6);
+  --xt-button-text-color: var(--xt-color-text-regular, #606266);
   
   display: inline-flex;
   justify-content: center;
@@ -27,29 +27,44 @@
   border-radius: var(--xt-border-radius-base, 4px);
   padding: var(--xt-button-padding-y, 8px) var(--xt-button-padding-x, 15px);
   font-size: var(--xt-font-size-base, 14px);
+  
+  &:hover {
+    --xt-button-bg-color: var(--xt-color-bg-hover, #f5f5f5);
+  }
+  
+  &:active {
+    --xt-button-bg-color: var(--xt-color-bg-secondary, #f5f7fa);
+  }
+  
+  &:disabled {
+    --xt-button-bg-color: transparent;
+    --xt-button-border-color: var(--xt-color-border-light, #E4E7ED);
+    --xt-button-text-color: var(--xt-color-text-disabled, #C0C4CC);
+    cursor: not-allowed;
+  }
 }
 
 .xt-button--primary {
-  --xt-button-bg-color: var(--xt-color-primary, #409EFF);
-  --xt-button-border-color: var(--xt-color-primary, #409EFF);
+  --xt-button-bg-color: var(--xt-color-primary, #1890ff);
+  --xt-button-border-color: var(--xt-color-primary, #1890ff);
   --xt-button-text-color: #fff;
 }
 
 .xt-button--success {
-  --xt-button-bg-color: var(--xt-color-success, #67C23A);
-  --xt-button-border-color: var(--xt-color-success, #67C23A);
+  --xt-button-bg-color: var(--xt-color-success, #37c3a4);
+  --xt-button-border-color: var(--xt-color-success, #37c3a4);
   --xt-button-text-color: #fff;
 }
 
 .xt-button--warning {
-  --xt-button-bg-color: var(--xt-color-warning, #E6A23C);
-  --xt-button-border-color: var(--xt-color-warning, #E6A23C);
+  --xt-button-bg-color: var(--xt-color-warning, #FFB74D);
+  --xt-button-border-color: var(--xt-color-warning, #FFB74D);
   --xt-button-text-color: #fff;
 }
 
 .xt-button--danger {
-  --xt-button-bg-color: var(--xt-color-danger, #F56C6C);
-  --xt-button-border-color: var(--xt-color-danger, #F56C6C);
+  --xt-button-bg-color: var(--xt-color-danger, #EA1D34);
+  --xt-button-border-color: var(--xt-color-danger, #EA1D34);
   --xt-button-text-color: #fff;
 }
 
@@ -85,23 +100,23 @@ html.dark .xt-button--info {
 .xt-button--danger[plain],
 .xt-button--info[plain] {
   --xt-button-bg-color: var(--xt-color-bg-primary, #fff);
-  --xt-button-text-color: var(--xt-color-primary, #409EFF);
+  --xt-button-text-color: var(--xt-color-primary, #1890ff);
 }
 
 .xt-button--success[plain] {
-  --xt-button-text-color: var(--xt-color-success, #67C23A);
+  --xt-button-text-color: var(--xt-color-success, #37c3a4);
 }
 
 .xt-button--warning[plain] {
-  --xt-button-text-color: var(--xt-color-warning, #E6A23C);
+  --xt-button-text-color: var(--xt-color-warning, #FFB74D);
 }
 
 .xt-button--danger[plain] {
-  --xt-button-text-color: var(--xt-color-danger, #F56C6C);
+  --xt-button-text-color: var(--xt-color-danger, #EA1D34);
 }
 
 .xt-button--info[plain] {
-  --xt-button-text-color: var(--xt-color-info, #909399);
+  --xt-button-text-color: var(--xt-color-info, #999999);
 }
 
 html.dark .xt-button--success[plain] {
@@ -118,13 +133,4 @@ html.dark .xt-button--danger[plain] {
 
 html.dark .xt-button--info[plain] {
   --xt-button-text-color: var(--xt-dark-color-info, #3f4249);
-}
-
-.xt-button:hover {
-  opacity: 0.8;
-}
-
-.xt-button:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
 }

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

@@ -27,7 +27,7 @@
 .xt-card .card__body .value {
   font-size: var(--xt-font-size-large, 18px);
   font-weight: 600;
-  color: var(--xt-color-primary, #409EFF);
+  color: var(--xt-color-primary, #1890ff);
 }
 
 .xt-card .card__body .unit {

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

@@ -1,7 +1,7 @@
 @import '../../../styles/variables.scss';
 
 .xt-card-item {
-  --xt-card-item-color: var(--xt-color-primary, #409EFF);
+  --xt-card-item-color: var(--xt-color-primary, #1890ff);
   
   min-height: var(--xt-card-item-min-height, 40px);
 }

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

@@ -17,7 +17,7 @@ export default {
   props: {
     theme: {
       type: String,
-      default: 'light'
+      default: 'white'
     },
     size: {
       type: String,
@@ -80,6 +80,23 @@ export default {
         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']
         }

package/src/components/index.scss

@@ -16,4 +16,7 @@
 @import './flex-box/style/index.scss';
 
 // ConfigProvider 组件样式
-@import './config-provider/style/index.scss';
+@import './config-provider/style/index.scss';
+
+// Text 组件样式
+@import './text/style/index.scss';

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

@@ -1,7 +1,7 @@
 @import '../../../styles/variables.scss';
 
 .xt-input .el-input__inner {
-  --xt-input-focus-color: var(--xt-color-primary, #409EFF);
+  --xt-input-focus-color: var(--xt-color-primary, #1890ff);
   
   background-color: var(--xt-input-bg-color, #ffffff);
   border-color: var(--xt-input-border-color, #DCDFE6);

package/src/components/text/index.js

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

package/src/components/text/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <span 
+    class="xt-text" 
+    :class="[
+      type ? 'xt-text--' + type : '',
+      { 'xt-text--bold': bold }
+    ]"
+    :style="customStyle"
+  >
+    <slot></slot>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'XtText',
+  props: {
+    type: {
+      type: String,
+      default: '',
+      validator: (val) => ['', 'primary', 'success', 'warning', 'danger'].includes(val)
+    },
+    bold: {
+      type: Boolean,
+      default: false
+    },
+    letterSpacing: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  computed: {
+    customStyle() {
+      const style = {}
+      if (this.letterSpacing) {
+        style.letterSpacing = typeof this.letterSpacing === 'number' ? `${this.letterSpacing}px` : this.letterSpacing
+      }
+      return style
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,45 @@
+@import '../../../styles/variables.scss';
+
+// 文字组件
+.xt-text {
+  letter-spacing: $xt-spacing-xs;
+}
+
+// 不同类型文字颜色
+.xt-text--primary {
+  color: $xt-color-primary;
+}
+
+.xt-text--success {
+  color: $xt-color-success;
+}
+
+.xt-text--warning {
+  color: $xt-color-warning;
+}
+
+.xt-text--danger {
+  color: $xt-color-danger;
+}
+
+// 粗体
+.xt-text--bold {
+  font-weight: bold;
+}
+
+// 暗色主题
+html.dark .xt-text--primary {
+  color: $xt-color-primary;
+}
+
+html.dark .xt-text--success {
+  color: $xt-dark-color-success;
+}
+
+html.dark .xt-text--warning {
+  color: $xt-dark-color-warning;
+}
+
+html.dark .xt-text--danger {
+  color: $xt-dark-color-danger;
+}

package/src/index.js

@@ -1,11 +1,11 @@
 // 导入主题样式（定义 CSS 变量）
-import './styles/vars.scss'
+import './styles/css-variables.scss'
 
 // 导入组件样式（统一入口）
 import './components/index.scss'
 
 // 导入 SCSS 变量（通过 CSS Modules :export 导出）
-import variables from './styles/export.scss'
+import variables from './styles/variables-export.scss'
 
 import utilsModule from './utils/index'
 
@@ -22,6 +22,7 @@ import FlexBox from './components/flex-box'
 import Card from './components/card'
 import CardItem from './components/card-item'
 import ConfigProvider from './components/config-provider'
+import Text from './components/text'
 
 // 存储组件列表
 const components = [
@@ -30,7 +31,8 @@ const components = [
   FlexBox,
   Card,
   CardItem,
-  ConfigProvider
+  ConfigProvider,
+  Text
 ]
 
 
@@ -93,7 +95,8 @@ export default {
   FlexBox,
   Card,
   CardItem,
-  ConfigProvider
+  ConfigProvider,
+  Text
 }
 
 // 导出工具函数和变量

package/src/styles/{vars.scss → css-variables.scss}

@@ -99,7 +99,7 @@
 }
 
 // 暗色主题
-html.dark, html[data-theme="dark"] {
+html[data-theme="dark"] {
   --xt-color-primary: var(--xt-color-primary);
   --xt-color-success: #{$xt-dark-color-success};
   --xt-color-warning: #{$xt-dark-color-warning};

package/src/styles/theme/colors.scss

@@ -0,0 +1,11 @@
+$xt-color-primary: #1890ff;       // 主颜色 - XT UI 标准蓝色
+$xt-color-success: #37c3a4;       // 成功色 - XT UI 标准绿色
+$xt-color-warning: #FFB74D;       // 警告色 - XT UI 标准橙色
+$xt-color-danger: #EA1D34;        // 危险色 - XT UI 标准红色
+$xt-color-info: #999999;          // 信息色 - XT UI 标准灰色
+
+$xt-color-primary-light-3: #5DB1FF;   // 主色浅色 30%
+$xt-color-primary-light-5: #8CC8FF;   // 主色浅色 50%
+$xt-color-primary-light-7: #BADEFF;   // 主色浅色 70%
+$xt-color-primary-light-8: #D1E9FF;   // 主色浅色 80%
+$xt-color-primary-light-9: #E8F4FF;   // 主色浅色 90%

package/src/styles/theme/{component.scss → component-variables.scss}

@@ -45,10 +45,10 @@ $xt-flex-box-gap: 8px;                      // FlexBox 默认间距
 // ===========================
 $xt-header-bg: #ffffff;                      // 头部背景色
 $xt-header-text-color: #303133;              // 头部文字颜色
-$xt-header-active-text: #409EFF;             // 头部激活状态文字颜色
-$xt-header-hover-text: #409EFF;              // 头部悬停状态文字颜色
+$xt-header-active-text: #1890ff;             // 头部激活状态文字颜色
+$xt-header-hover-text: #1890ff;              // 头部悬停状态文字颜色
 
-$xt-hamburger-bg: #409EFF;                   // 汉堡按钮背景色
+$xt-hamburger-bg: #1890ff;                   // 汉堡按钮背景色
 
 $xt-menu-bg: #304156;                        // 菜单背景色
 $xt-menu-hover: #263445;                     // 菜单悬停背景色

package/src/styles/theme/index.scss

@@ -1,11 +1,11 @@
-@import './color.scss';
-@import './text.scss';
-@import './bg.scss';
-@import './border.scss';
+@import './colors.scss';
+@import './typography.scss';
+@import './background.scss';
+@import './borders.scss';
 @import './font.scss';
 @import './spacing.scss';
-@import './radius.scss';
-@import './shadow.scss';
-@import './transition.scss';
-@import './dark.scss';
-@import './component.scss';
+@import './border-radius.scss';
+@import './shadows.scss';
+@import './transitions.scss';
+@import './dark-variables.scss';
+@import './component-variables.scss';

package/src/utils/index.js

@@ -1,8 +1,8 @@
 // 默认配置
 const defaultConfig = {
-    theme: 'light',
+    theme: 'white',
     size: 'medium',
-    primaryColor: '#409EFF'
+    primaryColor: '#1890ff'
 }
 
 // 当前配置
@@ -46,7 +46,7 @@ export const setConfig = function(config) {
 
 // 设置主题
 export const setTheme = function(theme) {
-    const validThemes = ['light', 'dark']
+    const validThemes = ['white', 'dark']
     if (!validThemes.includes(theme)) {
       console.warn(`[XtElementUI] 无效的主题值: ${theme}，可选值: ${validThemes.join(', ')}`)
       return
@@ -57,10 +57,8 @@ export const setTheme = function(theme) {
     
     // 使用类名方式切换主题（兼容 Element Plus 风格）
     if (theme === 'dark') {
-      root.classList.add('dark')
       root.setAttribute('data-theme', 'dark')
     } else {
-      root.classList.remove('dark')
       root.removeAttribute('data-theme')
     }
     

package/src/styles/theme/color.scss

@@ -1,11 +0,0 @@
-$xt-color-primary: #409EFF;       // 主颜色 - Element UI 标准蓝色
-$xt-color-success: #67C23A;       // 成功色 - Element UI 标准绿色
-$xt-color-warning: #E6A23C;       // 警告色 - Element UI 标准橙色
-$xt-color-danger: #F56C6C;        // 危险色 - Element UI 标准红色
-$xt-color-info: #909399;          // 信息色 - Element UI 标准灰色
-
-$xt-color-primary-light-3: #79BBFF;   // 主色浅色 30%
-$xt-color-primary-light-5: #A0CFFF;   // 主色浅色 50%
-$xt-color-primary-light-7: #C6E2FF;   // 主色浅色 70%
-$xt-color-primary-light-8: #D9ECFF;   // 主色浅色 80%
-$xt-color-primary-light-9: #ECF5FF;   // 主色浅色 90%