xt-element-ui 1.3.4 → 2.0.0

package/src/components/{ex-table/ExTableCell.vue → xt-table/XtTableCell.vue}

@@ -1,6 +1,6 @@
 <script>
 export default {
-  name: 'ExTableCell',
+  name: 'XtTableCell',
   functional: true,
   props: {
     row: Object,

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

@@ -0,0 +1,8 @@
+import XtTable from './index.vue'
+
+XtTable.install = function (Vue) {
+  Vue.component(XtTable.name, XtTable)
+}
+
+export default XtTable
+export { XtTable }

package/src/components/{ex-table → xt-table}/index.vue

@@ -53,7 +53,7 @@
               <el-table-column :key="child._key" v-bind="getColumnProps(child)">
                 <template v-if="child.render" v-slot="scope">{{ child.render(scope) }}</template>
                 <template v-else-if="child.formatter" v-slot="scope">
-                  <ExTableCell
+                  <XtTableCell
                     :row="scope.row"
                     :index="scope.$index"
                     :formatter="child.formatter"
@@ -74,7 +74,7 @@
           <el-table-column v-else :key="col._key" v-bind="getColumnProps(col)">
             <template v-if="col.render" v-slot="scope">{{ col.render(scope) }}</template>
             <template v-else-if="col.formatter" v-slot="scope">
-              <ExTableCell
+              <XtTableCell
                 :row="scope.row"
                 :index="scope.$index"
                 :formatter="col.formatter"
@@ -97,7 +97,7 @@
     <!-- 分页 -->
     <div class="ex-table-footer" v-if="showPagination">
       <el-pagination
-        :current-page="pagination.ppageNum"
+        :current-page="pagination.pageNum"
         :page-size="pagination.pageSize"
         :total="total"
         :page-sizes="pagination.pageSizes || [10, 20, 50, 100]"
@@ -110,13 +110,13 @@
 </template>
 
 <script>
-import ExTableCell from './ExTableCell.vue'
+import XtTableCell from './XtTableCell.vue'
 import VirtualElTable from './VirtualElTable.vue'
 
 export default {
-  name: 'ExTable',
+  name: 'XtTable',
   inheritAttrs: false,
-  components: { ExTableCell, VirtualElTable },
+  components: { XtTableCell, VirtualElTable },
 
   props: {
     tableData: { type: Array, default: () => [] },

package/src/components/xt-tabs/TabPane.vue

@@ -0,0 +1,36 @@
+<template>
+  <div v-show="isActive" class="xt-tab-pane">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'XtTabPane',
+  props: {
+    name: {
+      type: [String, Number],
+      required: true
+    },
+    label: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    isActive() {
+      return this.$parent && this.$parent.activeName === this.name
+    }
+  },
+  mounted() {
+    if (this.$parent && typeof this.$parent.addPane === 'function') {
+      this.$parent.addPane({ name: this.name, label: this.label })
+    }
+  },
+  beforeDestroy() {
+    if (this.$parent && typeof this.$parent.removePane === 'function') {
+      this.$parent.removePane(this.name)
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,10 @@
+import XtTabs from './index.vue'
+import XtTabPane from './TabPane.vue'
+
+XtTabs.install = function(Vue) {
+  Vue.component(XtTabs.name, XtTabs)
+  Vue.component(XtTabPane.name, XtTabPane)
+}
+
+export default XtTabs
+export { XtTabPane }

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

@@ -0,0 +1,113 @@
+<template>
+  <div class="xt-tabs" :class="[
+    `xt-tabs--${position}`,
+    { 'xt-tabs--card': type === 'card' }
+  ]">
+    <div class="xt-tabs__header">
+      <div class="xt-tabs__nav">
+        <div
+          v-for="(pane, index) in panes"
+          :key="pane.name"
+          class="xt-tabs__nav-item"
+          :class="{ 'xt-tabs__nav-item--active': activeName === pane.name }"
+          @click="handleTabClick(pane.name)"
+        >
+          <span class="xt-tabs__nav-link">{{ pane.label }}</span>
+        </div>
+      </div>
+      <div class="xt-tabs__nav-indicator" :style="indicatorStyle"></div>
+    </div>
+    
+    <div class="xt-tabs__content">
+      <transition name="xt-tabs-fade" mode="out-in">
+        <div
+          v-for="(pane, index) in panes"
+          :key="pane.name"
+          class="xt-tabs__pane"
+          v-show="activeName === pane.name"
+        >
+          <slot :name="pane.name"></slot>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'XtTabs',
+  props: {
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'default',
+      validator: (val) => ['default', 'card'].includes(val)
+    },
+    position: {
+      type: String,
+      default: 'top',
+      validator: (val) => ['top', 'bottom', 'left', 'right'].includes(val)
+    }
+  },
+  data() {
+    return {
+      panes: [],
+      activeName: this.value
+    }
+  },
+  watch: {
+    value(val) {
+      this.activeName = val
+    },
+    activeName(val) {
+      this.$emit('input', val)
+      this.$emit('change', val)
+    }
+  },
+  computed: {
+    indicatorStyle() {
+      const activeIndex = this.panes.findIndex(p => p.name === this.activeName)
+      if (activeIndex === -1) return { display: 'none' }
+      
+      const navItems = this.$el && this.$el.querySelectorAll('.xt-tabs__nav-item')
+      if (!navItems || navItems.length === 0) return { display: 'none' }
+      
+      const activeItem = navItems[activeIndex]
+      return {
+        left: `${activeItem.offsetLeft}px`,
+        width: `${activeItem.offsetWidth}px`,
+        display: 'block'
+      }
+    }
+  },
+  methods: {
+    handleTabClick(name) {
+      this.activeName = name
+    },
+    addPane(pane) {
+      if (!this.panes.find(p => p.name === pane.name)) {
+        this.panes.push(pane)
+        if (!this.activeName && this.panes.length === 1) {
+          this.activeName = pane.name
+        }
+      }
+    },
+    removePane(name) {
+      const index = this.panes.findIndex(p => p.name === name)
+      if (index > -1) {
+        this.panes.splice(index, 1)
+      }
+    }
+  },
+  mounted() {
+    this.$children.forEach(child => {
+      if (child.$options.name === 'XtTabPane') {
+        this.addPane({ name: child.name, label: child.label })
+      }
+    })
+  }
+}
+</script>

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/components/xt-upload/index.js

@@ -0,0 +1,8 @@
+import XtUpload from './index.vue'
+
+XtUpload.install = function (Vue) {
+  Vue.component(XtUpload.name, XtUpload)
+}
+
+export default XtUpload
+export { XtUpload }

package/src/index.js

@@ -30,14 +30,14 @@ 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 ExDatePicker from './components/ex-date-picker'
-import ExButton from './components/ex-button'
-import ExChart from './components/ex-chart'  // ExChart 组件（基于 ECharts 封装）
-import ExCard from './components/ex-card'
-import ExIcon from './components/ex-icon'    // ExIcon 组件（支持 el-icon / svg / 自定义字体）
-import ExTable from './components/ex-table'  // ExTable 组件（基于 ElementUI Table 封装）
+import XtProgress from './components/xt-progress'
+import XtTabs from './components/xt-tabs'
+import XtBadge from './components/xt-badge'
+import XtDatePicker from './components/xt-date-picker'
+import XtChart from './components/xt-chart'  // XtChart 组件（基于 ECharts 封装）
+import XtIcon from './components/xt-icon'    // XtIcon 组件（支持 el-icon / svg / 自定义字体）
+import XtTable from './components/xt-table'  // XtTable 组件（基于 ElementUI Table 封装）
 
-import { registerElementExComponents, registerElementDirectives } from './config/element-registry'
 
 const components = [
   XtButton,
@@ -54,12 +54,13 @@ const components = [
   XtMapProvider,
   XtGridBox,
   XtGridItem,
-  ExDatePicker,
-  ExButton,
-  ExChart,
-  ExCard,
-  ExIcon,
-  ExTable
+  XtProgress,
+  XtTabs,
+  XtBadge,
+  XtDatePicker,
+  XtChart,
+  XtIcon,
+  XtTable
 ]
 
 const install = function (Vue, options = {}) {
@@ -98,13 +99,6 @@ const install = function (Vue, options = {}) {
     }
   }
 
-  try {
-    const ElementUI = require('element-ui')
-    registerElementExComponents(Vue, ElementUI)
-    registerElementDirectives(Vue, ElementUI)
-  } catch (e) {
-    console.warn('[XtElementUI] ElementUI 未安装，Ex 系列组件可能无法正常使用')
-  }
 }
 
 // 支持全局 script 标签引入
@@ -115,9 +109,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 // 导出
 export default {
   install,
-  // 导出组件列表
   components,
-  // 按需导出组件
   XtButton,
   XtInput,
   XtFlexBox,
@@ -132,18 +124,19 @@ export default {
   XtMapProvider,
   XtGridBox,
   XtGridItem,
-  ExDatePicker,
-  ExButton,
-  ExCard,
-  ExIcon,
-  ExTable
+  XtProgress,
+  XtTabs,
+  XtBadge,
+  XtDatePicker,
+  XtIcon,
+  XtTable
 }
 
-// ExChart 组件按需导出（使用时需自行安装 echarts 依赖）
-export { default as ExChart } from './components/ex-chart'
+// XtChart 组件按需导出（使用时需自行安装 echarts 依赖）
+export { default as XtChart } from './components/xt-chart'
 
-// ExTable 虚拟滚动演示数据工具
-export { createVirtualScrollData, virtualScrollColumns } from './components/ex-table/virtualScrollData'
+// XtTable 虚拟滚动演示数据工具
+export { createVirtualScrollData, virtualScrollColumns } from './components/xt-table/virtualScrollData'
 
 // 导出工具函数和变量
 export {

package/src/utils/index.js

@@ -1,4 +1,4 @@
-import EchartsUtil from '../components/ex-chart/utils'
+import EchartsUtil from '../components/xt-chart/utils'
 
 const defaultConfig = {
     theme: 'white',

package/docs/components/extend/ex-bar.md

@@ -1,68 +0,0 @@
-## ExBar - 柱状图组件
-
-基于 ECharts 封装的柱状图组件。
-
-## 基本用法
-
-::: demo 柱状图基础示例
-```vue
-<template>
-  <ExChart type="bar" :chartData="chartData" style="height: 400px;" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        { name: '张三', value: 65 },
-        { name: '李四', value: 78 },
-        { name: '王五', value: 89 },
-        { name: '赵六', value: 95 },
-        { name: '钱七', value: 72 }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-## 显示标记点
-
-::: demo 显示最大值和最小值标记点
-```vue
-<template>
-  <ExChart type="bar" :chartData="chartData" :markPoint="true" style="height: 400px;" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        { name: '华东区', value: 1250 },
-        { name: '华南区', value: 980 },
-        { name: '华北区', value: 890 },
-        { name: '西南区', value: 720 },
-        { name: '西北区', value: 560 }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-## 属性说明
-
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| `chartData` | Array | [] | 图表数据 |
-| `theme` | String | '' | 主题名称 |
-| `size` | String | 'medium' | 尺寸 |
-| `markPoint` | Boolean | false | 是否显示标记点 |
-| `showZoom` | Boolean | false | 是否显示缩放功能 |
-| `reverse` | Boolean | false | 是否反转坐标轴 |
-| `longLable` | Boolean | false | 是否启用长标签模式 |
-| `energyType` | String | '' | Y轴单位 |