xt-element-ui 2.0.4 → 2.1.0

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

@@ -1,15 +1,15 @@
 <template>
-  <div class="ex-table-wrapper">
+  <div class="xt-table-wrapper">
     <!-- 标题栏 / 工具栏 -->
-    <div class="ex-table-header" v-if="title || $slots.toolbar">
-      <span class="ex-table-title" v-if="title">{{ title }}</span>
-      <div class="ex-table-toolbar">
+    <div class="xt-table-header" v-if="title || $slots.toolbar">
+      <span class="xt-table-title" v-if="title">{{ title }}</span>
+      <div class="xt-table-toolbar">
         <slot name="toolbar"></slot>
       </div>
     </div>
 
     <!-- 主体表格：单 Table + 内置虚拟滚动（核心改造） -->
-    <div class="ex-table-body">
+    <div class="xt-table-body">
       <VirtualElTable
         ref="table"
         :data="processedTableData"
@@ -24,7 +24,7 @@
         v-on="$listeners"
         @selection-change="handleSelectionChange"
         @sort-change="handleSortChange"
-        class="ex-table"
+        class="xt-table"
       >
         <!-- 选择列 -->
         <el-table-column
@@ -95,7 +95,7 @@
     </div>
 
     <!-- 分页 -->
-    <div class="ex-table-footer" v-if="showPagination">
+    <div class="xt-table-footer" v-if="showPagination">
       <el-pagination
         :current-page="pagination.pageNum"
         :page-size="pagination.pageSize"
@@ -122,6 +122,9 @@ export default {
     tableData: { type: Array, default: () => [] },
     columns: { type: Array, default: () => [] },
     groupColumns: { type: Array, default: () => [] },
+    // 排序配置
+    sortGroup: { type: Boolean, default: false },
+    defaultSort: { type: Object, default: null },
     title: { type: String, default: '' },
     height: { type: [Number, String], default: null },
     maxHeight: { type: [Number, String], default: null },
@@ -144,7 +147,10 @@ export default {
     return {
       spanCache: {},
       flattenedColumnsCache: [],
-      selectedRows: []
+      selectedRows: [],
+      // 排序状态
+      sortProp: null,
+      sortOrder: null
     }
   },
 
@@ -159,10 +165,24 @@ export default {
       return this.height ? undefined : this.maxHeight || undefined
     },
 
+    // 排序后的数据
+    sortedTableData() {
+      if (!this.tableData.length) return []
+      if (!this.sortProp || !this.sortOrder) return [...this.tableData]
+
+      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.tableData].sort((a, b) => sortFn(a, b) * order)
+    },
+
     // 处理小计、总计后的最终数据
     processedTableData() {
-      if (!this.tableData.length) return []
-      let data = [...this.tableData]
+      if (!this.sortedTableData.length) return []
+      let data = [...this.sortedTableData]
       const hasSubtotal = this.subtotalConfig && this.subtotalConfig.enabled
       const hasTotal = this.totalConfig && this.totalConfig.enabled
 
@@ -225,6 +245,25 @@ export default {
         this.spanCache = {}
       },
       deep: true
+    },
+    defaultSort: {
+      handler(val) {
+        if (val && val.prop) {
+          this.sortProp = val.prop
+          this.sortOrder = val.order || 'ascending'
+        }
+      },
+      immediate: false
+    },
+    sortProp() {
+      this.spanCache = {}
+    }
+  },
+
+  created() {
+    if (this.defaultSort && this.defaultSort.prop) {
+      this.sortProp = this.defaultSort.prop
+      this.sortOrder = this.defaultSort.order || 'ascending'
     }
   },
 
@@ -239,6 +278,52 @@ export default {
   },
 
   methods: {
+    // ========== 排序逻辑 ==========
+    resolveSortMethod(prop) {
+      const col = this.findColumnByProp(prop)
+      if (col && typeof col.sortMethod === 'function') {
+        return col.sortMethod
+      }
+      return (a, b) => {
+        const va = a[prop]
+        const vb = b[prop]
+        if (va == null && vb == null) return 0
+        if (va == null) return -1
+        if (vb == null) return 1
+        if (typeof va === 'number' && typeof vb === 'number') return va - vb
+        return String(va).localeCompare(String(vb), undefined, { numeric: true })
+      }
+    },
+
+    findColumnByProp(prop) {
+      for (const col of this.columns) {
+        if (col.children && col.children.length) {
+          for (const child of col.children) {
+            if (child.prop === prop) return child
+          }
+        } else if (col.prop === prop) {
+          return col
+        }
+      }
+      return null
+    },
+
+    groupSort(data, sortFn, order) {
+      const groups = {}
+      data.forEach(row => {
+        const key = this.groupColumns.map(f => row[f] == null ? '' : String(row[f])).join('|||')
+        if (!groups[key]) groups[key] = []
+        groups[key].push(row)
+      })
+      const result = []
+      Object.keys(groups).sort().forEach(key => {
+        const groupRows = groups[key]
+        groupRows.sort((a, b) => sortFn(a, b) * order)
+        result.push(...groupRows)
+      })
+      return result
+    },
+
     handleResize() {
       this.$nextTick(() => {
         this.$refs.table && this.$refs.table.doLayout()
@@ -326,14 +411,14 @@ export default {
     },
 
     getRowClassName({ row }) {
-      if (row._rowType === 'subtotal') return 'ex-table-row-subtotal'
-      if (row._rowType === 'total') return 'ex-table-row-total'
+      if (row._rowType === 'subtotal') return 'xt-table-row-subtotal'
+      if (row._rowType === 'total') return 'xt-table-row-total'
       return ''
     },
 
     // ========== 列处理 ==========
     getColumnProps(col) {
-      const { _key, children, render, formatter, slot, ...props } = col
+      const { _key, children, render, formatter, slot, sortMethod, ...props } = col
       return props
     },
 
@@ -399,6 +484,8 @@ export default {
       this.$emit('selection-change', this.selectedRows)
     },
     handleSortChange(info) {
+      this.sortProp = info.prop
+      this.sortOrder = info.order
       this.$emit('sort-change', info)
     },
     handleSizeChange(size) {
@@ -416,6 +503,15 @@ export default {
       this.$refs.table && this.$refs.table.clearSelection()
       this.selectedRows = []
     },
+    clearSort() {
+      this.sortProp = null
+      this.sortOrder = null
+      this.$nextTick(() => {
+        if (this.$refs.table && this.$refs.table.$refs.innerTable) {
+          this.$refs.table.$refs.innerTable.clearSort()
+        }
+      })
+    },
     toggleRowSelection(row, selected) {
       this.$refs.table && this.$refs.table.toggleRowSelection(row, selected)
     },
@@ -432,26 +528,26 @@ export default {
 }
 </script>
 <style scoped>
-.ex-table-wrapper {
+.xt-table-wrapper {
   width: 100%;
 }
 
 /* 表头栏 */
-.ex-table-header {
+.xt-table-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 0;
   margin-bottom: 8px;
 }
-.ex-table-title {
+.xt-table-title {
   font-size: 16px;
   font-weight: 600;
   color: #303133;
   position: relative;
   padding-left: 12px;
 }
-.ex-table-title::before {
+.xt-table-title::before {
   content: '';
   position: absolute;
   left: 0;
@@ -462,40 +558,40 @@ export default {
   background: #409eff;
   border-radius: 2px;
 }
-.ex-table-toolbar {
+.xt-table-toolbar {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-.ex-table-body {
+.xt-table-body {
   position: relative;
   z-index: 1;
 }
 
 /* 分页区域 */
-.ex-table-footer {
+.xt-table-footer {
   display: flex;
   justify-content: flex-end;
   padding: 16px 0;
 }
 
 /* ========== 小计/合计行样式 ========== */
-::v-deep .ex-table-row-subtotal {
+::v-deep .xt-table-row-subtotal {
   background-color: #f5f7fa;
   font-weight: 600;
   color: #303133;
 }
-::v-deep .ex-table-row-total {
+::v-deep .xt-table-row-total {
   background-color: #e8eaed;
   font-weight: 700;
   color: #303133;
   border-top: 2px solid #c0c4cc;
 }
-::v-deep .ex-table-row-subtotal:hover > td {
+::v-deep .xt-table-row-subtotal:hover > td {
   background-color: #ebeef5 !important;
 }
-::v-deep .ex-table-row-total:hover > td {
+::v-deep .xt-table-row-total:hover > td {
   background-color: #dcdfe6 !important;
 }
 

package/src/index.js

@@ -37,6 +37,7 @@ import XtDatePicker from './components/xt-date-picker'
 import XtChart from './components/xt-chart'  // XtChart 组件（基于 ECharts 封装）
 import XtIcon from './components/xt-icon'    // XtIcon 组件（支持 el-icon / svg / 自定义字体）
 import XtTable from './components/xt-table'  // XtTable 组件（基于 ElementUI Table 封装）
+import XtList from './components/xt-list'  // XtList 组件（卡片列表）
 import XtScrollArrow from './components/xt-scroll-arrow'
 import XtBar from './components/xt-chart/XtBar.vue'
 import XtLine from './components/xt-chart/XtLine.vue'
@@ -69,6 +70,7 @@ const components = [
   XtChart,
   XtIcon,
   XtTable,
+  XtList,
   XtScrollArrow,
   XtBar,
   XtLine,
@@ -146,6 +148,7 @@ export default {
   XtDatePicker,
   XtIcon,
   XtTable,
+  XtList,
   XtScrollArrow,
   XtBar,
   XtLine,

package/src/components/xt-card-item/style/index copy.scss

@@ -1,72 +0,0 @@
-@import '../../../styles/variables.scss';
-
-.xt-card-item {
-  --xt-card-item-color: var(--xt-color-primary, #1890ff);
-  
-  min-height: var(--xt-card-item-min-height, 40px);
-}
-
-.xt-card-item + .xt-card-item {
-  margin-top: var(--xt-card-item-gap, 10px);
-}
-
-.xt-card-item.is-border {
-  border-right: var(--xt-card-item-border-width, 3px) solid transparent;
-  background-color: var(--xt-color-bg-secondary, #f5f7fa);
-}
-
-.xt-card-item.is-border.is-primary {
-  border-right-color: var(--xt-card-item-color);
-}
-
-.xt-card-item.is-border.is-primary .item__value .value {
-  color: var(--xt-card-item-color);
-}
-
-.xt-card-item.is-border.is-success {
-  border-right-color: var(--xt-color-success, #67C23A);
-}
-
-.xt-card-item.is-border.is-success .item__value .value {
-  color: var(--xt-color-success, #67C23A);
-}
-
-.xt-card-item.is-border.is-warning {
-  border-right-color: var(--xt-color-warning, #E6A23C);
-}
-
-.xt-card-item.is-border.is-warning .item__value .value {
-  color: var(--xt-color-warning, #E6A23C);
-}
-
-.xt-card-item.is-border.is-danger {
-  border-right-color: var(--xt-color-danger, #F56C6C);
-}
-
-.xt-card-item.is-border.is-danger .item__value .value {
-  color: var(--xt-color-danger, #F56C6C);
-}
-
-.xt-card-item .item__value {
-  padding-right: 10px;
-}
-
-.xt-card-item .item__value .value {
-  font-weight: 600;
-  font-size: var(--xt-font-size-base, 14px);
-}
-
-.xt-card-item .item__value .unit {
-  font-size: var(--xt-font-size-small, 13px);
-  color: var(--xt-color-text-secondary, #909399);
-}
-
-.xt-card-item .item__label {
-  padding-left: 10px;
-  color: var(--xt-color-text-secondary, #909399);
-}
-
-.xt-card-item .item__unit {
-  padding-left: 5px;
-  color: var(--xt-color-text-secondary, #909399);
-}