xt-element-ui 2.2.1 → 2.2.3

package/src/components/xt-tabs/style/index.scss

@@ -3,155 +3,165 @@
 .xt-tabs {
   display: flex;
   flex-direction: column;
-}
-
-.xt-tabs--left,
-.xt-tabs--right {
-  flex-direction: row;
+  
+  &--top, &--bottom {
+    flex-direction: column;
+    .xt-tabs__header {
+      width: 100%;
+    }
+  }
+  
+  &--left, &--right {
+    flex-direction: row;
+    .xt-tabs__header {
+      flex-direction: column;
+      width: auto;
+    }
+    .xt-tabs__nav {
+      flex-direction: column;
+    }
+    .xt-tabs__nav-indicator {
+      width: 2px;
+      height: auto;
+    }
+    .xt-tabs__content {
+      border-left: 1px solid #dcdfe6;
+      border-top: none;
+    }
+    &--right .xt-tabs__content {
+      border-left: none;
+      border-right: 1px solid #dcdfe6;
+    }
+  }
+  
+  &--top .xt-tabs__nav-indicator {
+    bottom: 0;
+  }
+  &--bottom .xt-tabs__nav-indicator {
+    top: 0;
+  }
+  &--left .xt-tabs__nav-indicator {
+    right: 0;
+  }
+  &--right .xt-tabs__nav-indicator {
+    left: 0;
+  }
+  
+  &--card {
+    .xt-tabs__header {
+      margin-bottom: -1px;
+    }
+    
+    .xt-tabs__nav-item {
+      border: 1px solid transparent;
+      border-bottom: none;
+      background: #f5f7fa;
+      
+      &--active {
+        background: #fff;
+        border-color: #dcdfe6;
+        border-bottom-color: #fff;
+      }
+    }
+    &--left, &--right {
+      .xt-tabs__nav-item {
+        border-bottom: 1px solid transparent;
+        border-right: none;
+      }
+      .xt-tabs__nav-item--active {
+        border-right-color: #fff;
+        border-bottom-color: #dcdfe6;
+      }
+    }
+  }
+  
+  &--border-card {
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    overflow: hidden;
+    
+    .xt-tabs__nav-item--active {
+      background: #ecf5ff;
+      color: #409eff;
+    }
+  }
+  
+  &--editable {
+    .xt-tabs__close {
+      display: inline-block;
+    }
+  }
 }
 
 .xt-tabs__header {
   position: relative;
-  border-bottom: 1px solid $xt-color-border-light;
-  padding-bottom: 0;
-}
-
-.xt-tabs--card .xt-tabs__header {
-  border-bottom: none;
-  background: $xt-color-bg-secondary;
-  padding: 4px 4px 0;
-  border-radius: 4px 4px 0 0;
-}
-
-.xt-tabs--left .xt-tabs__header {
-  border-right: 1px solid $xt-color-border-light;
-  border-bottom: none;
-  padding-right: 0;
-}
-
-.xt-tabs--right .xt-tabs__header {
-  border-left: 1px solid $xt-color-border-light;
-  border-bottom: none;
-  padding-left: 0;
+  display: flex;
 }
 
 .xt-tabs__nav {
   display: flex;
-}
-
-.xt-tabs--left .xt-tabs__nav,
-.xt-tabs--right .xt-tabs__nav {
-  flex-direction: column;
+  flex-wrap: nowrap;
 }
 
 .xt-tabs__nav-item {
   position: relative;
   padding: 12px 20px;
-  font-size: 14px;
-  color: $xt-color-text-secondary;
+  margin-right: 10px;
   cursor: pointer;
-  transition: color 0.3s ease;
-}
-
-.xt-tabs--card .xt-tabs__nav-item {
-  margin-bottom: -1px;
-  border-radius: 4px 4px 0 0;
-  background: transparent;
-  border: 1px solid transparent;
-}
-
-.xt-tabs--card .xt-tabs__nav-item--active {
-  background: $xt-color-bg-primary;
-  border-color: $xt-color-border-light;
-  border-bottom-color: $xt-color-bg-primary;
-}
-
-.xt-tabs__nav-item:hover {
-  color: $xt-color-primary;
-}
-
-.xt-tabs__nav-item--active {
-  color: $xt-color-primary;
-  font-weight: 500;
+  font-size: 14px;
+  color: #606266;
+  transition: all 0.3s;
+  white-space: nowrap;
+  
+  &--active {
+    color: #409eff;
+  }
+  
+  &--disabled {
+    cursor: not-allowed;
+    color: #c0c4cc;
+  }
+  
+  &--add {
+    color: #909399;
+    font-size: 20px;
+  }
+  
+  &:hover:not(.xt-tabs__nav-item--disabled) {
+    color: #409eff;
+    background-color: #ecf5ff;
+  }
 }
 
 .xt-tabs__nav-link {
   display: inline-block;
 }
 
+.xt-tabs__close {
+  display: none;
+  margin-left: 8px;
+  font-size: 16px;
+  line-height: 1;
+  color: #909399;
+  vertical-align: middle;
+  
+  &:hover {
+    color: #f56c6c;
+  }
+}
+
 .xt-tabs__nav-indicator {
   position: absolute;
-  bottom: 0;
   height: 2px;
-  background: $xt-color-primary;
-  transition: left 0.3s ease, width 0.3s ease;
-}
-
-.xt-tabs--left .xt-tabs__nav-indicator {
-  bottom: auto;
-  left: auto;
-  right: 0;
-  width: 2px;
-  height: auto;
-  top: 0;
-}
-
-.xt-tabs--right .xt-tabs__nav-indicator {
-  bottom: auto;
-  right: auto;
-  left: 0;
-  width: 2px;
-  height: auto;
-  top: 0;
-}
-
-.xt-tabs--card .xt-tabs__nav-indicator {
-  display: none;
+  background-color: #409eff;
 }
 
 .xt-tabs__content {
   flex: 1;
-  padding: 20px 0;
-}
-
-.xt-tabs--card .xt-tabs__content {
-  border: 1px solid $xt-color-border-light;
-  border-top: none;
-  border-radius: 0 0 4px 4px;
-  padding: 20px;
-}
-
-.xt-tabs--left .xt-tabs__content,
-.xt-tabs--right .xt-tabs__content {
-  padding: 0 20px;
+  padding: 16px;
+  border-top: 1px solid #dcdfe6;
 }
 
 .xt-tabs__pane {
-  animation: xt-tabs-fade-in 0.3s ease;
-}
-
-@keyframes xt-tabs-fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.xt-tabs-fade-enter-active,
-.xt-tabs-fade-leave-active {
-  transition: opacity 0.3s ease, transform 0.3s ease;
-}
-
-.xt-tabs-fade-enter {
-  opacity: 0;
-  transform: translateY(10px);
-}
-
-.xt-tabs-fade-leave-to {
-  opacity: 0;
-  transform: translateY(-10px);
+  min-height: 40px;
 }

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

@@ -14,7 +14,7 @@
         'xt-text--' + size,
         { 'xt-text--bold': bold },
         { 'xt-text--money': format === 'money' },
-        { 'xt-text--ellipsis': ellipsis },
+        { 'xt-text--ellipsis': ellipsis && ellipsisRows == 1 },
         { 'xt-text--ellipsis-multiline': ellipsis && ellipsisRows > 1 }
       ]"
       :style="customStyle"
@@ -42,7 +42,7 @@
       'xt-text--' + size,
       { 'xt-text--bold': bold },
       { 'xt-text--money': format === 'money' },
-      { 'xt-text--ellipsis': ellipsis },
+      { 'xt-text--ellipsis': ellipsis && ellipsisRows == 1 },
       { 'xt-text--ellipsis-multiline': ellipsis && ellipsisRows > 1 }
     ]"
     :style="customStyle"
@@ -155,6 +155,7 @@ export default {
   },
   data() {
     return {
+      ellipsisWidth: undefined,
       isOverflow: false
     }
   },
@@ -171,6 +172,7 @@ export default {
       }
       if (this.ellipsis && this.ellipsisRows > 1) {
         style.WebkitLineClamp = this.ellipsisRows
+        style.width = `${this.ellipsisWidth}px`
       }
       return style
     },
@@ -250,6 +252,7 @@ export default {
 
       if (this.ellipsisRows > 1) {
         this.isOverflow = el.scrollHeight > el.clientHeight
+        this.ellipsisWidth =  el.clientWidth;
       } else {
         this.isOverflow = el.scrollWidth > el.clientWidth
       }

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 访问
@@ -49,6 +46,7 @@ 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 组件（审批流程轨迹）
 
 
 const components = [
@@ -84,7 +82,8 @@ const components = [
   XtSelectTree,
   XtUpload,
   XtTransferTree,
-  XtFormSchema
+  XtFormSchema,
+  XtFlow
 ]
 
 const install = function (Vue, options = {}) {
@@ -163,19 +162,13 @@ export default {
   XtSelectTree,
   XtUpload,
   XtTransferTree,
-  XtFormSchema
+  XtFormSchema,
+  XtFlow
 }
 
-// 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,
@@ -211,11 +204,13 @@ export {
   XtScrollArrow,
   XtBar,
   XtLine,
+  XtChart,
   XtPie,
   XtMulti,
   XtPage,
   XtSelectTree,
   XtUpload,
   XtTransferTree,
-  XtFormSchema
+  XtFormSchema,
+  XtFlow
 }

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);
+}

package/src/styles/theme/index.scss

@@ -7,5 +7,4 @@
 @import './border-radius.scss';
 @import './shadows.scss';
 @import './transitions.scss';
-@import './dark-variables.scss';
 @import './component-variables.scss';