xt-element-ui 1.2.3 → 1.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xt-element-ui",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "基于 Vue2.7 + ElementUI 的组件库",
   "main": "lib/index.common.js",
   "module": "lib/index.esm.js",
@@ -27,7 +27,9 @@
   "files": [
     "lib",
     "src",
-    "README.md"
+    "README.md",
+    "docs/components/**/*md",
+    "docs/README.md"
   ],
   "dependencies": {
     "echarts": "^6.1.0",

package/src/components/ex-chart/ExMulti.vue

@@ -15,6 +15,12 @@ export default {
       type: String,
       default: "medium"
     },
+    // 新增极简模式开关
+    simpleMode: {
+      type: Boolean,
+      default: false
+    },
+    highlightKey: String,// 需要高亮的日期/标识
     config: {
       type: Object,
       default() {
@@ -33,6 +39,7 @@ export default {
         return [
           {
             label: "入户数",
+            unit: "户",
             data: [
               { label: "01月", value: 980 },
               { label: "02月", value: 806 },
@@ -50,6 +57,7 @@ export default {
           },
           {
             label: "隐患数",
+            unit: "个",
             data: [
               { label: "01月", value: 200 },
               { label: "02月", value: 120 },
@@ -67,6 +75,7 @@ export default {
           },
           {
             label: "整改数",
+            unit: "个",
             data: [
               { label: "01月", value: 25 },
               { label: "02月", value: 19 },
@@ -89,10 +98,6 @@ export default {
       type: Array,
       default: () => { return []; }
     },
-    selectedNew: {
-      type: Object,
-      default: null
-    },
     energyType: {
       type: [String, Array],
       default: ""
@@ -138,9 +143,19 @@ export default {
   methods: {
     initChart() {
       const _self = this;
-      // 数据处理
-      const groupYAxis = (unit) => {
-        return {
+
+      // 从 chartData 中收集所有 unit，并保持首次出现顺序去重
+      const uniqueUnits = [];
+      (_self.chartData || []).forEach(item => {
+        const u = item.unit || "";
+        if (uniqueUnits.indexOf(u) === -1) {
+          uniqueUnits.push(u);
+        }
+      });
+
+      // 单个 yAxis 的生成函数
+      const groupYAxis = (unit, index) => {
+        const yAxis = {
           type: "value",
           name: unit,
           axisLine: {
@@ -167,7 +182,24 @@ export default {
             }
           }
         };
+        if (index > 0) {
+          yAxis.position = "right";
+          yAxis.splitLine = { show: false };
+        }
+        return yAxis;
       };
+
+      // 根据去重后的 unit 生成 yAxis
+      const yAxisList = uniqueUnits.length
+        ? uniqueUnits.map((unit, idx) => groupYAxis(unit, idx))
+        : [groupYAxis("", 0)];
+
+      // unit -> yAxisIndex 的映射，便于 series 绑定
+      const unitToYAxisIndex = {};
+      uniqueUnits.forEach((unit, idx) => {
+        unitToYAxisIndex[unit] = idx;
+      });
+
       const option = {
         legend: {
           right: 20,
@@ -176,10 +208,7 @@ export default {
           data: _self.chartData.map((item) => {
             return item.label;
           }),
-          selectedMode: "multiple",
-          selected: _self.selectedNew,
           textStyle: {
-            fontSize: 12
           }
         },
         tooltip: {
@@ -197,12 +226,6 @@ export default {
         },
         xAxis: {
           type: "category",
-          // splitLine: {
-          //   show: true,
-          //   lineStyle: {
-          //     type: "dashed"
-          //   }
-          // },
           axisLabel: {
             rotate: this.config.rotate
           },
@@ -210,7 +233,7 @@ export default {
             return item.label;
           }) : []
         },
-        yAxis: typeof _self.energyType == "string" ? groupYAxis(_self.energyType) : this.energyType.map(unit => groupYAxis(unit)),
+        yAxis: yAxisList,
         dataZoom: [
           {
             type: "inside",
@@ -219,33 +242,22 @@ export default {
             end: 100
           }
         ],
-        series: this.getSeriesData()
+        series: this.getSeriesData(unitToYAxisIndex)
       };
       this.myChart = EchartsUtil.init(_self.$refs.multilinechart, this.theme, option, this.size);
     },
-    getSeriesData() {
-      // 创建 24小时 时间数据填充对象
+    getSeriesData(unitToYAxisIndex) {
       const _self = this;
 
       const _seriesData = [];
       _self.chartData.map((item, ind) => {
-        // debugger;
-        const _isNUll = item.data.some(it => !it.value || it.value == "--");
-        const _itemNull = {
-          type: "",
-          name: item.label,
-          connectNulls: true, // 断点连线，true-连接，false-不连接
-          data: item.data.map(it => it.value),
-          tooltip: {
-            show: false
-          }
-        };
         const _item = {
           animation: true,
           name: item.label,
           type: item.type || "bar",
           avoidLabelOverlap: true,
-          data: item.data.map(it => it.value)
+          data: item.data.map(it => it.value),
+          yAxisIndex: unitToYAxisIndex[item.unit || ""] != null ? unitToYAxisIndex[item.unit || ""] : 0
         };
         _seriesData.push(_item);
       });

package/src/components/ex-chart/ExPie.vue

@@ -33,10 +33,12 @@ export default {
       type: Boolean,
       default: true
     },
-    chartMode: {
-      type: String,
-      default: "dark"
+    // 新增极简模式开关
+    simpleMode: {
+      type: Boolean,
+      default: false
     },
+    highlightKey: String,// 需要高亮的日期/标识
     roseType: {
       type: String,
       default: ""
@@ -83,7 +85,6 @@ export default {
   methods: {
     initChart() {
       const _self = this;
-      console.log(this.chartMode);
       // 数据处理
       const option = {
         title: {
@@ -103,10 +104,7 @@ export default {
         legend: this.showLegend ? {
           top: "top",
           right: "20",
-          type: "scroll",
-          textStyle: {
-            color: "#808080"
-          }
+          type: "scroll"
         } : null,
         grid: {
           left: 30,

package/src/components/ex-chart/index.vue

@@ -3,14 +3,12 @@
   <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>
-  <ex-trend v-else-if="type=='trend'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-trend>
 </template>
 <script>
 import ExBar from "./ExBar.vue"
 import ExLine from "./ExLine.vue"
 import ExPie from "./ExPie.vue"
 import ExMulti from "./ExMulti.vue"
-import ExTrend from "./ExTrend.vue"
 
 export default {
   name: "ExChart",
@@ -18,8 +16,7 @@ export default {
     ExBar,
     ExLine,
     ExPie,
-    ExMulti,
-    ExTrend
+    ExMulti
   },
   props: {
     theme: {

package/src/components/ex-chart/theme/dark.js

@@ -1,3 +1,5 @@
+
+import variables from '../../../styles/variables-export.scss'
 export default {
   color: ["#0de7ff", "#a782ff", "#fcdd60", "#0de7ff", "#ffc5a1", "#6291ae", "#13ce66"],
   backgroundColor: "#000",
@@ -6,10 +8,10 @@ export default {
   },
   title: {
     textStyle: {
-      color: "#333"
+      color: "#ffffff"
     },
     subtextStyle: {
-      color: "#666666"
+      color: "#ffffff"
     }
   },
   line: {
@@ -27,20 +29,20 @@ export default {
   pie: {
     roseType: "radius",
     label: {
-      color: "#333"
+      color: "#ffffff"
     }
   },
   radar: {
     indicator: {
-      color: "#666666"
+      color: "#ffffff"
     }
   },
   map: {
     label: {
-      color: "#333"
+      color: "#ffffff"
     },
     itemStyle: {
-      borderColor: "#fff"
+      borderColor: variables.xtColorBorder
     }
   },
   gauge: {
@@ -52,7 +54,7 @@ export default {
   },
   toolbox: {
     iconStyle: {
-      borderColor: "#666666"
+      borderColor: "#ffffff"
     }
   },
   axisLine: {
@@ -72,20 +74,20 @@ export default {
   },
   splitArea: {
     areaStyle: {
-      color: ["#f7f8fa", "#ffffff"]
+      color: ["#666666", "#666666"]
     }
   },
   legend: {
     textStyle: {
-      color: "#666"
+      color: "#ffffff"
     }
   },
   tooltip: {
-    backgroundColor: "rgba(255, 255, 255, 0.95)",
-    borderColor: "#DCDFE6",
+    backgroundColor: variables.xtColorBgOverlay,
+    borderColor: variables.xtColorBorder,
     borderWidth: 1,
     textStyle: {
-      color: "#333"
+      color: "#fff"
     }
   }
 };

package/src/components/ex-chart/utils.js

@@ -122,7 +122,7 @@ EchartsUtil.EchartsUtil = {
 EchartsUtil.chartInstanceList = [];
 
 EchartsUtil.mergeOptions = function(themeOption, customOption) {
-  return Object.assign({}, this.baseOption, themeOption, customOption);
+  return Object.assign({}, themeOption, customOption);
 };
 
 // 根据字体大小调整主题配置

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

@@ -0,0 +1,2 @@
+import ExIcon from './index.vue'
+export default ExIcon

package/src/components/ex-icon/index.vue

@@ -0,0 +1,168 @@
+<template>
+  <component
+    :is="tag"
+    :class="iconClasses"
+    :style="iconStyle"
+    v-on="$listeners"
+    @click="handleClick"
+  >
+    <svg v-if="isSvgSprite" :style="svgStyle" aria-hidden="true">
+      <use :href="svgHref" />
+    </svg>
+    <slot v-else-if="hasDefaultSlot" />
+  </component>
+</template>
+
+<script>
+const customPrefixes = {}
+
+const ExIcon = {
+  name: 'ExIcon',
+  inheritAttrs: false,
+
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: [String, Number],
+      default: ''
+    },
+    color: {
+      type: String,
+      default: ''
+    },
+    spin: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  computed: {
+    hasDefaultSlot() {
+      return !!this.$slots.default
+    },
+    iconName() {
+      return (this.name || '').trim()
+    },
+    isElIcon() {
+      return /^el-icon-/.test(this.iconName)
+    },
+    isSvgInline() {
+      return this.iconName.indexOf('<svg') > -1
+    },
+    isSvgSprite() {
+      return /^(#|svg:)/.test(this.iconName)
+    },
+    isCustomFont() {
+      if (!this.iconName) return false
+      return !this.isElIcon && !this.isSvgInline && !this.isSvgSprite
+    },
+    svgHref() {
+      if (!this.isSvgSprite) return ''
+      const name = this.iconName.replace(/^svg:/, '').replace(/^#/, '')
+      return `#${name}`
+    },
+    needsExIconPrefix() {
+      if (!this.isCustomFont) return false
+      for (const prefix of Object.keys(customPrefixes)) {
+        if (this.iconName.indexOf(prefix) === 0) {
+          return false
+        }
+      }
+      return true
+    },
+    tag() {
+      if (this.isSvgInline) return 'span'
+      return 'i'
+    },
+    iconClasses() {
+      const classes = []
+      if (this.isElIcon) {
+        classes.push(this.iconName)
+      } else if (this.isSvgSprite) {
+        classes.push('ex-icon-svg')
+      } else if (this.isCustomFont) {
+        if (this.needsExIconPrefix) classes.push('ex-icon')
+        classes.push(this.iconName)
+      } else if (this.isSvgInline) {
+        classes.push('ex-icon-inline-svg')
+      }
+      if (this.spin) classes.push('ex-icon-spin')
+      return classes
+    },
+    iconStyle() {
+      const style = {}
+      if (this.size) {
+        const s = typeof this.size === 'number' ? `${this.size}px` : this.size
+        style.fontSize = s
+        style.width = s
+        style.height = s
+      }
+      if (this.color) {
+        style.color = this.color
+      }
+      if (this.isSvgInline) {
+        style.display = 'inline-block'
+        style.verticalAlign = 'middle'
+      }
+      return style
+    },
+    svgStyle() {
+      return {
+        width: '1em',
+        height: '1em',
+        verticalAlign: '-0.15em',
+        fill: 'currentColor',
+        overflow: 'hidden'
+      }
+    }
+  },
+
+  mounted() {
+    if (this.isSvgInline && this.$el) {
+      this.$el.innerHTML = this.iconName
+    }
+  },
+
+  beforeUpdate() {
+    if (this.isSvgInline && this.$el) {
+      this.$el.innerHTML = this.iconName
+    }
+  },
+
+  methods: {
+    handleClick(e) {
+      this.$emit('click', e)
+    }
+  }
+}
+
+ExIcon.registerPrefix = function (prefix) {
+  if (prefix && typeof prefix === 'string') {
+    customPrefixes[prefix] = true
+  }
+}
+
+export default ExIcon
+</script>
+
+<style lang="scss" scoped>
+.ex-icon-svg {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  font-size: inherit;
+}
+
+.ex-icon-spin {
+  animation: ex-icon-spin-rotate 1s linear infinite;
+}
+
+@keyframes ex-icon-spin-rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+</style>

package/src/components/ex-icon/style/index.scss

@@ -0,0 +1,7 @@
+.ex-icon {
+  display: inline-block;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  vertical-align: -0.15em;
+}

package/src/components/ex-table/index.vue

@@ -97,10 +97,10 @@
     <!-- 分页 -->
     <div class="ex-table-footer" v-if="showPagination">
       <el-pagination
-        :current-page="pagination.PageNum"
-        :page-size="pagination.PageSize"
+        :current-page="pagination.ppageNum"
+        :page-size="pagination.pageSize"
         :total="total"
-        :page-sizes="pagination.PageSizes || [10, 20, 50, 100]"
+        :page-sizes="pagination.pageSizes || [10, 20, 50, 100]"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"

package/src/components/index.scss

@@ -28,4 +28,7 @@
 @import './ex-card/style/index.scss';
 
 // GridBox 组件样式
-@import './xt-grid-box/style/index.scss';
+@import './xt-grid-box/style/index.scss';
+
+// ExIcon 组件样式
+@import './ex-icon/style/index.scss';

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

@@ -1,6 +1,6 @@
 <template>
   <button 
-    class="el-button xt-button" 
+    class="xt-button"
     :class="[
       type ?'xt-button--' + type: '', 
       size ? 'xt-button--' + size : '',
@@ -28,7 +28,7 @@ export default {
     size: {
       type: String,
       default: '',
-      validator: (val) => ['', 'large', 'medium', 'small', 'mini'].includes(val)
+      validator: (val) => ['', 'large', 'medium', 'small'].includes(val)
     },
     plain: {
       type: Boolean,