xt-element-ui 2.1.21 → 2.1.61

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

@@ -1,109 +1,182 @@
 <template>
-  <el-container class="page-container">
-    <el-container class="page-main">
-      <el-header v-if="$slots.header && showHeader" ref="header" height="" :class="{'page-header':$slots.aside}">
+  <div
+    class="xt-page-container"
+    :class="containerClass"
+    :style="rootCssVars"
+  >
+    <!-- 主体左右容器 -->
+    <el-container class="xt-page-main-wrap">
+      <!-- 顶部Header -->
+      <el-header
+        v-if="$slots.header && showHeader"
+        ref="header"
+        class="xt-page-header"
+        :class="headerClass"
+      >
         <slot name="header" />
       </el-header>
-      <el-main ref="main" style="padding: 0;">
-        <slot :tableHeight="calcHeight - tableBorderHeight" />
+
+      <!-- 主内容区域 -->
+      <el-main ref="main" class="xt-page-main" :class="mainClass">
+        <slot :table-height="tableContentHeight" />
       </el-main>
-      <el-footer v-if="$slots.footer && showFooter" ref="footer" height="">
+
+      <!-- 底部Footer -->
+      <el-footer
+        v-if="$slots.footer && showFooter"
+        ref="footer"
+        class="xt-page-footer"
+        :class="footerClass"
+      >
         <slot name="footer" />
       </el-footer>
     </el-container>
-    <el-aside class="page-aside" v-if="$slots.aside && showAside" :width="asideWidth" ref="aside">
+
+    <!-- 侧边栏Aside -->
+    <el-aside
+      v-if="$slots.aside && showAside"
+      ref="aside"
+      class="xt-page-aside"
+      :class="asideClass"
+      :width="asideWidth"
+    >
       <slot name="aside" />
     </el-aside>
+
+    <!-- 弹窗插槽 -->
     <slot name="dialog" />
-  </el-container>
+  </div>
 </template>
+
 <script>
 export default {
-  name: "XtPage",
+  name: 'XtPage',
   props: {
+    // 结构显隐控制（布局逻辑类Props，仅保留这类）
     showHeader: { type: Boolean, default: true },
     showFooter: { type: Boolean, default: true },
     showAside: { type: Boolean, default: true },
-    diffHeight: {
-      type: Number,
-      default: 0
-    },
-    minHeight: {
-      type: Number,
-      default: 200
-    },
-    tableBorderHeight: {
-      type: Number,
-      default: 1
-    },
-    asideWidth: {
-      type: String
-    }
+    asideWidth: { type: String, default: '240px' },
+
+    // 表格自适应高度计算专用业务参数
+    diffHeight: { type: Number, default: 0 },
+    minTableHeight: { type: Number, default: 200 },
+    tableBorderHeight: { type: Number, default: 1 },
+
+    // 自定义扩展Class（重度差异化页面使用）
+    containerClass: { type: String, default: '' },
+    headerClass: { type: String, default: '' },
+    mainClass: { type: String, default: '' },
+    asideClass: { type: String, default: '' },
+    footerClass: { type: String, default: '' }
   },
   data() {
     return {
-      tableHeight: 360
+      rawMainHeight: 0,
+      resizeTimer: null
     };
   },
   computed: {
-    calcHeight() {
-      return Math.max(this.tableHeight, this.minHeight);
+    // 根节点注入CSS变量，业务页面外层style可直接覆盖
+    rootCssVars() {
+      return {
+        '--xt-page-aside-width': this.asideWidth
+      };
+    },
+    // 传给插槽表格的可用高度
+    tableContentHeight() {
+      const usable = this.rawMainHeight - this.diffHeight - this.tableBorderHeight;
+      return Math.max(usable, this.minTableHeight);
     }
   },
   mounted() {
-    this.$nextTick(() => {
-      // 表格高度自适应浏览器大小
-      this.doLayout();
-      window.onresize = () => {
-        this.doLayout();
-      };
-    });
+    this.$nextTick(() => this.calcMainHeight());
+    // 防抖监听窗口缩放
+    window.addEventListener('resize', this.handleResize);
+  },
+  beforeDestroy() {
+    // 销毁解绑，防止内存泄漏
+    clearTimeout(this.resizeTimer);
+    window.removeEventListener('resize', this.handleResize);
   },
   methods: {
-    doLayout() {
-      // 多减去1 解决高度相等时 出现滚动条问题
-      if (this.$refs.main) {
-        this.tableHeight = this.$refs.main.$el.getBoundingClientRect().height - (this.diffHeight) - this.tableBorderHeight;
-      } else {
-      }
+    // 防抖封装
+    handleResize() {
+      clearTimeout(this.resizeTimer);
+      this.resizeTimer = setTimeout(() => {
+        this.calcMainHeight();
+      }, 120);
+    },
+    // 计算main可视高度
+    calcMainHeight() {
+      if (!this.$refs.main || !this.$refs.main.$el) return;
+      const rect = this.$refs.main.$el.getBoundingClientRect();
+      this.rawMainHeight = rect.height;
     }
   }
 };
 </script>
-<style scoped lang="scss">
-.el-main {
-  padding: 0;
-  background: #fff;
-  .formBox {
-    background: #f0f0f2;
-  }
-}
-.el-footer{
-  border-top: 1px solid #f0f0f2;
-  padding: 5px 0;
-}
-.el-header{
-  padding: 0;
-}
-.el-aside {
-  background-color: #fff;
-  margin-left: 10px;
-  height: 100%;
-  padding: 0;
-  border: 1px solid #eee;
-  margin-bottom: 0;
-  overflow-x: hidden;
-}
-.page-container{
-  padding: 20px;
+
+<style lang="scss" scoped>
+.xt-page-container {
+  // 全局默认样式变量（统一维护，全局:root可覆盖）
+  --xt-page-container-padding: 20px;
+  --xt-page-container-bg: #f0f0f2;
+
+  --xt-header-padding: 0;
+  --xt-header-bg: #ffffff;
+  --xt-header-border: none;
+
+  --xt-main-padding: 0;
+  --xt-main-bg: #ffffff;
+
+  --xt-footer-padding: 5px 0;
+  --xt-footer-border-top: 1px solid #f0f0f2;
+
+  --xt-aside-margin-left: 10px;
+  --xt-aside-bg: #ffffff;
+  --xt-aside-border: 1px solid #eeeeee;
+  --xt-aside-padding: 0;
+  --xt-aside-overflow-x: hidden;
+
+  display: flex;
   height: 100%;
-  background: #f0f0f2;
-}
-.page-header{
-  padding: 10px 10px 0;
-  background: #fff;
-}
-.page-main{
-  padding: 0;
+  padding: var(--xt-page-container-padding);
+  background: var(--xt-page-container-bg);
+  gap: var(--xt-page-aside-gap, 0);
+
+  .xt-page-main-wrap {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .xt-page-header {
+    padding: var(--xt-header-padding);
+    background: var(--xt-header-bg);
+    border: var(--xt-header-border);
+  }
+
+  .xt-page-main {
+    flex: 1;
+    padding: var(--xt-main-padding);
+    background: var(--xt-main-bg);
+    overflow: auto;
+  }
+
+  .xt-page-footer {
+    padding: var(--xt-footer-padding);
+    border-top: var(--xt-footer-border-top);
+  }
+
+  .xt-page-aside {
+    margin-left: var(--xt-aside-margin-left);
+    background: var(--xt-aside-bg);
+    border: var(--xt-aside-border);
+    padding: var(--xt-aside-padding);
+    height: 100%;
+    overflow-x: var(--xt-aside-overflow-x);
+  }
 }
-</style>
+</style>

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

@@ -103,17 +103,3 @@
   opacity: 0;
 }
 
-[data-theme='dark'], html.dark {
-  .xt-progress__bar {
-    background: $xt-dark-color-border;
-  }
-  
-  .xt-progress__bar-text,
-  .xt-progress__text {
-    color: $xt-dark-color-text-secondary;
-  }
-  
-  .xt-progress__circle-percent {
-    color: $xt-dark-color-text-primary;
-  }
-}

package/src/components/xt-step-price/style/index.scss

@@ -2,10 +2,6 @@
 
 .xt-step-price {
   padding: 12px 16px;
-  background-color: var(--xt-fill-color-blank, #ffffff);
-  border: 1px solid var(--xt-border-color-lighter, #ebeef5);
-  border-radius: var(--xt-border-radius-small, 4px);
-
   &__header {
     display: flex;
     align-items: center;

package/src/components/xt-step-price-item/index.vue

@@ -42,7 +42,7 @@
 
     <xt-button
       v-if="!disabled && removable && itemsLength > 1"
-      text
+      type="text"
       icon="el-icon-delete"
       class="xt-step-price-item__delete"
       @click="onDelete"

package/src/components/xt-table/XtTableCell.vue

@@ -5,7 +5,7 @@ export default {
   props: {
     row: Object,
     index: Number,
-    formatter: Function,
+    render: Function,
     column: { type: Object, default: null }
   },
   render: (h, ctx) => {
@@ -15,7 +15,7 @@ export default {
     }
     if (ctx.props.column) params.column = ctx.props.column
     const isVnode = (it) => it !== null && it !== undefined && typeof it === 'object' && it.hasOwnProperty('componentOptions')
-    const renderNode = ctx.props.formatter(h, params)
+    const renderNode = ctx.props.render(h, params)
     if (renderNode === null || renderNode === undefined || renderNode === '') return h('span', '')
     return isVnode(renderNode) ? renderNode : h('span', String(renderNode))
   }

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

@@ -51,12 +51,11 @@
           >
             <template v-for="child in col.children">
               <el-table-column :key="child._key" v-bind="getColumnProps(child)">
-                <template v-if="child.render" v-slot="scope">{{ child.render(scope) }}</template>
-                <template v-else-if="child.formatter" v-slot="scope">
+                <template v-if="child.render" v-slot="scope">
                   <XtTableCell
                     :row="scope.row"
                     :index="scope.$index"
-                    :formatter="child.formatter"
+                    :render="child.render"
                     :column="child"
                   />
                 </template>
@@ -72,12 +71,11 @@
             </template>
           </el-table-column>
           <el-table-column v-else :key="col._key" v-bind="getColumnProps(col)">
-            <template v-if="col.render" v-slot="scope">{{ col.render(scope) }}</template>
-            <template v-else-if="col.formatter" v-slot="scope">
+            <template v-if="col.render" v-slot="scope">
               <XtTableCell
                 :row="scope.row"
                 :index="scope.$index"
-                :formatter="col.formatter"
+                :render="col.render"
                 :column="col"
               />
             </template>
@@ -125,6 +123,8 @@ export default {
     // 排序配置
     sortGroup: { type: Boolean, default: false },
     defaultSort: { type: Object, default: null },
+    // 过滤配置
+    filterMethod: { type: Function, default: null },
     title: { type: String, default: '' },
     height: { type: [Number, String], default: null },
     maxHeight: { type: [Number, String], default: null },
@@ -168,15 +168,22 @@ export default {
     // 排序后的数据
     sortedTableData() {
       if (!this.tableData.length) return []
-      if (!this.sortProp || !this.sortOrder) return [...this.tableData]
+
+      let data = [...this.tableData]
+
+      if (typeof this.filterMethod === 'function') {
+        data = data.filter(this.filterMethod)
+      }
+
+      if (!this.sortProp || !this.sortOrder) return data
 
       const order = this.sortOrder === 'ascending' ? 1 : -1
       const sortFn = this.resolveSortMethod(this.sortProp)
 
       if (this.sortGroup && this.groupColumns.length) {
-        return this.groupSort([...this.tableData], sortFn, order)
+        return this.groupSort(data, sortFn, order)
       }
-      return [...this.tableData].sort((a, b) => sortFn(a, b) * order)
+      return data.sort((a, b) => sortFn(a, b) * order)
     },
 
     // 处理小计、总计后的最终数据
@@ -418,7 +425,7 @@ export default {
 
     // ========== 列处理 ==========
     getColumnProps(col) {
-      const { _key, children, render, formatter, slot, sortMethod, ...props } = col
+      const { _key, children, render, slot, sortMethod, ...props } = col
       return props
     },
 

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

@@ -155,43 +155,3 @@
   opacity: 0;
   transform: translateY(-10px);
 }
-
-[data-theme='dark'], html.dark {
-  .xt-tabs__header {
-    border-color: $xt-dark-color-border;
-  }
-  
-  .xt-tabs--card .xt-tabs__header {
-    background: $xt-dark-color-bg-secondary;
-  }
-  
-  .xt-tabs--card .xt-tabs__nav-item--active {
-    background: $xt-dark-color-bg-primary;
-    border-color: $xt-dark-color-border;
-    border-bottom-color: $xt-dark-color-bg-primary;
-  }
-  
-  .xt-tabs--left .xt-tabs__header {
-    border-color: $xt-dark-color-border;
-  }
-  
-  .xt-tabs--right .xt-tabs__header {
-    border-color: $xt-dark-color-border;
-  }
-  
-  .xt-tabs__nav-item {
-    color: $xt-dark-color-text-secondary;
-  }
-  
-  .xt-tabs__nav-item:hover {
-    color: $xt-dark-color-primary;
-  }
-  
-  .xt-tabs__nav-item--active {
-    color: $xt-dark-color-primary;
-  }
-  
-  .xt-tabs--card .xt-tabs__content {
-    border-color: $xt-dark-color-border;
-  }
-}

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

@@ -20,11 +20,17 @@
       :style="customStyle"
       @mouseenter="handleMouseEnter"
     >
-      <slot name="prefix">{{ prefix }}</slot>
+      <template v-if="$slots.prefix">
+        <slot name="prefix"></slot>
+      </template>
+      <template v-else-if="prefix">{{ prefix }}</template>
       <slot>
         <template v-if="formattedValue !== undefined">{{ formattedValue }}</template>
       </slot>
-      <slot name="suffix">{{ suffix }}</slot> 
+      <template v-if="$slots.suffix">
+        <slot name="suffix"></slot>
+      </template>
+      <template v-else-if="suffix">{{ suffix }}</template>
     </span>
   </el-tooltip>
   <span 
@@ -41,11 +47,17 @@
     ]"
     :style="customStyle"
   >
-    <slot name="prefix">{{ prefix }}</slot>
+    <template v-if="$slots.prefix">
+      <slot name="prefix"></slot>
+    </template>
+    <template v-else-if="prefix">{{ prefix }}</template>
     <slot>
       <template v-if="formattedValue !== undefined">{{ formattedValue }}</template>
     </slot>
-    <slot name="suffix">{{ suffix }}</slot> 
+    <template v-if="$slots.suffix">
+      <slot name="suffix"></slot>
+    </template>
+    <template v-else-if="suffix">{{ suffix }}</template>
   </span>
 </template>
 

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

@@ -93,18 +93,3 @@
   }
 }
 
-// 暗色主题
-[data-theme='dark'], html.dark {
-  .xt-text--primary {
-    color: $xt-dark-color-primary;
-  }
-  .xt-text--success {
-    color: $xt-dark-color-success;
-  }
-  .xt-text--warning {
-    color: $xt-dark-color-warning;
-  }
-  .xt-text--danger {
-    color: $xt-dark-color-danger;
-  }
-}

package/src/components/xt-transfer-tree/index.js

@@ -0,0 +1,8 @@
+import XtTransferTree from './index.vue'
+
+XtTransferTree.install = function (Vue) {
+  Vue.component(XtTransferTree.name, XtTransferTree)
+}
+
+export default XtTransferTree
+export { XtTransferTree }