xt-element-ui 2.2.3 → 2.2.4

package/src/components/xt-scroll-arrow/index.vue

@@ -1,35 +1,59 @@
 <template>
   <div class="xt-scroll-arrow" :class="[`xt-scroll-arrow--${direction}`]" :style="containerStyle">
-    <div 
-      v-if="showLeftArrow" 
+    <div
+      v-if="showLeftArrow"
       class="xt-scroll-arrow__btn xt-scroll-arrow__btn--left"
       @click="scrollLeft"
     >
       <i class="el-icon-arrow-left"></i>
     </div>
 
-    <div ref="scrollContainer" class="xt-scroll-arrow__content" @scroll="handleScroll" @click="handleClick">
-      <slot></slot>
+    <div
+      v-if="showTopArrow && direction === 'vertical'"
+      class="xt-scroll-arrow__btn xt-scroll-arrow__btn--top"
+      @click="scrollTop"
+    >
+      <i class="el-icon-arrow-up"></i>
     </div>
 
-    <div 
-      v-if="showRightArrow" 
+    <!-- 使用 xt-scroll 作为滚动容器 -->
+    <xt-scroll
+      ref="scrollRef"
+      :class="['xt-scroll-arrow__content', scrollClass]"
+      :v-scroll="vScroll"
+      :data="vScrollData"
+      :item-size="itemSize"
+      :key-field="keyField"
+      :buffer-size="bufferSize"
+      :scroll-direction="direction"
+      :loading="vScrollLoading"
+      :load-more="loadMore"
+      :load-more-text="loadMoreText"
+      :load-more-loading="loadMoreLoading"
+      @scroll="onScroll"
+      @load-more="$emit('load-more')"
+    >
+      <!-- 虚拟滚动模式：使用 item 插槽 -->
+      <template v-if="vScroll" #item="{ item, index }">
+        <slot name="vitem" :item="item" :index="index">
+          <div class="xt-scroll-arrow__vitem">{{ item }}</div>
+        </slot>
+      </template>
+
+      <!-- 非虚拟滚动模式：默认插槽 -->
+      <slot v-else></slot>
+    </xt-scroll>
+
+    <div
+      v-if="showRightArrow"
       class="xt-scroll-arrow__btn xt-scroll-arrow__btn--right"
       @click="scrollRight"
     >
       <i class="el-icon-arrow-right"></i>
     </div>
 
-    <div 
-      v-if="showTopArrow && direction === 'vertical'" 
-      class="xt-scroll-arrow__btn xt-scroll-arrow__btn--top"
-      @click="scrollTop"
-    >
-      <i class="el-icon-arrow-up"></i>
-    </div>
-
-    <div 
-      v-if="showBottomArrow && direction === 'vertical'" 
+    <div
+      v-if="showBottomArrow && direction === 'vertical'"
       class="xt-scroll-arrow__btn xt-scroll-arrow__btn--bottom"
       @click="scrollBottom"
     >
@@ -39,22 +63,36 @@
 </template>
 
 <script>
+import XtScroll from '../xt-scroll'
+
 export default {
   name: 'XtScrollArrow',
+
+  components: {
+    XtScroll
+  },
+
   props: {
+    // ========== 滚动方向 ==========
     direction: {
       type: String,
       default: 'horizontal',
       validator: (val) => ['horizontal', 'vertical'].includes(val)
     },
+
+    // ========== 滚动步长 ==========
     scrollStep: {
       type: Number,
       default: 100
     },
+
+    // ========== 箭头显示 ==========
     autoHide: {
       type: Boolean,
       default: true
     },
+
+    // ========== 容器尺寸 ==========
     height: {
       type: [String, Number],
       default: ''
@@ -63,6 +101,8 @@ export default {
       type: [String, Number],
       default: ''
     },
+
+    // ========== 模式 ==========
     appendMode: {
       type: Boolean,
       default: false
@@ -70,16 +110,65 @@ export default {
     clickMode: {
       type: Boolean,
       default: false
+    },
+
+    // ========== 虚拟滚动配置 ==========
+    /** 是否启用虚拟滚动 */
+    vScroll: {
+      type: Boolean,
+      default: false
+    },
+    /** 虚拟滚动数据源 */
+    vScrollData: {
+      type: Array,
+      default: () => []
+    },
+    /** 每个 item 的固定尺寸（px） */
+    itemSize: {
+      type: Number,
+      default: 50
+    },
+    /** item 的唯一键字段名 */
+    keyField: {
+      type: String,
+      default: 'id'
+    },
+    /** 预渲染缓冲区大小 */
+    bufferSize: {
+      type: Number,
+      default: 5
+    },
+    /** 虚拟滚动加载状态 */
+    vScrollLoading: {
+      type: Boolean,
+      default: false
+    },
+
+    // ========== 加载更多 ==========
+    loadMore: {
+      type: Boolean,
+      default: false
+    },
+    loadMoreText: {
+      type: String,
+      default: '加载更多'
+    },
+    loadMoreLoading: {
+      type: Boolean,
+      default: false
     }
   },
+
   data() {
     return {
       showLeftArrow: false,
       showRightArrow: false,
       showTopArrow: false,
-      showBottomArrow: false
+      showBottomArrow: false,
+      mutationObserver: null
     }
   },
+
   computed: {
     containerStyle() {
       const style = {}
@@ -90,27 +179,44 @@ export default {
         style.width = typeof this.width === 'number' ? `${this.width}px` : this.width
       }
       return style
+    },
+    scrollClass() {
+      return this.vScroll ? 'xt-scroll-arrow__content--virtual' : ''
     }
   },
+
   watch: {
     direction() {
       this.$nextTick(() => {
         this.checkScroll()
       })
+    },
+    vScrollData: {
+      handler() {
+        this.$nextTick(() => {
+          this.checkScroll()
+        })
+      }
     }
   },
+
   mounted() {
     this.$nextTick(() => {
       this.checkScroll()
     })
     this.addResizeObserver()
-    this.addMutationObserver()
+    if (!this.vScroll) {
+      this.addMutationObserver()
+    }
   },
+
   beforeDestroy() {
     this.removeResizeObserver()
     this.removeMutationObserver()
   },
+
   methods: {
+    // ========== 尺寸监听 ==========
     addResizeObserver() {
       if (typeof ResizeObserver !== 'undefined') {
         this.resizeObserver = new ResizeObserver(() => {
@@ -118,17 +224,19 @@ export default {
             this.checkScroll()
           })
         })
-        const container = this.$refs.scrollContainer
+        const container = this.$el
         if (container) {
           this.resizeObserver.observe(container)
         }
       }
     },
+
     removeResizeObserver() {
       if (this.resizeObserver) {
         this.resizeObserver.disconnect()
       }
     },
+
     addMutationObserver() {
       if (typeof MutationObserver !== 'undefined') {
         this.mutationObserver = new MutationObserver(() => {
@@ -139,28 +247,37 @@ export default {
             }
           })
         })
-        const container = this.$refs.scrollContainer
+        const container = this.$refs.scrollRef
         if (container) {
-          this.mutationObserver.observe(container, {
-            childList: true,
-            subtree: true
-          })
+          const wrap = container.getScrollContainer && container.getScrollContainer()
+          if (wrap) {
+            this.mutationObserver.observe(wrap, {
+              childList: true,
+              subtree: true
+            })
+          }
         }
       }
     },
+
     removeMutationObserver() {
       if (this.mutationObserver) {
         this.mutationObserver.disconnect()
       }
     },
+
+    // ========== 滚动检测 ==========
     checkScroll() {
-      const container = this.$refs.scrollContainer
-      if (!container) return
+      const scrollRef = this.$refs.scrollRef
+      if (!scrollRef) return
+
+      const wrap = scrollRef.getScrollContainer && scrollRef.getScrollContainer()
+      if (!wrap) return
 
       if (this.direction === 'horizontal') {
-        const scrollLeft = container.scrollLeft
-        const scrollWidth = container.scrollWidth
-        const clientWidth = container.clientWidth
+        const scrollLeft = wrap.scrollLeft
+        const scrollWidth = wrap.scrollWidth
+        const clientWidth = wrap.clientWidth
         const maxScroll = scrollWidth - clientWidth
 
         this.showTopArrow = false
@@ -168,15 +285,15 @@ export default {
 
         if (this.autoHide) {
           this.showLeftArrow = scrollLeft > 0
-          this.showRightArrow = maxScroll > 0 && scrollLeft < maxScroll
+          this.showRightArrow = maxScroll > 0 && scrollLeft < maxScroll - 1
         } else {
           this.showLeftArrow = maxScroll > 0
           this.showRightArrow = maxScroll > 0
         }
       } else {
-        const scrollTop = container.scrollTop
-        const scrollHeight = container.scrollHeight
-        const clientHeight = container.clientHeight
+        const scrollTop = wrap.scrollTop
+        const scrollHeight = wrap.scrollHeight
+        const clientHeight = wrap.clientHeight
         const maxScroll = scrollHeight - clientHeight
 
         this.showLeftArrow = false
@@ -184,77 +301,77 @@ export default {
 
         if (this.autoHide) {
           this.showTopArrow = scrollTop > 0
-          this.showBottomArrow = maxScroll > 0 && scrollTop < maxScroll
+          this.showBottomArrow = maxScroll > 0 && scrollTop < maxScroll - 1
         } else {
           this.showTopArrow = maxScroll > 0
           this.showBottomArrow = maxScroll > 0
         }
       }
     },
-    handleScroll() {
+
+    onScroll() {
       this.checkScroll()
-      this.$emit('scroll', this.$refs.scrollContainer)
-    },
-    handleClick(e) {
-      if (!this.clickMode) return
-      const container = this.$refs.scrollContainer
-      if (!container) return
-      
-      const target = e.target
-      if (!target || target === container) return
-      
-      const containerRect = container.getBoundingClientRect()
-      const targetRect = target.getBoundingClientRect()
-      
-      const isVisible = (
-        targetRect.left >= containerRect.left &&
-        targetRect.right <= containerRect.right &&
-        targetRect.top >= containerRect.top &&
-        targetRect.bottom <= containerRect.bottom
-      )
-      
-      if (!isVisible) {
-        if (this.direction === 'horizontal') {
-          const scrollLeft = target.offsetLeft - (container.clientWidth - targetRect.width) / 2
-          container.scrollTo({ left: scrollLeft, behavior: 'smooth' })
-        } else {
-          const scrollTop = target.offsetTop - (container.clientHeight - targetRect.height) / 2
-          container.scrollTo({ top: scrollTop, behavior: 'smooth' })
-        }
-      }
+      this.$emit('scroll', this.$refs.scrollRef)
     },
+
+    // ========== 滚动操作 ==========
     scrollLeft() {
-      const container = this.$refs.scrollContainer
-      if (container) {
-        container.scrollBy({ left: -this.scrollStep, behavior: 'smooth' })
-      }
+      this._scrollBy(-this.scrollStep)
     },
+
     scrollRight() {
-      const container = this.$refs.scrollContainer
-      if (container) {
-        container.scrollBy({ left: this.scrollStep, behavior: 'smooth' })
-      }
+      this._scrollBy(this.scrollStep)
     },
+
     scrollTop() {
-      const container = this.$refs.scrollContainer
-      if (container) {
-        container.scrollBy({ top: -this.scrollStep, behavior: 'smooth' })
-      }
+      this._scrollBy(-this.scrollStep, 'vertical')
     },
+
     scrollBottom() {
-      const container = this.$refs.scrollContainer
-      if (container) {
-        container.scrollBy({ top: this.scrollStep, behavior: 'smooth' })
+      this._scrollBy(this.scrollStep, 'vertical')
+    },
+
+    _scrollBy(delta, dir) {
+      const direction = dir || this.direction
+      const scrollRef = this.$refs.scrollRef
+      if (!scrollRef) return
+
+      const wrap = scrollRef.getScrollContainer && scrollRef.getScrollContainer()
+      if (!wrap) return
+
+      if (direction === 'horizontal') {
+        wrap.scrollBy({ left: delta, behavior: 'smooth' })
+      } else {
+        wrap.scrollBy({ top: delta, behavior: 'smooth' })
       }
     },
+
     scrollToEnd() {
-      const container = this.$refs.scrollContainer
-      if (!container) return
+      const scrollRef = this.$refs.scrollRef
+      if (!scrollRef) return
+      const wrap = scrollRef.getScrollContainer && scrollRef.getScrollContainer()
+      if (!wrap) return
+
       if (this.direction === 'horizontal') {
-        container.scrollTo({ left: container.scrollWidth, behavior: 'smooth' })
+        wrap.scrollTo({ left: wrap.scrollWidth, behavior: 'smooth' })
       } else {
-        container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' })
+        wrap.scrollTo({ top: wrap.scrollHeight, behavior: 'smooth' })
       }
+    },
+
+    // ========== 对外暴露方法 ==========
+    /** 获取滚动位置 */
+    getScrollPos() {
+      const scrollRef = this.$refs.scrollRef
+      if (!scrollRef) return 0
+      const wrap = scrollRef.getScrollContainer && scrollRef.getScrollContainer()
+      if (!wrap) return 0
+      return this.direction === 'horizontal' ? wrap.scrollLeft : wrap.scrollTop
+    },
+
+    /** 获取 xt-scroll 组件实例 */
+    getScrollInstance() {
+      return this.$refs.scrollRef
     }
   }
 }

package/src/components/xt-scroll-arrow/style/index.scss

@@ -16,15 +16,26 @@
 
   &__content {
     flex: 1;
-    overflow: auto;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
+    overflow: hidden;
 
-    &::-webkit-scrollbar {
-      display: none;
+    // 虚拟滚动模式下的内容容器
+    &--virtual {
+      width: 100%;
     }
   }
 
+  // 虚拟滚动 item
+  &__vitem {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 8px;
+    box-sizing: border-box;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
   &__btn {
     position: absolute;
     z-index: 10;

package/src/index.js

@@ -37,6 +37,7 @@ import XtIcon from './components/xt-icon'    // XtIcon 组件（支持 el-icon /
 import XtTable from './components/xt-table'  // XtTable 组件（基于 ElementUI Table 封装）
 import XtList from './components/xt-list'  // XtList 组件（卡片列表）
 import XtScrollArrow from './components/xt-scroll-arrow'
+import XtScroll from './components/xt-scroll'  // XtScroll 组件（虚拟滚动容器）
 import XtBar from './components/xt-chart/XtBar.vue'
 import XtLine from './components/xt-chart/XtLine.vue'
 import XtPie from './components/xt-chart/XtPie.vue'
@@ -47,6 +48,7 @@ import XtUpload from './components/xt-upload'
 import XtTransferTree from './components/xt-transfer-tree'  // XtTransferTree 组件（树形穿梭框）
 import XtFormSchema from './components/xt-form-schema'  // XtFormSchema 组件（表单配置化搜索）
 import XtFlow from './components/xt-flow'  // XtFlow 组件（审批流程轨迹）
+import Theme from './components/theme'  // Theme 模块（iframe 主题注入工具）
 
 
 const components = [
@@ -74,6 +76,7 @@ const components = [
   XtTable,
   XtList,
   XtScrollArrow,
+  XtScroll,
   XtBar,
   XtLine,
   XtPie,
@@ -154,6 +157,7 @@ export default {
   XtTable,
   XtList,
   XtScrollArrow,
+  XtScroll,
   XtBar,
   XtLine,
   XtPie,
@@ -163,7 +167,8 @@ export default {
   XtUpload,
   XtTransferTree,
   XtFormSchema,
-  XtFlow
+  XtFlow,
+  Theme
 }
 
 // 导出工具函数和变量
@@ -202,6 +207,7 @@ export {
   XtTable,
   XtList,
   XtScrollArrow,
+  XtScroll,
   XtBar,
   XtLine,
   XtChart,
@@ -212,5 +218,6 @@ export {
   XtUpload,
   XtTransferTree,
   XtFormSchema,
-  XtFlow
+  XtFlow,
+  Theme
 }

package/src/utils/color.js

@@ -0,0 +1,105 @@
+/**
+ * 颜色工具函数
+ * 供 utils/index.js 和 theme/iframe-injector.js 共同使用
+ */
+
+/**
+ * 十六进制颜色转 RGB 字符串 "r, g, b"
+ */
+export function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  return result
+    ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}`
+    : '24, 144, 255'
+}
+
+/**
+ * 十六进制颜色转 RGB 对象 { r, g, b }
+ */
+export function hexToRgbObject(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null
+}
+
+/**
+ * RGB 对象转十六进制
+ */
+export function rgbToHex(r, g, b) {
+  return '#' + [r, g, b].map(x => {
+    const hex = x.toString(16)
+    return hex.length === 1 ? '0' + hex : hex
+  }).join('')
+}
+
+/**
+ * 加深颜色（amount 范围 0-100，表示减少的量）
+ */
+export function darkenColor(hex, amount) {
+  const obj = hexToRgbObject(hex)
+  if (!obj) return hex
+  const r = Math.max(0, obj.r - amount)
+  const g = Math.max(0, obj.g - amount)
+  const b = Math.max(0, obj.b - amount)
+  return rgbToHex(r, g, b)
+}
+
+/**
+ * 减淡/变亮颜色（percent 范围 0-100，表示增加的百分比）
+ */
+export function lightenColor(hex, percent) {
+  const obj = hexToRgbObject(hex)
+  if (!obj) return hex
+  const amount = Math.round(2.55 * percent)
+  const r = Math.min(255, obj.r + amount)
+  const g = Math.min(255, obj.g + amount)
+  const b = Math.min(255, obj.b + amount)
+  return rgbToHex(r, g, b)
+}
+
+/**
+ * 根据主色调生成 Element UI 主色 CSS 变量
+ * 返回 { '--el-color-primary': hex, '--el-color-primary-light-3': hex, ... }
+ */
+export function generatePrimaryColorVars(primaryColor) {
+  const prefix = '--el-color-primary'
+  return {
+    [prefix]: primaryColor,
+    [`${prefix}-light-3`]: lightenColor(primaryColor, 30),
+    [`${prefix}-light-5`]: lightenColor(primaryColor, 50),
+    [`${prefix}-light-7`]: lightenColor(primaryColor, 70),
+    [`${prefix}-light-8`]: lightenColor(primaryColor, 80),
+    [`${prefix}-light-9`]: lightenColor(primaryColor, 90),
+    [`${prefix}-dark-2`]: darkenColor(primaryColor, 20),
+    [`${prefix}-rgb`]: hexToRgb(primaryColor)
+  }
+}
+
+/**
+ * 根据主色调生成 xt 组件主色 CSS 变量
+ * 返回 { '--xt-color-primary': hex, ... }
+ */
+export function generateXtPrimaryColorVars(primaryColor) {
+  const prefix = '--xt-color-primary'
+  return {
+    [prefix]: primaryColor,
+    [`${prefix}-light-3`]: lightenColor(primaryColor, 30),
+    [`${prefix}-light-5`]: lightenColor(primaryColor, 50),
+    [`${prefix}-light-7`]: lightenColor(primaryColor, 70),
+    [`${prefix}-light-8`]: lightenColor(primaryColor, 80),
+    [`${prefix}-light-9`]: lightenColor(primaryColor, 90)
+  }
+}
+
+export default {
+  hexToRgb,
+  hexToRgbObject,
+  rgbToHex,
+  darkenColor,
+  lightenColor,
+  generatePrimaryColorVars,
+  generateXtPrimaryColorVars
+}