xt-element-ui 1.0.9 → 1.1.1

package/src/components/table/processor.js

@@ -0,0 +1,380 @@
+// utils/tableDataProcessor.js
+
+/**
+ * 主函数：为表格数据添加小计行
+ * @param {Array} data - 原始数据
+ * @param {Object} options - 配置选项
+ * @returns {Array} 加工后的数据
+ */
+export function enhanceWithSubtotal(data, options = {}) {
+  const defaultOptions = {
+    groupFields: [], // 分组字段，如 ['region', 'province', 'city']
+    sumFields: [], // 求和字段，如 ['sales', 'quantity']
+    avgFields: [], // 平均字段，如 ['price']
+    countFields: [], // 计数字段，如 ['product']
+    subtotalLabel: "小计", // 小计行标签
+    totalLabel: "总计", // 总计行标签
+    showTotal: true, // 是否显示总计
+    sortData: true, // 是否自动排序
+    formatNumbers: true, // 是否格式化数字
+    excludeSubtotalRows: false, // 是否排除某些行不参与小计
+    excludeCondition: null, // 排除条件函数
+    customCalculations: {} // 自定义计算函数
+  };
+
+  const config = { ...defaultOptions, ...options };
+
+  // 数据验证
+  if (!Array.isArray(data) || data.length === 0) {
+    return data;
+  }
+
+  if (config.groupFields.length === 0) {
+    console.warn("未指定分组字段，将返回原始数据");
+    return data;
+  }
+
+  // 1. 数据预处理
+  let processedData = preprocessData(data, config);
+
+  // 2. 计算并插入小计行
+  processedData = calculateAndInsertSubtotals(processedData, config);
+
+  // 3. 后处理（格式化等）
+  processedData = postprocessData(processedData, config);
+
+  return processedData;
+}
+
+/**
+   * 数据预处理
+   */
+function preprocessData(data, config) {
+  let result = [...data];
+
+  // 标记排除的行
+  if (config.excludeCondition) {
+    result = result.map(row => ({
+      ...row,
+      _excludedFromSubtotal: config.excludeCondition(row)
+    }));
+  }
+
+  // 数据排序
+  if (config.sortData) {
+    result.sort((a, b) => {
+      for (const field of config.groupFields) {
+        const aVal = String(a[field] || "");
+        const bVal = String(b[field] || "");
+        if (aVal !== bVal) {
+          return aVal.localeCompare(bVal);
+        }
+      }
+      return 0;
+    });
+  }
+
+  return result;
+}
+
+/**
+   * 计算并插入小计行
+   */
+function calculateAndInsertSubtotals(data, config) {
+  const result = [];
+  const allSumFields = [...config.sumFields, ...config.avgFields, ...config.countFields];
+
+  // 存储各级分组的小计信息
+  const subtotalInfo = Array(config.groupFields.length).fill().map(() => ({
+    startIndex: 0,
+    currentValue: null,
+    subtotalRows: []
+  }));
+
+  for (let i = 0; i <= data.length; i++) {
+    const row = i < data.length ? data[i] : null;
+
+    // 检查每一级分组是否发生变化
+    for (let level = config.groupFields.length - 1; level >= 0; level--) {
+      const field = config.groupFields[level];
+      const currentValue = row ? row[field] : null;
+      const info = subtotalInfo[level];
+
+      // 如果是数据末尾或分组值变化
+      if (row === null || currentValue !== info.currentValue) {
+        // 如果存在前一个分组，计算并插入小计
+        if (info.currentValue !== null) {
+          const startPos = info.startIndex;
+          const endPos = i;
+          const groupRows = data.slice(startPos, endPos);
+
+          // 只计算未排除的行
+          const validRows = config.excludeSubtotalRows
+            ? groupRows.filter(r => !r._excludedFromSubtotal)
+            : groupRows;
+
+          if (validRows.length > 0) {
+            const subtotalRow = createSubtotalRow(
+              info.currentValue,
+              level,
+              validRows,
+              config,
+              allSumFields
+            );
+
+            // 记录小计行插入位置
+            info.subtotalRows.push({
+              row: subtotalRow,
+              insertAfter: endPos - 1,
+              level
+            });
+          }
+        }
+
+        // 更新分组信息
+        info.currentValue = currentValue;
+        info.startIndex = i;
+      }
+    }
+
+    // 添加原始数据行
+    if (row) {
+      result.push(row);
+    }
+  }
+
+  // 插入小计行（从最深层开始）
+  for (let level = config.groupFields.length - 1; level >= 0; level--) {
+    const info = subtotalInfo[level];
+    info.subtotalRows.reverse().forEach(({ row, insertAfter }) => {
+      // 找到插入位置（考虑已插入的小计行）
+      const actualPosition = findInsertPosition(result, insertAfter);
+      result.splice(actualPosition + 1, 0, row);
+    });
+  }
+
+  // 添加总计行
+  if (config.showTotal) {
+    const validRows = config.excludeSubtotalRows
+      ? data.filter(row => !row._excludedFromSubtotal)
+      : data;
+
+    const totalRow = createTotalRow(validRows, config, allSumFields);
+    result.push(totalRow);
+  }
+
+  return result;
+}
+
+/**
+   * 创建小计行
+   */
+function createSubtotalRow(groupValue, level, groupRows, config, allSumFields) {
+  const subtotalRow = {
+    _isSubtotal: true,
+    _subtotalLevel: level,
+    _rowType: "subtotal",
+    _groupValue: groupValue
+  };
+
+  // 设置分组字段
+  config.groupFields.forEach((field, index) => {
+    if (index === level) {
+      subtotalRow[field] = `${config.subtotalLabel}`;
+    } else if (index < level) {
+      subtotalRow[field] = groupRows[0][field];
+    } else {
+      subtotalRow[field] = "";
+    }
+  });
+
+  // 计算数值
+  calculateRowValues(subtotalRow, groupRows, config, allSumFields);
+
+  return subtotalRow;
+}
+
+/**
+   * 创建总计行
+   */
+function createTotalRow(allRows, config, allSumFields) {
+  const totalRow = {
+    _isSubtotal: true,
+    _isTotal: true,
+    _rowType: "total",
+    _subtotalLevel: -1
+  };
+
+  // 设置分组字段
+  if (config.groupFields.length > 0) {
+    totalRow[config.groupFields[0]] = config.totalLabel;
+    for (let i = 1; i < config.groupFields.length; i++) {
+      totalRow[config.groupFields[i]] = "";
+    }
+  }
+
+  // 计算总计数值
+  calculateRowValues(totalRow, allRows, config, allSumFields);
+
+  return totalRow;
+}
+
+/**
+   * 计算行数值（求和、平均等）
+   */
+function calculateRowValues(targetRow, sourceRows, config, allSumFields) {
+  // 求和字段
+  config.sumFields.forEach(field => {
+    const sum = sourceRows.reduce((total, row) => {
+      const value = parseFloat(row[field]);
+      return total + (isNaN(value) ? 0 : value);
+    }, 0);
+
+    targetRow[field] = config.formatNumbers ? formatNumber(sum) : sum;
+  });
+
+  // 平均字段
+  config.avgFields.forEach(field => {
+    const sum = sourceRows.reduce((total, row) => {
+      const value = parseFloat(row[field]);
+      return total + (isNaN(value) ? 0 : value);
+    }, 0);
+
+    const avg = sourceRows.length > 0 ? sum / sourceRows.length : 0;
+    targetRow[field] = config.formatNumbers ? formatNumber(avg) : avg;
+  });
+
+  // 计数字段（去重计数）
+  config.countFields.forEach(field => {
+    const uniqueValues = new Set(sourceRows.map(row => row[field]).filter(v => v != null));
+    targetRow[field] = uniqueValues.size;
+  });
+
+  // 自定义计算
+  Object.entries(config.customCalculations).forEach(([field, calculator]) => {
+    if (typeof calculator === "function") {
+      targetRow[field] = calculator(sourceRows, field);
+    }
+  });
+}
+
+/**
+   * 格式化数字
+   */
+function formatNumber(num) {
+  if (typeof num !== "number" || isNaN(num)) return num;
+
+  // 整数不加小数位
+  if (Number.isInteger(num)) {
+    return num.toLocaleString();
+  }
+
+  // 小数保留两位
+  return num.toLocaleString("zh-CN", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  });
+}
+
+/**
+   * 查找插入位置（考虑已插入的行）
+   */
+function findInsertPosition(data, originalIndex) {
+  const currentIndex = originalIndex;
+  let insertedRowsCount = 0;
+
+  // 统计已插入的小计行数量
+  for (let i = 0; i <= originalIndex; i++) {
+    if (data[i] && data[i]._isSubtotal && !data[i]._isTotal) {
+      insertedRowsCount++;
+    }
+  }
+
+  return originalIndex + insertedRowsCount;
+}
+
+/**
+   * 数据后处理
+   */
+function postprocessData(data, config) {
+  return data.map(row => {
+    // 为小计行和总计行添加样式类
+    if (row._isSubtotal) {
+      return {
+        ...row,
+        _rowClass: row._isTotal ? "total-row" : `subtotal-level-${row._subtotalLevel}`
+      };
+    }
+    return row;
+  });
+}
+
+/**
+   * 快速使用函数：简单小计
+   */
+export function quickSubtotal(data, groupBy, sumFields, options = {}) {
+  return enhanceWithSubtotal(data, {
+    groupFields: Array.isArray(groupBy) ? groupBy : [groupBy],
+    sumFields: Array.isArray(sumFields) ? sumFields : [sumFields],
+    ...options
+  });
+}
+
+/**
+   * 计算分组统计信息（不插入行）
+   */
+export function calculateGroupStats(data, groupFields, calcFields) {
+  const stats = {};
+
+  function processLevel(rows, level = 0, path = []) {
+    if (level >= groupFields.length) return;
+
+    const field = groupFields[level];
+    const groups = {};
+
+    rows.forEach(row => {
+      const key = row[field] || "";
+      if (!groups[key]) groups[key] = [];
+      groups[key].push(row);
+    });
+
+    Object.entries(groups).forEach(([value, groupRows]) => {
+      const currentPath = [...path, { field, value }];
+      const pathKey = currentPath.map(p => `${p.field}:${p.value}`).join("|");
+
+      // 计算统计信息
+      const calculations = {};
+      calcFields.forEach(calcField => {
+        if (typeof calcField === "string") {
+          calculations[calcField] = groupRows.reduce((sum, row) =>
+            sum + (parseFloat(row[calcField]) || 0), 0);
+        } else if (typeof calcField === "object") {
+          // 支持复杂计算配置
+          const { field: calcFieldName, type = "sum" } = calcField;
+          if (type === "sum") {
+            calculations[calcFieldName] = groupRows.reduce((sum, row) =>
+              sum + (parseFloat(row[calcFieldName]) || 0), 0);
+          } else if (type === "avg") {
+            const sum = groupRows.reduce((s, row) => s + (parseFloat(row[calcFieldName]) || 0), 0);
+            calculations[calcFieldName] = groupRows.length > 0 ? sum / groupRows.length : 0;
+          }
+        }
+      });
+
+      stats[pathKey] = {
+        path: currentPath,
+        value,
+        level,
+        count: groupRows.length,
+        calculations,
+        rows: groupRows
+      };
+
+      // 递归处理下一层
+      processLevel(groupRows, level + 1, currentPath);
+    });
+  }
+
+  processLevel(data);
+  return stats;
+}

package/src/components/text/index.js

@@ -0,0 +1,2 @@
+import XtText from './index.vue'
+export default XtText

package/src/components/text/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <span 
+    class="xt-text" 
+    :class="[
+      type ? 'xt-text--' + type : '',
+      { 'xt-text--bold': bold },
+      { 'xt-text--money': money }
+    ]"
+    :style="customStyle"
+  >
+    <slot>
+      <template v-if="money && displayValue !== undefined">{{ displayValue }}</template>
+    </slot>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'XtText',
+  model: {
+    prop: 'value',
+    event: 'input'
+  },
+  props: {
+    type: {
+      type: String,
+      default: '',
+      validator: (val) => ['', 'primary', 'success', 'warning', 'danger'].includes(val)
+    },
+    bold: {
+      type: Boolean,
+      default: false
+    },
+    letterSpacing: {
+      type: [String, Number],
+      default: ''
+    },
+    // 金额格式化相关属性
+    money: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: [Number, String],
+      default: ''
+    },
+    currency: {
+      type: String,
+      default: 'CNY',
+      validator: (val) => ['CNY', 'USD', 'EUR', 'JPY', 'GBP', 'AUD', 'CAD'].includes(val)
+    },
+    decimals: {
+      type: Number,
+      default: 2,
+      validator: (val) => val >= 0 && val <= 10
+    },
+    locale: {
+      type: String,
+      default: 'zh-CN'
+    },
+    showSign: {
+      type: Boolean,
+      default: false
+    },
+    prefix: {
+      type: String,
+      default: ''
+    },
+    suffix: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    customStyle() {
+      const style = {}
+      if (this.letterSpacing) {
+        style.letterSpacing = typeof this.letterSpacing === 'number' ? `${this.letterSpacing}px` : this.letterSpacing
+      }
+      return style
+    },
+    displayValue() {
+      if (!this.money || this.value === '' || this.value === undefined || this.value === null) {
+        return undefined
+      }
+      
+      const numValue = typeof this.value === 'string' ? parseFloat(this.value) : this.value
+      
+      if (isNaN(numValue)) {
+        return this.value
+      }
+      
+      try {
+        const formatter = new Intl.NumberFormat(this.locale, {
+          style: 'currency',
+          currency: this.currency,
+          minimumFractionDigits: this.decimals,
+          maximumFractionDigits: this.decimals,
+          signDisplay: this.showSign ? 'always' : 'auto'
+        })
+        
+        let result = formatter.format(numValue)
+        
+        // 处理前缀和后缀
+        if (this.prefix) {
+          result = this.prefix + result
+        }
+        if (this.suffix) {
+          result = result + this.suffix
+        }
+        
+        return result
+      } catch (e) {
+        return this.value
+      }
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,67 @@
+@import '../../../styles/variables.scss';
+
+// 文字组件
+.xt-text {
+  letter-spacing: $xt-spacing-xs;
+}
+
+// 不同类型文字颜色
+.xt-text--primary {
+  color: var(--xt-color-primary, #1890ff);
+}
+
+.xt-text--success {
+  color: $xt-color-success;
+}
+
+.xt-text--warning {
+  color: $xt-color-warning;
+}
+
+.xt-text--danger {
+  color: $xt-color-danger;
+}
+
+// 粗体
+.xt-text--bold {
+  font-weight: bold;
+}
+
+// 金额样式
+.xt-text--money {
+  font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  
+  &.xt-text--primary {
+    color: var(--xt-color-primary, #1890ff);
+  }
+  
+  &.xt-text--success {
+    color: $xt-color-success;
+  }
+  
+  &.xt-text--warning {
+    color: $xt-color-warning;
+  }
+  
+  &.xt-text--danger {
+    color: $xt-color-danger;
+  }
+}
+
+// 暗色主题
+html[data-theme='dark'] .xt-text--primary {
+}
+
+html[data-theme='dark'] .xt-text--success {
+  color: $xt-dark-color-success;
+}
+
+html[data-theme='dark'] .xt-text--warning {
+  color: $xt-dark-color-warning;
+}
+
+html[data-theme='dark'] .xt-text--danger {
+  color: $xt-dark-color-danger;
+}

package/src/components/upload/index.js

@@ -0,0 +1,2 @@
+import XtUpload from './index.vue'
+export default XtUpload