xt-element-ui 2.2.2 → 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/components/xt-text/style/index.scss

@@ -36,15 +36,15 @@
 }
 
 .xt-text--success {
-  color: $xt-color-success;
+  color: var(--xt-color-success);
 }
 
 .xt-text--warning {
-  color: $xt-color-warning;
+  color: var(--xt-color-warning);
 }
 
 .xt-text--danger {
-  color: $xt-color-danger;
+  color: var(--xt-color-danger);
 }
 
 // 粗体
@@ -81,15 +81,15 @@
   }
   
   &.xt-text--success {
-    color: $xt-color-success;
+    color: var(--xt-color-success);
   }
   
   &.xt-text--warning {
-    color: $xt-color-warning;
+    color: var(--xt-color-warning);
   }
   
   &.xt-text--danger {
-    color: $xt-color-danger;
+    color: var(--xt-color-danger);
   }
 }
 

package/src/index.js

@@ -4,9 +4,6 @@ import './styles/css-variables.scss'
 // 导入组件样式（统一入口）
 import './components/index.scss'
 
-// 导入 SCSS 变量（通过 CSS Modules :export 导出）
-import variables from './styles/variables-export.scss'
-
 import utilsModule from './utils/index'
 
 // ES Module 默认导出需要通过 .default 访问
@@ -40,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'
@@ -49,6 +47,8 @@ import XtSelectTree from './components/xt-select-tree'
 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 = [
@@ -76,6 +76,7 @@ const components = [
   XtTable,
   XtList,
   XtScrollArrow,
+  XtScroll,
   XtBar,
   XtLine,
   XtPie,
@@ -84,7 +85,8 @@ const components = [
   XtSelectTree,
   XtUpload,
   XtTransferTree,
-  XtFormSchema
+  XtFormSchema,
+  XtFlow
 ]
 
 const install = function (Vue, options = {}) {
@@ -155,6 +157,7 @@ export default {
   XtTable,
   XtList,
   XtScrollArrow,
+  XtScroll,
   XtBar,
   XtLine,
   XtPie,
@@ -163,19 +166,14 @@ export default {
   XtSelectTree,
   XtUpload,
   XtTransferTree,
-  XtFormSchema
+  XtFormSchema,
+  XtFlow,
+  Theme
 }
 
-// XtChart 组件按需导出（使用时需自行安装 echarts 依赖）
-export { default as XtChart } from './components/xt-chart'
-
-// XtTable 虚拟滚动演示数据工具
-export { createVirtualScrollData, virtualScrollColumns } from './components/xt-table/virtualScrollData'
-
 // 导出工具函数和变量
 export {
   utils,
-  variables,
   // 配置管理函数（从 utils 导入）
   getConfig,
   setConfig,
@@ -209,13 +207,17 @@ export {
   XtTable,
   XtList,
   XtScrollArrow,
+  XtScroll,
   XtBar,
   XtLine,
+  XtChart,
   XtPie,
   XtMulti,
   XtPage,
   XtSelectTree,
   XtUpload,
   XtTransferTree,
-  XtFormSchema
+  XtFormSchema,
+  XtFlow,
+  Theme
 }

package/src/styles/css-variables.scss

@@ -239,4 +239,76 @@
 
 [data-size="small"] {
   --xt-font-size-increment: 0px;
-}
+}
+
+// ============================
+// 品牌色配置（水电气子系统 + 大屏分析）
+// 品牌色与主题模式可叠加使用
+// 示例：<div data-theme="dark" data-brand="water">
+// ============================
+
+// 水务系统 - 蓝色系
+[data-brand="water"] {
+  --xt-color-primary: #0077be;
+  --xt-color-primary-light-3: rgb(51, 142, 206);
+  --xt-color-primary-light-5: rgb(102, 179, 229);
+  --xt-color-primary-light-7: rgb(153, 216, 252);
+  --xt-color-primary-light-8: rgb(178, 229, 253);
+  --xt-color-primary-light-9: rgb(204, 241, 255);
+  --xt-color-primary-dark-2: rgb(0, 92, 145);
+}
+
+[data-theme="dark"][data-brand="water"],
+[data-brand="water"][data-theme="dark"] {
+  --xt-color-primary: #0099cc;
+  --xt-color-primary-light-3: rgb(0, 124, 167);
+  --xt-color-primary-light-5: rgb(0, 93, 125);
+  --xt-color-primary-light-7: rgb(0, 62, 83);
+  --xt-color-primary-light-8: rgb(0, 47, 63);
+  --xt-color-primary-light-9: rgb(0, 31, 42);
+  --xt-color-primary-dark-2: rgb(0, 159, 204);
+}
+
+// 电力系统 - 绿色系
+[data-brand="electricity"] {
+  --xt-color-primary: #2ecc71;
+  --xt-color-primary-light-3: rgb(95, 224, 146);
+  --xt-color-primary-light-5: rgb(140, 234, 176);
+  --xt-color-primary-light-7: rgb(185, 244, 206);
+  --xt-color-primary-light-8: rgb(208, 249, 221);
+  --xt-color-primary-light-9: rgb(230, 252, 238);
+  --xt-color-primary-dark-2: rgb(34, 181, 94);
+}
+
+[data-theme="dark"][data-brand="electricity"],
+[data-brand="electricity"][data-theme="dark"] {
+  --xt-color-primary: #27ae60;
+  --xt-color-primary-light-3: rgb(50, 168, 102);
+  --xt-color-primary-light-5: rgb(38, 126, 77);
+  --xt-color-primary-light-7: rgb(26, 84, 51);
+  --xt-color-primary-light-8: rgb(19, 63, 38);
+  --xt-color-primary-light-9: rgb(13, 42, 26);
+  --xt-color-primary-dark-2: rgb(73, 212, 131);
+}
+
+// 燃气系统 - 橙色系
+[data-brand="gas"] {
+  --xt-color-primary: #f39c12;
+  --xt-color-primary-light-3: rgb(247, 176, 85);
+  --xt-color-primary-light-5: rgb(249, 199, 140);
+  --xt-color-primary-light-7: rgb(251, 222, 195);
+  --xt-color-primary-light-8: rgb(252, 233, 222);
+  --xt-color-primary-light-9: rgb(254, 244, 248);
+  --xt-color-primary-dark-2: rgb(194, 133, 0);
+}
+
+[data-theme="dark"][data-brand="gas"],
+[data-brand="gas"][data-theme="dark"] {
+  --xt-color-primary: #e67e22;
+  --xt-color-primary-light-3: rgb(214, 146, 75);
+  --xt-color-primary-light-5: rgb(161, 109, 56);
+  --xt-color-primary-light-7: rgb(107, 73, 38);
+  --xt-color-primary-light-8: rgb(80, 55, 28);
+  --xt-color-primary-light-9: rgb(54, 36, 19);
+  --xt-color-primary-dark-2: rgb(241, 152, 66);
+}