xt-element-ui 1.3.4 → 1.4.0

package/src/components/xt-tabs/style/index.scss

@@ -0,0 +1,197 @@
+@import '../../../styles/variables.scss';
+
+.xt-tabs {
+  display: flex;
+  flex-direction: column;
+}
+
+.xt-tabs--left,
+.xt-tabs--right {
+  flex-direction: row;
+}
+
+.xt-tabs__header {
+  position: relative;
+  border-bottom: 1px solid $xt-color-border-light;
+  padding-bottom: 0;
+}
+
+.xt-tabs--card .xt-tabs__header {
+  border-bottom: none;
+  background: $xt-color-bg-secondary;
+  padding: 4px 4px 0;
+  border-radius: 4px 4px 0 0;
+}
+
+.xt-tabs--left .xt-tabs__header {
+  border-right: 1px solid $xt-color-border-light;
+  border-bottom: none;
+  padding-right: 0;
+}
+
+.xt-tabs--right .xt-tabs__header {
+  border-left: 1px solid $xt-color-border-light;
+  border-bottom: none;
+  padding-left: 0;
+}
+
+.xt-tabs__nav {
+  display: flex;
+}
+
+.xt-tabs--left .xt-tabs__nav,
+.xt-tabs--right .xt-tabs__nav {
+  flex-direction: column;
+}
+
+.xt-tabs__nav-item {
+  position: relative;
+  padding: 12px 20px;
+  font-size: 14px;
+  color: $xt-color-text-secondary;
+  cursor: pointer;
+  transition: color 0.3s ease;
+}
+
+.xt-tabs--card .xt-tabs__nav-item {
+  margin-bottom: -1px;
+  border-radius: 4px 4px 0 0;
+  background: transparent;
+  border: 1px solid transparent;
+}
+
+.xt-tabs--card .xt-tabs__nav-item--active {
+  background: $xt-color-bg-primary;
+  border-color: $xt-color-border-light;
+  border-bottom-color: $xt-color-bg-primary;
+}
+
+.xt-tabs__nav-item:hover {
+  color: $xt-color-primary;
+}
+
+.xt-tabs__nav-item--active {
+  color: $xt-color-primary;
+  font-weight: 500;
+}
+
+.xt-tabs__nav-link {
+  display: inline-block;
+}
+
+.xt-tabs__nav-indicator {
+  position: absolute;
+  bottom: 0;
+  height: 2px;
+  background: $xt-color-primary;
+  transition: left 0.3s ease, width 0.3s ease;
+}
+
+.xt-tabs--left .xt-tabs__nav-indicator {
+  bottom: auto;
+  left: auto;
+  right: 0;
+  width: 2px;
+  height: auto;
+  top: 0;
+}
+
+.xt-tabs--right .xt-tabs__nav-indicator {
+  bottom: auto;
+  right: auto;
+  left: 0;
+  width: 2px;
+  height: auto;
+  top: 0;
+}
+
+.xt-tabs--card .xt-tabs__nav-indicator {
+  display: none;
+}
+
+.xt-tabs__content {
+  flex: 1;
+  padding: 20px 0;
+}
+
+.xt-tabs--card .xt-tabs__content {
+  border: 1px solid $xt-color-border-light;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
+  padding: 20px;
+}
+
+.xt-tabs--left .xt-tabs__content,
+.xt-tabs--right .xt-tabs__content {
+  padding: 0 20px;
+}
+
+.xt-tabs__pane {
+  animation: xt-tabs-fade-in 0.3s ease;
+}
+
+@keyframes xt-tabs-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.xt-tabs-fade-enter-active,
+.xt-tabs-fade-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.xt-tabs-fade-enter {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.xt-tabs-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+[data-theme='dark'], html.dark {
+  .xt-tabs__header {
+    border-color: $xt-dark-color-border;
+  }
+  
+  .xt-tabs--card .xt-tabs__header {
+    background: $xt-dark-color-bg-secondary;
+  }
+  
+  .xt-tabs--card .xt-tabs__nav-item--active {
+    background: $xt-dark-color-bg-primary;
+    border-color: $xt-dark-color-border;
+    border-bottom-color: $xt-dark-color-bg-primary;
+  }
+  
+  .xt-tabs--left .xt-tabs__header {
+    border-color: $xt-dark-color-border;
+  }
+  
+  .xt-tabs--right .xt-tabs__header {
+    border-color: $xt-dark-color-border;
+  }
+  
+  .xt-tabs__nav-item {
+    color: $xt-dark-color-text-secondary;
+  }
+  
+  .xt-tabs__nav-item:hover {
+    color: $xt-dark-color-primary;
+  }
+  
+  .xt-tabs__nav-item--active {
+    color: $xt-dark-color-primary;
+  }
+  
+  .xt-tabs--card .xt-tabs__content {
+    border-color: $xt-dark-color-border;
+  }
+}

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

@@ -5,7 +5,9 @@
       type ? 'xt-text--' + type : '',
       'xt-text--' + size,
       { 'xt-text--bold': bold },
-      { 'xt-text--money': format === 'money' }
+      { 'xt-text--money': format === 'money' },
+      { 'xt-text--ellipsis': ellipsis },
+      { 'xt-text--ellipsis-multiline': ellipsis && ellipsisRows > 1 }
     ]"
     :style="customStyle"
   >
@@ -43,6 +45,15 @@ export default {
       type: [String, Number],
       default: ''
     },
+    ellipsis: {
+      type: Boolean,
+      default: false
+    },
+    ellipsisRows: {
+      type: Number,
+      default: 1,
+      validator: (val) => val >= 1 && val <= 10
+    },
 
     // 格式化模式：normal 普通 | thousand 千分位 | money 金额
     format: {
@@ -98,6 +109,9 @@ export default {
       if (this.letterSpacing) {
         style.letterSpacing = typeof this.letterSpacing === 'number' ? `${this.letterSpacing}px` : this.letterSpacing
       }
+      if (this.ellipsis && this.ellipsisRows > 1) {
+        style.WebkitLineClamp = this.ellipsisRows
+      }
       return style
     },
 

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

@@ -52,6 +52,24 @@
   font-weight: bold;
 }
 
+// 单行省略
+.xt-text--ellipsis {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+// 多行省略
+.xt-text--ellipsis-multiline {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
 // 金额样式
 .xt-text--money {
   font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;

package/src/index.js

@@ -30,6 +30,9 @@ import XtMap from './components/xt-map'
 import XtMapProvider from './components/xt-map-provider'
 import XtGridBox from './components/xt-grid-box'
 import XtGridItem from './components/xt-grid-item'
+import XtProgress from './components/xt-progress'
+import XtTabs from './components/xt-tabs'
+import XtBadge from './components/xt-badge'
 import ExDatePicker from './components/ex-date-picker'
 import ExButton from './components/ex-button'
 import ExChart from './components/ex-chart'  // ExChart 组件（基于 ECharts 封装）
@@ -54,6 +57,9 @@ const components = [
   XtMapProvider,
   XtGridBox,
   XtGridItem,
+  XtProgress,
+  XtTabs,
+  XtBadge,
   ExDatePicker,
   ExButton,
   ExChart,
@@ -115,9 +121,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 // 导出
 export default {
   install,
-  // 导出组件列表
   components,
-  // 按需导出组件
   XtButton,
   XtInput,
   XtFlexBox,
@@ -132,6 +136,9 @@ export default {
   XtMapProvider,
   XtGridBox,
   XtGridItem,
+  XtProgress,
+  XtTabs,
+  XtBadge,
   ExDatePicker,
   ExButton,
   ExCard,