xt-element-ui 1.4.0 → 2.0.1

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

@@ -1,5 +1,35 @@
 <template>
+  <el-tooltip
+    v-if="showTooltip && ellipsis"
+    :content="displayTooltipContent"
+    :placement="tooltipPlacement"
+    :disabled="!isOverflow"
+    effect="dark"
+  >
+    <span 
+      ref="textRef"
+      class="xt-text" 
+      :class="[
+        type ? 'xt-text--' + type : '',
+        'xt-text--' + size,
+        { 'xt-text--bold': bold },
+        { 'xt-text--money': format === 'money' },
+        { 'xt-text--ellipsis': ellipsis },
+        { 'xt-text--ellipsis-multiline': ellipsis && ellipsisRows > 1 }
+      ]"
+      :style="customStyle"
+      @mouseenter="handleMouseEnter"
+    >
+      <slot name="prefix">{{ prefix }}</slot>
+      <slot>
+        <template v-if="formattedValue !== undefined">{{ formattedValue }}</template>
+      </slot>
+      <slot name="suffix">{{ suffix }}</slot> 
+    </span>
+  </el-tooltip>
   <span 
+    v-else
+    ref="textRef"
     class="xt-text" 
     :class="[
       type ? 'xt-text--' + type : '',
@@ -54,6 +84,19 @@ export default {
       default: 1,
       validator: (val) => val >= 1 && val <= 10
     },
+    showTooltip: {
+      type: Boolean,
+      default: true
+    },
+    tooltipPlacement: {
+      type: String,
+      default: 'top',
+      validator: (val) => ['top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-start', 'left-end', 'right-start', 'right-end'].includes(val)
+    },
+    tooltipContent: {
+      type: String,
+      default: ''
+    },
 
     // 格式化模式：normal 普通 | thousand 千分位 | money 金额
     format: {
@@ -98,6 +141,11 @@ export default {
       default: ''
     }
   },
+  data() {
+    return {
+      isOverflow: false
+    }
+  },
   computed: {
     // 兼容旧 money 属性：如果传了 money=true，自动切为金额模式
     realFormat() {
@@ -115,6 +163,19 @@ export default {
       return style
     },
 
+    displayTooltipContent() {
+      if (this.tooltipContent) {
+        return this.tooltipContent
+      }
+      if (this.formattedValue !== undefined) {
+        return this.formattedValue
+      }
+      if (this.$slots.default && this.$slots.default.length > 0) {
+        return this.extractSlotText(this.$slots.default)
+      }
+      return this.value
+    },
+
     formattedValue() {
       const fmt = this.realFormat
       const { value } = this
@@ -163,6 +224,75 @@ export default {
         return value
       }
     }
+  },
+  methods: {
+    handleMouseEnter() {
+      this.checkOverflow()
+    },
+    checkOverflow() {
+      const el = this.$refs.textRef
+      if (!el) {
+        this.isOverflow = false
+        return
+      }
+
+      if (this.ellipsisRows > 1) {
+        this.isOverflow = el.scrollHeight > el.clientHeight
+      } else {
+        this.isOverflow = el.scrollWidth > el.clientWidth
+      }
+    },
+    extractSlotText(nodes) {
+      let text = ''
+      nodes.forEach(node => {
+        if (typeof node.children === 'string') {
+          text += node.children
+        } else if (typeof node.text === 'string') {
+          text += node.text
+        } else if (node.children && Array.isArray(node.children)) {
+          text += this.extractSlotText(node.children)
+        }
+      })
+      return text.trim()
+    }
+  },
+  mounted() {
+    if (this.ellipsis && this.showTooltip) {
+      this.$nextTick(() => {
+        this.checkOverflow()
+      })
+    }
+    this._resizeObserver = new ResizeObserver(() => {
+      if (this.ellipsis && this.showTooltip) {
+        this.checkOverflow()
+      }
+    })
+    this.$nextTick(() => {
+      if (this.$refs.textRef) {
+        this._resizeObserver.observe(this.$refs.textRef)
+      }
+    })
+  },
+  beforeDestroy() {
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect()
+    }
+  },
+  watch: {
+    value() {
+      if (this.ellipsis && this.showTooltip) {
+        this.$nextTick(() => {
+          this.checkOverflow()
+        })
+      }
+    },
+    ellipsis(newVal) {
+      if (newVal && this.showTooltip) {
+        this.$nextTick(() => {
+          this.checkOverflow()
+        })
+      }
+    }
   }
 }
 </script>

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

@@ -33,14 +33,11 @@ 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 封装）
-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 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,
@@ -60,12 +57,10 @@ const components = [
   XtProgress,
   XtTabs,
   XtBadge,
-  ExDatePicker,
-  ExButton,
-  ExChart,
-  ExCard,
-  ExIcon,
-  ExTable
+  XtDatePicker,
+  XtChart,
+  XtIcon,
+  XtTable
 ]
 
 const install = function (Vue, options = {}) {
@@ -104,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 标签引入
@@ -139,18 +127,16 @@ export default {
   XtProgress,
   XtTabs,
   XtBadge,
-  ExDatePicker,
-  ExButton,
-  ExCard,
-  ExIcon,
-  ExTable
+  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轴单位 |

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

@@ -1,62 +0,0 @@
-## ExButton 按钮
-
-基于 ElementUI 按钮封装，支持防抖和字体大小配置。
-
-## 基础用法
-
-::: demo 按钮基础示例
-```vue
-<template>
-  <div>
-    <ex-button>默认按钮</ex-button>
-    <ex-button type="primary">主要按钮</ex-button>
-    <ex-button type="success">成功按钮</ex-button>
-  </div>
-</template>
-```
-:::
-
-## 字体大小
-
-支持三种尺寸：`small`、`medium`、`large`
-
-::: demo 按钮字体大小示例
-```vue
-<template>
-  <div>
-    <ex-button size="mini">迷你按钮</ex-button>
-    <ex-button size="small">小按钮</ex-button>
-    <ex-button size="medium">中按钮</ex-button>
-    <ex-button size="large">大按钮</ex-button>
-  </div>
-</template>
-```
-:::
-
-## 继承 ConfigProvider 配置
-
-当 ExButton 被包裹在 XtConfigProvider 中时，会自动继承字体大小配置：
-
-::: demo 按钮继承字体大小示例
-```vue
-<template>
-  <xt-config-provider size="large">
-    <ex-button>自动继承大字体</ex-button>
-  </xt-config-provider>
-</template>
-```
-:::
-
-## Attributes
-
-| 参数 | 说明 | 类型 | 可选值 | 默认值 |
-|------|------|------|--------|--------|
-| type | 按钮类型 | string | primary/success/warning/danger | — |
-| size | 按钮尺寸 | string | small/medium/large | — |
-| throttle | 点击节流时间 (ms) | number | — | 0 |
-
-## Events
-
-| 事件名 | 说明 | 回调参数 |
-|--------|------|----------|
-| click | 点击按钮时触发 | — |

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

@@ -1,86 +0,0 @@
-## ExCard 卡片
-
-基于 ElementUI 卡片封装，支持多种阴影模式和字体大小配置。
-
-## 基础用法
-
-::: demo 基础用法
-```vue
-<template>
-  <ex-card title="卡片标题">
-    <p>这是卡片内容</p>
-  </ex-card>
-</template>
-```
-:::
-
-## 阴影模式
-
-支持三种阴影模式：`always`、`hover`、`never`
-
-::: demo 阴影模式
-```vue
-<template>
-  <div>
-    <ex-card shadow="always">始终显示阴影</ex-card>
-    <ex-card shadow="hover">悬停时显示阴影</ex-card>
-    <ex-card shadow="never">不显示阴影</ex-card>
-  </div>
-</template>
-```
-:::
-
-## 字体大小
-
-支持三种尺寸：`small`、`medium`、`large`
-
-::: demo 字体大小
-```vue
-<template>
-  <div>
-    <ex-card size="small" title="小卡片">
-      <p>小尺寸卡片内容</p>
-    </ex-card>
-    <ex-card size="medium" title="中卡片">
-      <p>中等尺寸卡片内容</p>
-    </ex-card>
-    <ex-card size="large" title="大卡片">
-      <p>大尺寸卡片内容</p>
-    </ex-card>
-  </div>
-</template>
-```
-:::
-
-## 继承 ConfigProvider 配置
-
-当 ExCard 被包裹在 XtConfigProvider 中时，会自动继承字体大小配置。
-
-::: demo 继承配置
-```vue
-<template>
-  <xt-config-provider size="large">
-    <ex-card title="卡片标题">
-      <p>自动继承大字体配置</p>
-    </ex-card>
-  </xt-config-provider>
-</template>
-```
-:::
-
-## Attributes
-
-| 参数 | 说明 | 类型 | 可选值 | 默认值 |
-|------|------|------|--------|--------|
-| title | 卡片标题 | string | — | — |
-| shadow | 阴影显示模式 | string | always/hover/never | always |
-| bordered | 是否显示边框 | boolean | — | true |
-| size | 卡片尺寸 | string | small/medium/large | — |
-| body-class | 卡片 body 的类名 | string | — | — |
-
-## Slots
-
-| 名称 | 说明 |
-|------|------|
-| — | 卡片内容 |
-| header | 卡片头部内容（优先级高于 title 属性） |