xt-element-ui 1.4.0 → 2.0.0

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

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

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

@@ -1,28 +1,68 @@
 <template>
-  <div class="xt-card" :class="{'no-padding': noPadding }">
-    <div class="card__header" v-if="title">
-      <slot name="icon">{{ icon }}</slot>
-      <slot name="title">{{ title }}</slot>
-    </div>
-    <div class="card__body">
-      <slot>
-        <span class="value"><slot name="value">{{ value }}</slot></span>
-        <span class="unit">{{ unit }}</span>
-      </slot>
-    </div>
-  </div>
+  <el-card 
+    class="ex-card" 
+    :class="cardClasses"
+    v-bind="$attrs"
+  >
+    <template #header v-if="$slots.header || title">
+      <slot name="header">{{ title }}</slot>
+    </template>
+    <slot></slot>
+  </el-card>
 </template>
+
 <script>
 export default {
-  name: "XtCard",
+  name: 'XtCard',
+  inheritAttrs: false,
+  inject: {
+    xtConfig: {
+      default: () => ({
+        theme: 'light',
+        size: 'medium',
+        primaryColor: '#1890ff'
+      })
+    }
+  },
   props: {
-    type: {},
-    title: {},
-    value: {},
-    unit: {},
-    icon: {},
-    iconIn: { default: "right" },
-    noPadding: { type: Boolean, default: false }
+    title: {
+      type: String,
+      default: ''
+    },
+    shadow: {
+      type: String,
+      default: 'always',
+      validator: (val) => ['always', 'hover', 'never'].includes(val)
+    },
+    bordered: {
+      type: Boolean,
+      default: true
+    },
+    bodyClass: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String,
+      default: null,
+      validator: (val) => !val || ['small', 'medium', 'large'].includes(val)
+    }
+  },
+  computed: {
+    finalSize() {
+      // 优先使用组件自身的 size，其次继承 XtConfigProvider 的 size，最后使用默认值
+      return this.size || this.xtConfig.size || 'medium'
+    },
+    cardClasses() {
+      return [
+        `ex-card-${this.shadow}`,
+        `ex-card-${this.finalSize}`,
+        {
+          'ex-card-no-border': !this.bordered,
+          [this.bodyClass]: this.bodyClass
+        }
+      ]
+    }
   }
 }
-</script>
+</script>

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

@@ -1,49 +1,73 @@
+// XtCard 组件样式
+@import '../../../styles/element-theme.scss';
 @import '../../../styles/variables.scss';
 
-.xt-card {
-  --xt-card-bg-color: var(--xt-card-bg-color, #ffffff);
-  --xt-card-border-color: var(--xt-card-border-color, #EBEEF5);
-  --xt-card-text-color: var(--xt-color-text-primary, #303133);
+.ex-card {
+  border-radius: 8px;
+  transition: all 0.3s;
+  font-size: var(--ex-card-font-size, 14px);
+  background-color: var(--el-bg-color-block, #ffffff);
+  color: var(--el-text-color-primary, #303133);
+  border-color: var(--el-border-color, #303133);
   
-  border-radius: var(--xt-card-border-radius, 4px);
-  box-shadow: var(--xt-card-shadow, 0 2px 12px 0 rgba(0, 0, 0, 0.1));
-  background-color: var(--xt-card-bg-color);
-  overflow: hidden;
-  color: var(--xt-card-text-color);
-  transition: var(--xt-transition-duration, 0.3s);
+  .el-card__header {
+    padding: var(--ex-card-header-padding, 16px 20px);
+    border-bottom: 1px solid var(--el-border-color, #ebeef5);
+    background-color: var(--el-bg-color-block-head, #ffffff);
+    font-weight: 600;
+  }
+  
+  .el-card__body {
+    padding: var(--ex-card-body-padding, 20px);
+  }
+}
+
+.ex-card-small {
+  font-size: 12px;
+  
+  .el-card__header {
+    font-size: 12px;
+  }
 }
 
-.xt-card .card__header {
-  padding: var(--xt-card-header-padding, 18px 20px);
-  box-sizing: border-box;
-  font-weight: 600;
-  font-size: var(--xt-font-size-medium, 16px);
+.ex-card-medium {
+  font-size: 14px;
+  
+  .el-card__header {
+    font-size: 14px;
+  }
 }
 
-.xt-card .card__body {
-  padding: var(--xt-card-padding, 20px);
+.ex-card-large {
+  font-size: 16px;
+  
+  .el-card__header {
+    font-size: 16px;
+  }
 }
 
-.xt-card .card__body .value {
-  font-size: var(--xt-font-size-large, 18px);
-  font-weight: 600;
-  color: var(--xt-color-primary, #1890ff);
+.ex-card-always {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 
-.xt-card .card__body .unit {
-  font-size: var(--xt-font-size-base, 14px);
-  color: var(--xt-color-text-secondary, #909399);
-  margin-left: 4px;
+.ex-card-hover {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  
+  &:hover {
+    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
+  }
 }
 
-.xt-card .value {
-  font-weight: 600;
+.ex-card-never {
+  box-shadow: none;
+  border: 1px solid var(--el-border-color, #ebeef5);
 }
 
-.xt-card .card__header + .card__body {
-  padding-top: 0;
+.ex-card-no-border {
+  border: none;
+  
+  .el-card__header {
+    border-bottom: none;
+  }
 }
 
-.xt-card.noPadding .card__body {
-  padding: 0;
-}

package/src/components/xt-card-item/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <ex-card class="xt-card-item" :bordered="false" :class="{ [`is-${type}`]: type ? true : false}">
+    <xt-card class="xt-card-item" :bordered="false" :class="{ [`is-${type}`]: type ? true : false}">
         <xt-flex-box content="between">
           <div >
             <div><xt-text bold size="extra-large">{{ title }}</xt-text></div>
@@ -11,11 +11,11 @@
           </div>
           <div style="height: 100%;">
             <slot name="icon">
-              <xt-text size="extra-large" :type="type"><ex-icon name="el-icon-user" :size="48" ></ex-icon></xt-text>
+              <xt-text size="extra-large" :type="type"><xt-icon name="el-icon-user" :size="48" ></xt-icon></xt-text>
             </slot>
           </div>
         </xt-flex-box>
-      </ex-card>
+      </xt-card>
 </template>
 <script>
 export default {

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

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

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

@@ -1,22 +1,22 @@
 <template>
-  <ex-bar v-if="type=='bar'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-bar>
-  <ex-line v-else-if="type=='line'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-line>
-  <ex-pie v-else-if="type=='pie'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-pie>
-  <ex-multi v-else-if="type=='multi'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-multi>
+  <xt-bar v-if="type=='bar'" v-bind="$attrs" :theme="myTheme" :size="mySize"></xt-bar>
+  <xt-line v-else-if="type=='line'" v-bind="$attrs" :theme="myTheme" :size="mySize"></xt-line>
+  <xt-pie v-else-if="type=='pie'" v-bind="$attrs" :theme="myTheme" :size="mySize"></xt-pie>
+  <xt-multi v-else-if="type=='multi'" v-bind="$attrs" :theme="myTheme" :size="mySize"></xt-multi>
 </template>
 <script>
-import ExBar from "./ExBar.vue"
-import ExLine from "./ExLine.vue"
-import ExPie from "./ExPie.vue"
-import ExMulti from "./ExMulti.vue"
+import XtBar from "./XtBar.vue"
+import XtLine from "./XtLine.vue"
+import XtPie from "./XtPie.vue"
+import XtMulti from "./XtMulti.vue"
 
 export default {
-  name: "ExChart",
+  name: "XtChart",
   components: {
-    ExBar,
-    ExLine,
-    ExPie,
-    ExMulti
+    XtBar,
+    XtLine,
+    XtPie,
+    XtMulti
   },
   props: {
     theme: {

package/src/components/{ex-chart → xt-chart}/pieList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="pieLBox">
     <div class="left">
-      <ExPie class="chart-box" :chart-data="chartData" :showLegend="false" :showLabel="false" :colors="colors"></ExPie>
+      <XtPie class="chart-box" :chart-data="chartData" :showLegend="false" :showLabel="false" :colors="colors"></XtPie>
     </div>
     <div class="right">
       <div v-for="(item, index) in chartData" :key="index" class="box">

package/src/components/{ex-chart → xt-chart}/utils.js

@@ -19,7 +19,7 @@ function getEcharts() {
         echarts.registerTheme(key, themeKeys[key]);
       }
     } catch (e) {
-      console.warn('[ExChart] echarts 加载失败:', e.message);
+      console.warn('[XtChart] echarts 加载失败:', e.message);
     }
   }
   return echarts;

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

@@ -1,5 +1,5 @@
 <script>
-import EchartsUtil from '../ex-chart/utils.js'
+import EchartsUtil from '../xt-chart/utils.js'
 export default {
   name: 'XtConfigProvider',
   inheritAttrs: false,

package/src/components/xt-date-picker/index.js

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

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

@@ -20,7 +20,7 @@ const typeFormatEnum = {
 import FlexBox from '../xt-flex-box/index.vue'
 import Quarter from "./quarter.vue";
 export default {
-  name: "ExDatePicker",
+  name: "XtDatePicker",
   components: {
     FlexBox,
     Quarter

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

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

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

@@ -16,8 +16,8 @@
 <script>
 const customPrefixes = {}
 
-const ExIcon = {
-  name: 'ExIcon',
+const XtIcon = {
+  name: 'XtIcon',
   inheritAttrs: false,
 
   props: {
@@ -139,13 +139,13 @@ const ExIcon = {
   }
 }
 
-ExIcon.registerPrefix = function (prefix) {
+XtIcon.registerPrefix = function (prefix) {
   if (prefix && typeof prefix === 'string') {
     customPrefixes[prefix] = true
   }
 }
 
-export default ExIcon
+export default XtIcon
 </script>
 
 <style lang="scss" scoped>

package/src/components/xt-layout/ExFieldset.vue

@@ -19,7 +19,7 @@
 </template>
 <script>
 export default {
-  name: "ExFieldset",
+  name: "XtFieldset",
   props: {
     legend: {},
     type: {

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

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

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

@@ -19,7 +19,7 @@
 </template>
 <script>
 export default {
-  name: "ExPage",
+  name: "XtPage",
   props: {
     showHeader: { type: Boolean, default: true },
     showFooter: { type: Boolean, default: true },

package/src/components/xt-select-tree/index.js

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

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

@@ -56,7 +56,7 @@
 import Emitter from "element-ui/lib/mixins/emitter";
 import { addResizeListener, removeResizeListener } from "element-ui/lib/utils/resize-event";
 export default {
-  name: "ExSelectTree",
+  name: "XtSelectTree",
   mixins: [Emitter],
   inheritAttrs: false,
   model: {

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-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轴单位 |