xt-element-ui 1.2.1 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xt-element-ui",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "基于 Vue2.7 + ElementUI 的组件库",
   "main": "lib/index.common.js",
   "module": "lib/index.esm.js",
@@ -32,9 +32,8 @@
   "dependencies": {
     "echarts": "^6.1.0",
     "element-ui": "^2.15.14",
-    "highlight.js": "^11.11.1",
-    "highlightjs-vue": "^1.0.0",
     "sass": "^1.32.13",
-    "vue-server-renderer": "^2.7.14"
+    "vue-server-renderer": "^2.7.14",
+    "xt-element-ui": "^1.2.1"
   }
 }

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

@@ -22,6 +22,11 @@ export default {
     }
   },
   props: {
+    type: {
+      type: String,
+      default: 'default',
+      validator: (val) => ['default', 'primary', 'success', 'warning', 'danger'].includes(val)
+    },
     throttle: {
       type: Number,
       default: 0
@@ -29,7 +34,7 @@ export default {
     size: {
       type: String,
       default: null,
-      validator: (val) => !val || ['small', 'medium', 'large'].includes(val)
+      validator: (val) => !val || ['mini', 'small', 'medium', 'large'].includes(val)
     }
   },
   data() {
@@ -44,7 +49,8 @@ export default {
     },
     buttonClasses() {
       return [
-        `ex-button-${this.finalSize}`
+        `ex-button-${this.finalSize}`,
+        `ex-button-${this.type}`
       ]
     }
   },

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

@@ -3,29 +3,65 @@
 .ex-button {
   padding: 8px 16px;
   border-radius: var(--xt-border-radius-base);
-  border: 1px solid var(--xt-border-color);
   font-size: var(--xt-font-size-base);
+  border: 1px solid var(--xt-border-color, #dcdfe6);
   transition: all 0.3s;
-  
+  &-default{
+    background-color: var(--el-bg-color-page, #ffffff);
+    border: 1px solid var(--xt-border-color, #303133);
+    color: var(--el-text-color-primary, #303133);
+  }
+  &-primary{
+    background-color: var(--el-color-primary, #ffffff);
+    border-color: var(--el-color-primary, #ffffff);
+    color: var(--el-text-color-white, #ffffff);
+  }
+  &-success{
+    background-color: var(--el-color-success, #ffffff);
+    border-color: var(--el-color-success, #ffffff);
+    color: var(--el-text-color-white, #ffffff);
+  }
+  &-warning{
+    background-color: var(--el-color-warning, #ffffff);
+    border-color: var(--el-color-warning, #ffffff);
+    color: var(--el-text-color-white, #ffffff);
+  }
+  &-danger{
+    background-color: var(--el-color-danger, #ffffff);
+    border-color: var(--el-color-danger, #ffffff);
+    color: var(--el-text-color-white, #ffffff);
+  }
+  &-info{
+    background-color: var(--el-color-info, #ffffff);
+    border-color: var(--el-color-info, #ffffff);
+    color: var(--el-text-color-white, #ffffff);
+  }
+
   &:hover {
     opacity: 0.8;
   }
 }
 
+/* small size - 字体大小 12px */
+.ex-button-mini {
+  padding: 2px 4px;
+  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-extra-small);
+}
+
 /* small size - 字体大小 14px */
 .ex-button-small {
-  padding: 4px 8px;
-  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-small);
+  padding: 5px 10px;
+  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-base);
 }
 
 /* medium size - 字体大小 16px */
 .ex-button-medium {
-  padding: 7px 14px;
+  padding: 8px 16px;
   font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-medium);
 }
 
 /* large size - 字体大小 18px */
 .ex-button-large {
-  padding: 10px 20px;
+  padding: 11px 22px;
   font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-large);
 }

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

@@ -66,85 +66,3 @@ export default {
   }
 }
 </script>
-
-<style scoped lang="scss">
-.ex-card {
-  transition: all 0.3s;
-  border-radius: 8px;
-  
-  ::v-deep .el-card__header {
-    padding: 12px 16px;
-    border-bottom: 1px solid #ebeef5;
-    background-color: #fafafa;
-    font-weight: 600;
-  }
-  
-  ::v-deep .el-card__body {
-    padding: 16px;
-  }
-}
-
-/* small size */
-.ex-card-small {
-  border-radius: 8px;
-  
-  ::v-deep .el-card__header {
-    padding: 12px 16px;
-  }
-  
-  ::v-deep .el-card__body {
-    padding: 16px;
-  }
-}
-
-/* medium size */
-.ex-card-medium {
-  border-radius: 10px;
-  
-  ::v-deep .el-card__header {
-    padding: 14px 18px;
-  }
-  
-  ::v-deep .el-card__body {
-    padding: 18px;
-  }
-}
-
-/* large size */
-.ex-card-large {
-  border-radius: 12px;
-  
-  ::v-deep .el-card__header {
-    padding: 16px 20px;
-  }
-  
-  ::v-deep .el-card__body {
-    padding: 20px;
-  }
-}
-
-.ex-card-always {
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-
-.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);
-  }
-}
-
-.ex-card-never {
-  box-shadow: none;
-  border: 1px solid #ebeef5;
-}
-
-.ex-card-no-border {
-  border: none;
-  
-  ::v-deep .el-card__header {
-    border-bottom: none;
-  }
-}
-</style>

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

@@ -1,15 +1,19 @@
 // ExCard 组件样式
+@import '../../../styles/element-theme.scss';
 @import '../../../styles/variables.scss';
 
 .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);
   
   .el-card__header {
     padding: var(--ex-card-header-padding, 16px 20px);
-    border-bottom: 1px solid #ebeef5;
-    background-color: #fafafa;
+    border-bottom: 1px solid var(--el-border-color, #ebeef5);
+    background-color: var(--el-bg-color-block-head, #ffffff);
     font-weight: 600;
   }
   
@@ -56,7 +60,7 @@
 
 .ex-card-never {
   box-shadow: none;
-  border: 1px solid #ebeef5;
+  border: 1px solid var(--el-border-color, #ebeef5);
 }
 
 .ex-card-no-border {

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

@@ -1,6 +1,6 @@
 export default {
   color: ["#0de7ff", "#a782ff", "#fcdd60", "#0de7ff", "#ffc5a1", "#6291ae", "#13ce66"],
-  backgroundColor: "transparent",
+  backgroundColor: "#000",
   textStyle: {
     fontFamily: "Microsoft YaHei, sans-serif"
   },

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

@@ -65,7 +65,7 @@ EchartsUtil.currentTheme = "default";
 EchartsUtil.currentSize = "medium";
 EchartsUtil.inverse = false;
 
-EchartsUtil.baseOption = {
+EchartsUtil.EchartsUtil = {
   backgroundColor: "transparent",
   tooltip: {
     trigger: "axis",

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

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

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

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

package/src/components/{xt-select-tree → ex-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: "XtSelectTree",
+  name: "ExSelectTree",
   mixins: [Emitter],
   inheritAttrs: false,
   model: {

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

@@ -14,9 +14,10 @@ export default {
       index: ctx.props.index
     }
     if (ctx.props.column) params.column = ctx.props.column
-    const isVnode = (it) => typeof it === 'object' && it.hasOwnProperty('componentOptions')
+    const isVnode = (it) => it !== null && it !== undefined && typeof it === 'object' && it.hasOwnProperty('componentOptions')
     const renderNode = ctx.props.formatter(h, params)
-    return isVnode(renderNode) ? renderNode : h('span', renderNode)
+    if (renderNode === null || renderNode === undefined || renderNode === '') return h('span', '')
+    return isVnode(renderNode) ? renderNode : h('span', String(renderNode))
   }
 }
 </script>

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

@@ -0,0 +1,234 @@
+<template>
+  <el-table
+    ref="innerTable"
+    v-bind="$attrs"
+    v-on="$listeners"
+    :data="renderList"
+  >
+    <slot />
+  </el-table>
+</template>
+
+<script>
+export default {
+  name: 'VirtualElTable',
+  inheritAttrs: false,
+
+  props: {
+    virtualScroll: {
+      type: Boolean,
+      default: false
+    },
+    rowHeight: {
+      type: Number,
+      default: 48
+    },
+    bufferSize: {
+      type: Number,
+      default: 5
+    }
+  },
+
+  data() {
+    return {
+      scrollWrap: null,
+      phantomDom: null,
+      scrollTop: 0,
+      // 根据数据量与容器高度预先估算一个合理的 endIndex，避免首屏只渲染 0 行
+      startIndex: 0,
+      endIndex: 20,
+      rafId: null,
+      unwatchPhantom: null,
+      layoutTimer: null,
+      retryTimers: []
+    }
+  },
+
+  computed: {
+    originData() {
+      return this.$attrs.data || []
+    },
+    renderList() {
+      if (!this.virtualScroll) return this.originData
+      const start = Math.max(0, this.startIndex - this.bufferSize)
+      const end = Math.min(this.originData.length, this.endIndex + this.bufferSize)
+      return this.originData.slice(start, end)
+    },
+    totalListHeight() {
+      return this.originData.length * this.rowHeight
+    },
+    contentOffsetY() {
+      return Math.max(0, this.startIndex - this.bufferSize) * this.rowHeight
+    }
+  },
+
+  watch: {
+    renderList() {
+      this.scheduleLayout()
+    },
+    originData: {
+      handler(val) {
+        if (!this.virtualScroll) return
+        if (val && val.length) {
+          this.$nextTick(() => {
+            this.calcVisibleRange()
+          })
+        }
+      }
+    }
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.initVirtualScroll()
+    })
+  },
+
+  beforeDestroy() {
+    this.unbindScrollEvent()
+    if (this.rafId) {
+      cancelAnimationFrame(this.rafId)
+      this.rafId = null
+    }
+    if (this.unwatchPhantom) {
+      this.unwatchPhantom()
+      this.unwatchPhantom = null
+    }
+    if (this.layoutTimer) {
+      clearTimeout(this.layoutTimer)
+      this.layoutTimer = null
+    }
+    this.retryTimers.forEach(t => clearTimeout(t))
+    this.retryTimers = []
+  },
+
+  methods: {
+    initVirtualScroll() {
+      if (!this.virtualScroll) return
+      this.scrollWrap = this.$refs.innerTable.$el.querySelector('.el-table__body-wrapper')
+      if (!this.scrollWrap) {
+        console.warn('[VirtualElTable] 无法找到滚动容器，虚拟滚动功能已禁用')
+        this.virtualScroll = false
+        return
+      }
+
+      this.scrollWrap.style.overflowY = 'auto'
+      this.scrollWrap.style.overflowX = 'auto'
+
+      this.wrapTableBody()
+      this.scrollWrap.addEventListener('scroll', this.onScroll, { passive: true })
+
+      // 首次可见范围计算 + 多次重试：
+      // ElementUI 的 el-table 在 mounted 后仍会异步完成列宽/高度布局，
+      // 单次 $nextTick 可能拿到 clientHeight=0，导致计算失败且无法恢复。
+      // 以递增延迟多次调用，直到 scrollWrap.clientHeight 获得稳定值。
+      this.calcVisibleRange()
+      const delays = [100, 300, 600, 1000]
+      delays.forEach(ms => {
+        const timer = setTimeout(() => {
+          this.calcVisibleRange()
+        }, ms)
+        this.retryTimers.push(timer)
+      })
+    },
+
+    wrapTableBody() {
+      const bodyDom = this.scrollWrap.querySelector('.el-table__body')
+      if (!bodyDom || bodyDom.querySelector('.vs-phantom')) return
+
+      // phantom 采用标准 block 布局：
+      // - height = 总数据高度，确保撑开 body-wrapper 的滚动条
+      // - padding-top = 可见区域偏移量，将 table 推到正确位置
+      // - min-width: 100%（不设 width），允许 table 自然撑开，保证列宽生效
+      const phantom = document.createElement('div')
+      phantom.className = 'vs-phantom'
+      phantom.style.position = 'relative'
+      phantom.style.minWidth = '100%'
+      phantom.style.boxSizing = 'border-box'
+      phantom.style.zIndex = '1'
+      this.phantomDom = phantom
+
+      const table = bodyDom.querySelector('table')
+      phantom.appendChild(table)
+      bodyDom.appendChild(phantom)
+
+      this.unwatchPhantom = this.$watch(
+        ['totalListHeight', 'contentOffsetY'],
+        () => {
+          if (this.phantomDom) {
+            this.phantomDom.style.height = `${this.totalListHeight}px`
+            this.phantomDom.style.paddingTop = `${this.contentOffsetY}px`
+          }
+        },
+        { immediate: true }
+      )
+    },
+
+    onScroll() {
+      this.scrollTop = this.scrollWrap.scrollTop
+      if (this.rafId) return
+      this.rafId = requestAnimationFrame(() => {
+        this.calcVisibleRange()
+        this.rafId = null
+      })
+    },
+
+    calcVisibleRange() {
+      if (!this.scrollWrap) return
+      let viewHeight = this.scrollWrap.clientHeight
+
+      // 关键兜底：ElementUI 异步布局尚未完成时，clientHeight 可能为 0，
+      // 此时用组件接收到的 height / max-height 作为估算值，确保至少能渲染正确数量的行。
+      if (!viewHeight) {
+        const h = this.$attrs.height || this.$attrs.maxHeight
+        if (h) {
+          viewHeight = typeof h === 'number' ? h : parseInt(String(h), 10)
+        }
+      }
+      if (!viewHeight || viewHeight <= 0) return
+
+      const visibleRowCount = Math.ceil(viewHeight / this.rowHeight)
+      const newStart = Math.floor(this.scrollTop / this.rowHeight)
+      const newEnd = Math.min(this.originData.length, newStart + visibleRowCount)
+
+      if (newStart !== this.startIndex || newEnd !== this.endIndex) {
+        this.startIndex = newStart
+        this.endIndex = newEnd
+      }
+    },
+
+    unbindScrollEvent() {
+      if (this.scrollWrap) {
+        this.scrollWrap.removeEventListener('scroll', this.onScroll)
+      }
+    },
+
+    scheduleLayout() {
+      if (this.layoutTimer) return
+      this.layoutTimer = setTimeout(() => {
+        if (this.$refs.innerTable) {
+          this.$refs.innerTable.doLayout()
+        }
+        this.layoutTimer = null
+      }, 0)
+    },
+
+    clearSelection() {
+      return this.$refs.innerTable.clearSelection()
+    },
+    toggleRowSelection() {
+      return this.$refs.innerTable.toggleRowSelection()
+    },
+    doLayout() {
+      return this.$refs.innerTable.doLayout()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.vs-phantom {
+  position: relative;
+  box-sizing: border-box;
+}
+</style>