xt-element-ui 2.1.6 → 2.1.7

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-tab-pane/index.js

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

package/src/components/{xt-tabs/TabPane.vue → xt-tab-pane/index.vue}

@@ -15,6 +15,14 @@ export default {
     label: {
       type: String,
       default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    closable: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {
@@ -24,7 +32,12 @@ export default {
   },
   mounted() {
     if (this.$parent && typeof this.$parent.addPane === 'function') {
-      this.$parent.addPane({ name: this.name, label: this.label })
+      this.$parent.addPane({ 
+        name: this.name, 
+        label: this.label,
+        disabled: this.disabled,
+        closable: this.closable
+      })
     }
   },
   beforeDestroy() {

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>
@@ -427,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/index.js

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