refactor

src/page/detail/field-label-processor.js

@@ -0,0 +1,230 @@
+/**
+ * 详情页面字段标签处理器模块
+ * 负责处理不同页面上的字段和间距标签
+ */
+
+import {
+  getColumnWidths,
+  safelyInsertLabel,
+  safelyAppendLabel
+} from '@/utils/dom-utils.js';
+import {
+  createFieldWithLabels,
+  createFieldLabels
+} from './dom.js';
+import { FieldTypeChecker } from '@/utils/field-utils.js';
+import { STYLES } from '@/features/add-field-label/settings.js';
+import { LAYOUT_TYPES } from '@/utils/constants.js';
+
+/**
+ * 用于处理不同页面上字段和间距标签的字段标签处理器类
+ */
+export class FieldLabelProcessor {
+  /**
+   * 构造函数
+   * @param {Object} options - 配置选项
+   * @param {number} options.appId - App ID
+   * @param {string} options.pageType - 页面类型上下文（例如，'detail'，'edit'）
+   */
+  constructor(options = {}) {
+    this.appId = options.appId;
+    this.pageType = options.pageType;
+  }
+
+  /**
+   * 返回是否为预览模式
+   * @returns {boolean} 是否预览
+   */
+  isPreview() {
+    return false;
+  }
+
+  beforeProcess(rawFieldsMap, rawLayout, fields, spacers) {
+
+  }
+
+  /**
+   * 创建表类型标签元素
+   * @param {Object} field - 字段配置
+   * @returns {HTMLElement} 标签元素
+   */
+  createTableLabel(field) {
+    const tableCodeLabel = createFieldWithLabels({
+      code: field.code,
+      type: field.type,
+    });
+    tableCodeLabel.style.display = 'block';
+    return tableCodeLabel;
+  }
+
+  /**
+   * 为子表字段元素添加标签
+   * @param {Object} field - 字段配置信息
+   * @param {HTMLElement} fieldElement - 字段 DOM 元素
+   */
+  addSubtableLabel(field, fieldElement) {
+    // 在表上方添加字段代码标签
+    const tableCodeLabel = this.createTableLabel(field);
+    safelyInsertLabel(fieldElement, tableCodeLabel);
+
+    // 添加列标签
+    const fieldNames = Object.keys(field.fields);
+    const columnWidths = getColumnWidths(fieldElement, field.type);
+    const columnLabels = createFieldLabels(fieldNames, columnWidths, field.type);
+
+    safelyInsertLabel(fieldElement, columnLabels);
+  }
+
+  /**
+   * 为引用表字段元素添加标签
+   * @param {Object} field - 字段配置信息
+   * @param {HTMLElement} fieldElement - 字段 DOM 元素
+   */
+  addReferenceTableLabel(field, fieldElement) {
+    // 在引用表上方添加字段代码标签
+    safelyInsertLabel(fieldElement, this.createTableLabel(field));
+
+    // 添加显示字段标签（如果存在）
+    if (field.referenceTable?.displayFields) {
+      const displayFields = field.referenceTable.displayFields;
+      const columnWidths = getColumnWidths(fieldElement, field.type);
+      const hasData = !!fieldElement.querySelector('tbody > tr');
+      const displayLabels = createFieldLabels(displayFields, columnWidths, field.type, hasData);
+
+      safelyInsertLabel(fieldElement, displayLabels);
+    }
+  }
+
+  /**
+   * 为组字段元素添加标签
+   * @param {Object} field - 字段配置信息
+   * @param {HTMLElement} fieldElement - 字段 DOM 元素
+   */
+  addGroupLabel(field, fieldElement) {
+    const parentElement = fieldElement.parentElement;
+    if (!parentElement) {
+      console.warn(`[Kintone Helper Extension] Parent element for group field ${field.code} does not exist`);
+      return;
+    }
+
+    const groupLabel = createFieldWithLabels({
+      code: field.code,
+      type: field.type,
+    });
+
+    safelyInsertLabel(parentElement, groupLabel);
+  }
+
+  /**
+   * 为标准字段元素添加标签
+   * @param {Object} field - 字段配置信息
+   * @param {HTMLElement} fieldElement - 字段 DOM 元素
+   */
+  addStandardFieldLabel(field, fieldElement) {
+      const fieldLabel = createFieldWithLabels({
+        code: field.code,
+        type: field.type,
+      });
+
+      safelyInsertLabel(fieldElement, fieldLabel);
+  }
+
+  /**
+   * 处理并为页面上的所有字段元素添加标签
+   * @param {Array} fieldsWithLabels - 已处理的字段对象数组
+   */
+  processFieldLabels(fieldsWithLabels) {
+    try {
+      // 统计处理结果
+      let processedCount = 0;
+      let skippedCount = 0;
+
+      for (const field of fieldsWithLabels) {
+        try {
+          // 获取字段元素
+          const fieldElement = kintone.app.record.getFieldElement(field.code);
+
+          if (!fieldElement) {
+            skippedCount++;
+            continue;
+          }
+
+          // 根据字段类型选择合适的标签添加方法
+          if (FieldTypeChecker.isSubtable(field)) {
+            this.addSubtableLabel(field, fieldElement);
+          } else if (FieldTypeChecker.isReferenceTable(field)) {
+            this.addReferenceTableLabel(field, fieldElement);
+          } else if (FieldTypeChecker.isGroup(field)) {
+            this.addGroupLabel(field, fieldElement);
+          } else {
+            this.addStandardFieldLabel(field, fieldElement);
+          }
+
+          processedCount++;
+
+        } catch (fieldError) {
+          console.error(`[Kintone Helper Extension] Error occurred while processing label for field ${field.code}:`, fieldError);
+          skippedCount++;
+        }
+      }
+
+      console.log(`[Kintone Helper Extension] Field label processing completed: ${processedCount} successful, ${skippedCount} skipped`);
+
+    } catch (error) {
+      console.error('[Kintone Helper Extension] Error occurred while processing field labels:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * 处理并为页面上的间距元素添加标签
+   * @param {Array} spacerElements - 间距元素配置数组
+   */
+  processSpacerLabels(spacerElements) {
+    try {
+      // 统计处理结果
+      let processedCount = 0;
+      let skippedCount = 0;
+
+      for (const spacer of spacerElements) {
+        try {
+          // 获取间距元素
+          const spacerElement = kintone.app.record.getSpaceElement(spacer.elementId);
+
+          if (!spacerElement) {
+            skippedCount++;
+            continue;
+          }
+          // 添加标签并设置边框
+          const spacerLabel = createFieldWithLabels({
+            code: spacer.elementId,
+            type: spacer.type,
+          });
+
+          safelyAppendLabel(spacerElement, spacerLabel);
+
+          // 添加红色虚线边框
+          spacerElement.style.border = STYLES.SPACER_BORDER;
+
+          processedCount++;
+
+        } catch (spacerError) {
+          console.error(`[Kintone Helper Extension] Error occurred while processing label for spacer element ${spacer.elementId}:`, spacerError);
+          skippedCount++;
+        }
+      }
+
+      document.querySelectorAll('.spacer-cybozu:not([id])').forEach(spacerElement => {
+        spacerElement.style.border = STYLES.SPACER_BORDER;
+        safelyAppendLabel(spacerElement, createFieldWithLabels({
+          code: '',
+          type: LAYOUT_TYPES.SPACER,
+        }));
+      });
+
+  } catch (error) {
+    console.error('[Kintone Helper Extension] Error occurred while processing spacer element labels:', error);
+    throw error;
+  }
+  }
+}