xt-element-ui 1.4.0 → 2.0.1

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

@@ -4,5 +4,4 @@ XtCard.install = function (Vue) {
   Vue.component(XtCard.name, XtCard)
 }
 
-export default XtCard
-export { 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/xt-step-price/index.vue

@@ -154,6 +154,7 @@ export default {
         if (next) {
           let curMax = this.safeNumber(cur[this.keyMax], curMin + stepVal)
           if (curMax <= curMin) curMax = curMin + stepVal
+          curMax = Number(curMax.toFixed(this.precision))
           cur[this.keyMax] = curMax
           next[this.keyMin] = curMax
         } else {
@@ -173,13 +174,19 @@ export default {
     onItemInput(val, idx) {
       const cur = this.localItems[idx]
       if (!cur) return
-      if (val && val[this.keyPrice] !== undefined) cur[this.keyPrice] = this.safeNumber(val[this.keyPrice], 0)
+      if (val && val[this.keyPrice] !== undefined) {
+        let p = this.safeNumber(val[this.keyPrice], 0)
+        p = Number(p.toFixed(this.precision))
+        cur[this.keyPrice] = p
+      }
     },
 
     onMaxChange(val, idx) {
       const cur = this.localItems[idx]
       if (!cur) return
-      const n = this.safeNumber(val, this.safeNumber(cur[this.keyMin], 0) + 1)
+      const stepVal = this.safeNumber(this.step, 1)
+      let n = this.safeNumber(val, this.safeNumber(cur[this.keyMin], 0) + stepVal)
+      n = Number(n.toFixed(this.precision))
       cur[this.keyMax] = n
       const next = this.localItems[idx + 1]
       if (next) next[this.keyMin] = n
@@ -192,7 +199,10 @@ export default {
       if (idx === 0) {
         cur[this.keyMin] = 0
       } else {
-        const n = this.safeNumber(val, this.safeNumber(cur[this.keyMin], 0))
+        let n = this.safeNumber(val, this.safeNumber(cur[this.keyMin], 0))
+        if (n !== 0) {
+          n = Number(n.toFixed(this.precision))
+        }
         cur[this.keyMin] = n
         const prev = this.localItems[idx - 1]
         if (prev) prev[this.keyMax] = n

package/src/components/xt-step-price-item/index.vue

@@ -155,7 +155,10 @@ export default {
     },
 
     onMinBlur() {
-      const v = this.safeNumber(this.minInput, 0)
+      let v = this.safeNumber(this.minInput, 0)
+      if (v !== 0) {
+        v = Number(v.toFixed(this.precision))
+      }
       this.minInput = v
       this.$emit('min-change', v, this.index)
       this.emitChange({ [this.keyMin]: v })
@@ -164,8 +167,10 @@ export default {
     onMaxBlur() {
       if (this.isLast) return
       const minVal = this.safeNumber(this.minInput, 0)
-      let v = this.safeNumber(this.maxInput, minVal + 1)
-      if (v <= minVal) v = minVal + 1
+      const stepVal = this.safeNumber(this.step, 1)
+      let v = this.safeNumber(this.maxInput, minVal + stepVal)
+      if (v <= minVal) v = minVal + stepVal
+      v = Number(v.toFixed(this.precision))
       this.maxInput = v
       this.$emit('max-change', v, this.index)
       this.emitChange({ [this.keyMax]: v })

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: () => [] },