cloud-web-corejs 1.0.281 → 1.1.0-dev.10

package/src/components/table/plugins/cell-area/index.scss

@@ -0,0 +1,77 @@
+/**
+ * 自研区域选取的高亮样式。
+ *
+ * 高亮是把 class 直接打在 td 上（见同目录 index.js），而不是画绝对定位的遮罩：
+ * 业务表常配 row-config.height: auto + autosize 的 textarea，行高会在输入过程中变化，
+ * 遮罩会漂移；而且有固定列时同一个单元格在 left/main/right 三个 wrapper 里各有一份，
+ * 打 class 一次就能全覆盖。
+ *
+ * 边框走 ::after 伪元素而不是 border，避免占用盒模型把单元格内容挤动。
+ */
+$vxe-cell-area-color: #409eff !default;
+$vxe-cell-area-background-color: rgba(64, 158, 255, 0.12) !default;
+$vxe-cell-area-border-width: 2px !default;
+
+.vxe-table {
+  // 框选过程中禁掉文字选中，否则拖拽会连带选中单元格文本
+  &.drag--range {
+    .vxe-table--main-wrapper,
+    .vxe-table--fixed-left-wrapper,
+    .vxe-table--fixed-right-wrapper {
+      user-select: none;
+
+      * {
+        user-select: none;
+      }
+    }
+  }
+
+  .vxe-body--column {
+    &.col--area,
+    &.col--copy-area {
+      position: relative;
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        pointer-events: none;
+        z-index: 1;
+      }
+    }
+
+    &.col--area {
+      background-color: $vxe-cell-area-background-color;
+    }
+
+    // 只有落在选区边界上的单元格画对应那条边，四条拼起来就是完整矩形
+    &.col--area-t::after {
+      border-top: $vxe-cell-area-border-width solid $vxe-cell-area-color;
+    }
+
+    &.col--area-b::after {
+      border-bottom: $vxe-cell-area-border-width solid $vxe-cell-area-color;
+    }
+
+    &.col--area-l::after {
+      border-left: $vxe-cell-area-border-width solid $vxe-cell-area-color;
+    }
+
+    &.col--area-r::after {
+      border-right: $vxe-cell-area-border-width solid $vxe-cell-area-color;
+    }
+
+    // 锚点格：shift 扩选与方向键移动的基准，不铺底色以示区别
+    &.col--area-active {
+      background-color: transparent;
+    }
+
+    // 复制源：虚线框，粘贴或取消后清除
+    &.col--copy-area::after {
+      border: 1px dashed $vxe-cell-area-color;
+    }
+  }
+}

package/src/components/table/plugins/cell-area/util.js

@@ -0,0 +1,224 @@
+/**
+ * 区域选取插件的纯函数部分：可选列/行的口径、矩形运算、剪贴板 TSV 编解码。
+ * 抽出来是为了能脱离 vxe 实例单测，index.js 只负责跟 vxe 的钩子对接。
+ */
+
+// 这些列没有业务值（复选框/单选/序号/展开），不参与区域选取与复制粘贴
+const NOT_AREA_COLUMN_TYPES = ["checkbox", "radio", "seq", "expand"];
+
+/**
+ * 参与区域选取的列。索引空间以本函数返回的数组为准，
+ * 复制粘贴的列对齐、方向键移动都按这个下标算。
+ */
+export function getAreaColumns(columns, excludeFields) {
+  let excludes = excludeFields || [];
+  return (columns || []).filter((column) => {
+    if (!column) return false;
+    let field = column.property || column.field;
+    if (!field) return false;
+    if (NOT_AREA_COLUMN_TYPES.includes(column.type)) return false;
+    return !excludes.includes(field);
+  });
+}
+
+export function getColumnField(column) {
+  return column ? column.property || column.field : null;
+}
+
+/**
+ * 下标钳制到 [0, size - 1]，size 为 0 时返回 -1 表示无可用格。
+ *
+ * 只接受**算术下标**（锚点 ± 偏移，越界钳回边界是对的，比如在第 0 行按 ↑ 得到 -1 应该停在 0）。
+ * **不要拿 indexOf 的结果喂它** —— 那里的 -1 是"找不到"，钳成 0 会把查找失败
+ * 静默变成"第 0 行"，选区反向铺开。
+ */
+export function clampIndex(index, size) {
+  if (!size || size < 1) return -1;
+  if (index < 0) return 0;
+  if (index > size - 1) return size - 1;
+  return index;
+}
+
+/**
+ * 由锚点与焦点格构造矩形。锚点是 shift 扩选与方向键移动的基准，
+ * 始终保留在区域里，不随 start/end 归一化而丢失。
+ */
+export function buildArea(anchorRow, anchorCol, focusRow, focusCol) {
+  return {
+    anchorRow: anchorRow,
+    anchorCol: anchorCol,
+    focusRow: focusRow,
+    focusCol: focusCol,
+    startRow: Math.min(anchorRow, focusRow),
+    endRow: Math.max(anchorRow, focusRow),
+    startCol: Math.min(anchorCol, focusCol),
+    endCol: Math.max(anchorCol, focusCol),
+  };
+}
+
+/** 折叠成单格 */
+export function buildCellArea(rowIndex, colIndex) {
+  return buildArea(rowIndex, colIndex, rowIndex, colIndex);
+}
+
+/** 以现有锚点扩选到目标格；没有区域时退化为单格 */
+export function extendArea(area, focusRow, focusCol) {
+  if (!area) return buildCellArea(focusRow, focusCol);
+  return buildArea(area.anchorRow, area.anchorCol, focusRow, focusCol);
+}
+
+/**
+ * 方向键移动。extend 为真时移动焦点边（Shift+方向键），
+ * 否则整体折叠成单格移动到新位置。
+ */
+export function moveArea(area, offsetRow, offsetCol, rowSize, colSize, extend) {
+  if (!area) return null;
+  if (extend) {
+    let focusRow = clampIndex(area.focusRow + offsetRow, rowSize);
+    let focusCol = clampIndex(area.focusCol + offsetCol, colSize);
+    return buildArea(area.anchorRow, area.anchorCol, focusRow, focusCol);
+  }
+  let rowIndex = clampIndex(area.anchorRow + offsetRow, rowSize);
+  let colIndex = clampIndex(area.anchorCol + offsetCol, colSize);
+  return buildCellArea(rowIndex, colIndex);
+}
+
+/**
+ * Tab/Enter 的顺序移动：列走到头换行。越界则停在原地。
+ */
+export function moveNextCell(area, isRowFirst, isBack, rowSize, colSize) {
+  if (!area) return null;
+  let rowIndex = area.anchorRow;
+  let colIndex = area.anchorCol;
+  let step = isBack ? -1 : 1;
+  if (isRowFirst) {
+    colIndex += step;
+    if (colIndex > colSize - 1) {
+      colIndex = 0;
+      rowIndex += 1;
+    } else if (colIndex < 0) {
+      colIndex = colSize - 1;
+      rowIndex -= 1;
+    }
+  } else {
+    rowIndex += step;
+  }
+  if (rowIndex < 0 || rowIndex > rowSize - 1) {
+    return area;
+  }
+  return buildCellArea(rowIndex, clampIndex(colIndex, colSize));
+}
+
+/**
+ * 粘贴时需要补几行：从 startRowIndex 起放下 pasteRowSize 行，超出当前行数的部分。
+ */
+export function getIncrementRowSize(startRowIndex, pasteRowSize, rowSize) {
+  let need = startRowIndex + pasteRowSize - rowSize;
+  return need > 0 ? need : 0;
+}
+
+const NEED_QUOTE_RE = /[\t\r\n"]/;
+
+/** 单元格文本 -> 剪贴板片段，按 Excel 约定转义 */
+export function encodeClipCell(value) {
+  let text = value === null || value === undefined ? "" : "" + value;
+  if (NEED_QUOTE_RE.test(text)) {
+    return '"' + text.replace(/"/g, '""') + '"';
+  }
+  return text;
+}
+
+/** 二维数组 -> TSV 文本 */
+export function encodeClipText(matrix) {
+  return (matrix || [])
+    .map((row) => (row || []).map(encodeClipCell).join("\t"))
+    .join("\n");
+}
+
+const HTML_ESCAPE_MAP = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+};
+
+export function escapeClipHtml(value) {
+  let text = value === null || value === undefined ? "" : "" + value;
+  return text.replace(/[&<>"]/g, function (ch) {
+    return HTML_ESCAPE_MAP[ch];
+  });
+}
+
+/**
+ * 二维数组 -> HTML 表格片段。
+ * 官方 copyCellArea() 的返回值是 { text, html }，只写 text/plain 的话
+ * 粘进 Word / 邮件 / 富文本编辑器会丢掉表格结构，塌成一行文本。
+ */
+export function encodeClipHtml(matrix) {
+  let trList = (matrix || []).map(function (row) {
+    let tdList = (row || []).map(function (cell) {
+      // 格内换行要转 <br>，否则富文本里同样会被挤成一行
+      return "<td>" + escapeClipHtml(cell).replace(/\r?\n/g, "<br>") + "</td>";
+    });
+    return "<tr>" + tdList.join("") + "</tr>";
+  });
+  return "<table><tbody>" + trList.join("") + "</tbody></table>";
+}
+
+/**
+ * TSV 文本 -> 二维数组。走状态机而不是 split，
+ * 因为 Excel 会把含换行/制表符的单元格用引号包起来。
+ */
+export function decodeClipText(text) {
+  let source = text === null || text === undefined ? "" : "" + text;
+  if (!source) return [];
+  let rows = [];
+  let row = [];
+  let cell = "";
+  let inQuote = false;
+  let cellStart = true; // 只有单元格开头的引号才算包裹符
+  for (let i = 0; i < source.length; i++) {
+    let ch = source[i];
+    if (inQuote) {
+      if (ch === '"') {
+        if (source[i + 1] === '"') {
+          cell += '"';
+          i++;
+        } else {
+          inQuote = false;
+        }
+      } else {
+        cell += ch;
+      }
+      continue;
+    }
+    if (ch === '"' && cellStart) {
+      inQuote = true;
+      cellStart = false;
+      continue;
+    }
+    if (ch === "\t") {
+      row.push(cell);
+      cell = "";
+      cellStart = true;
+      continue;
+    }
+    if (ch === "\n" || ch === "\r") {
+      if (ch === "\r" && source[i + 1] === "\n") i++;
+      row.push(cell);
+      rows.push(row);
+      row = [];
+      cell = "";
+      cellStart = true;
+      continue;
+    }
+    cell += ch;
+    cellStart = false;
+  }
+  // 末尾没有换行时收尾；有换行时不要多造一个空行
+  if (cell !== "" || row.length || inQuote) {
+    row.push(cell);
+    rows.push(row);
+  }
+  return rows;
+}