refactor

utils/dom-utils.js

@@ -0,0 +1,70 @@
+/**
+ * DOM 操作工具模块
+ * 提供用于创建和管理 DOM 元素的辅助函数
+ */
+
+import { FIELD_TYPES } from './constants.js';
+
+/**
+ * 从表元素中提取列宽度信息
+ * @param {HTMLElement} tableElement - 要分析的表元素
+ * @param {string} fieldType - 字段类型（影响返回的宽度数组）
+ * @returns {Array<number>} 表列宽度的数组
+ */
+export const getColumnWidths = (tableElement, fieldType) => {
+  // 获取所有标题元素并提取它们的客户端宽度
+  const headerElements = Array.from(tableElement.querySelectorAll('th'));
+  const columnWidths = headerElements.map(header => header.clientWidth);
+
+  // 对于子表返回所有宽度，其他表跳过第一列（通常是操作列）
+  return fieldType === FIELD_TYPES.SUBTABLE
+    ? columnWidths        // 子表保留所有列
+    : columnWidths.slice(1); // 其他表跳过第一列
+};
+
+/**
+ * 安全地将标签元素插入到指定目标元素之前
+ * @param {HTMLElement} targetElement - 要插入之前的目标元素
+ * @param {HTMLElement} labelElement - 要插入的标签元素
+ * @returns {boolean} 插入是否成功
+ */
+export const safelyInsertLabel = (targetElement, labelElement) => {
+  try {
+    if (!targetElement || !labelElement) {
+      console.warn('Failed to insert label: target element or label element does not exist');
+      return false;
+    }
+
+    if (!targetElement.before) {
+      console.warn('Failed to insert label: target element does not support before method');
+      return false;
+    }
+
+    targetElement.before(labelElement);
+    return true;
+  } catch (error) {
+    console.error('Error inserting label: ', error);
+    return false;
+  }
+};
+
+/**
+ * 安全地将标签元素追加到指定目标元素
+ * @param {HTMLElement} targetElement - 要追加到的目标元素
+ * @param {HTMLElement} labelElement - 要追加的标签元素
+ * @returns {boolean} 追加是否成功
+ */
+export const safelyAppendLabel = (targetElement, labelElement) => {
+  try {
+    if (!targetElement || !labelElement) {
+      console.warn('Failed to append label: target element or label element does not exist');
+      return false;
+    }
+
+    targetElement.appendChild(labelElement);
+    return true;
+  } catch (error) {
+    console.error('Error appending label: ', error);
+    return false;
+  }
+};