refactor

page/admin/form/admin-field-label-processor.js

@@ -0,0 +1,81 @@
+/**
+ * 管理表单页面字段标签处理器模块
+ * 负责处理 admin 表单页面上的字段和间距标签
+ */
+
+/**
+ * 用于处理 admin 表单页面上字段和间距标签的字段标签处理器类
+ */
+export class AdminFieldLabelProcessor {
+  /**
+   * 构造函数
+   * @param {Object} options - 配置选项
+   * @param {number} options.appId - App ID
+   * @param {string} options.pageType - 页面类型上下文（例如，'admin'）
+   */
+  constructor(options = {}) {
+    this.appId = options.appId;
+    this.pageType = options.pageType;
+    console.log(`AdminFieldLabelProcessor initialized with appId: ${this.appId}, pageType: ${this.pageType}`);
+  }
+
+  /**
+   * 返回是否为预览模式
+   * @returns {boolean} 是否预览
+   */
+  isPreview() {
+    return true;
+  }
+
+  /**
+   * 为子表字段元素添加标签
+   * @param {Object} field - 字段配置信息
+   * @param {HTMLElement} fieldElement - 字段 DOM 元素
+   */
+  addSubtableLabel(field, fieldElement) {
+    console.log(`AdminFieldLabelProcessor.addSubtableLabel called with field: ${field.code}, fieldElement exists: ${!!fieldElement}`);
+  }
+
+  /**
+   * 为引用表字段元素添加标签
+   * @param {Object} field - 字段配置信息
+   * @param {HTMLElement} fieldElement - 字段 DOM 元素
+   */
+  addReferenceTableLabel(field, fieldElement) {
+    console.log(`AdminFieldLabelProcessor.addReferenceTableLabel called with field: ${field.code}, fieldElement exists: ${!!fieldElement}`);
+  }
+
+  /**
+   * 为组字段元素添加标签
+   * @param {Object} field - 字段配置信息
+   * @param {HTMLElement} fieldElement - 字段 DOM 元素
+   */
+  addGroupLabel(field, fieldElement) {
+    console.log(`AdminFieldLabelProcessor.addGroupLabel called with field: ${field.code}, fieldElement exists: ${!!fieldElement}`);
+  }
+
+  /**
+   * 为标准字段元素添加标签
+   * @param {Object} field - 字段配置信息
+   * @param {HTMLElement} fieldElement - 字段 DOM 元素
+   */
+  addStandardFieldLabel(field, fieldElement) {
+    console.log(`AdminFieldLabelProcessor.addStandardFieldLabel called with field: ${field.code}, fieldElement exists: ${!!fieldElement}`);
+  }
+
+  /**
+   * 处理并为页面上的所有字段元素添加标签
+   * @param {Array} fieldsWithLabels - 已处理的字段对象数组
+   */
+  processFieldLabels(fieldsWithLabels) {
+    console.log(`AdminFieldLabelProcessor.processFieldLabels called with ${fieldsWithLabels.length} fields`);
+  }
+
+  /**
+   * 处理并为页面上的间距元素添加标签
+   * @param {Array} spacerElements - 间距元素配置数组
+   */
+  processSpacerLabels(spacerElements) {
+    console.log(`AdminFieldLabelProcessor.processSpacerLabels called with ${spacerElements.length} spacer elements`);
+  }
+}

page/detail/dom.js

@@ -0,0 +1,99 @@
+/**
+ * DOM 字段标签操作工具模块
+ * 提供用于创建和管理字段标签 DOM 元素的辅助函数
+ */
+
+import { FIELD_TYPES } from '../../utils/constants.js';
+import { COLORS, SPACING, IS_FIELD_TYPE_DISPLAY } from '../../features/add-field-label/settings.js';
+
+/**
+ * 创建带有适当样式的字段标签 span 元素
+ * @param {Object} params - 标签参数配置
+ * @param {string} params.code - 字段代码
+ * @param {string} params.type - 字段类型（可选）
+ * @param {number} params.width - 字段宽度（可选）
+ * @returns {HTMLElement} 带有样式化 span 的容器 div 元素
+ */
+const createFieldSpanElement = ({ code, type, width }) => {
+  const container = document.createElement('div');
+
+  // 处理宽度和边距设置
+  if (width !== undefined) {
+    container.style.width = `${Number(width) - SPACING.TABLE_COLUMN_PADDING}px`; // 减去列填充
+    container.style.marginLeft = `${SPACING.TABLE_COLUMN_PADDING}px`; // 添加左边距
+  } else {
+    container.style.width = '100%'; // 默认全宽度
+  }
+
+  // 创建和样式化 span 元素
+  const fieldSpan = document.createElement('span');
+  fieldSpan.textContent = (IS_FIELD_TYPE_DISPLAY && type !== undefined) ? `${code} (${type})` : code; // 显示代码和类型
+  fieldSpan.style.display = 'inline-block';
+  fieldSpan.style.width = '100%';
+  fieldSpan.style.color = COLORS.LABEL_TEXT;  // 使用定义的工具提示文本颜色
+  fieldSpan.style.overflowWrap = 'anywhere';   // 支持长文本换行
+  fieldSpan.style.whiteSpace = 'pre-wrap';      // 保留空格和换行
+
+  // GROUP 类型字段的特殊样式
+  if (type === FIELD_TYPES.GROUP) {
+    fieldSpan.style.marginLeft = SPACING.GROUP_MARGIN_LEFT;
+  }
+
+  container.appendChild(fieldSpan);
+  return container;
+};
+
+/**
+ * 创建字段标签容器元素
+ * @param {Object} params - 标签参数配置
+ * @param {string} params.code - 字段代码
+ * @param {string} params.type - 字段类型（可选）
+ * @param {number} params.width - 容器宽度（可选）
+ * @returns {HTMLElement} 标签容器元素
+ */
+export const createFieldWithLabels = ({ code, type, width }) => {
+  const container = document.createElement('div');
+  container.style.display = 'inline-block'; // 布局的内联块显示
+
+  const fieldSpan = createFieldSpanElement({ code, type, width });
+  container.appendChild(fieldSpan);
+
+  return container;
+};
+
+/**
+ * 创建包含多个字段标签的容器
+ * @param {Array<string>} fieldNames - 要为其创建标签的字段名称数组
+ * @param {Array<number>} widths - 与字段名称对应的宽度
+ * @param {string} fieldType - 字段类型（影响间距）
+ * @returns {HTMLElement} 带有所有标签的 span 容器元素
+ */
+export const createFieldLabels = (fieldNames, widths, fieldType, specialSpacing = false) => {
+  const container = document.createElement('span');
+
+  // 为引用表字段添加特殊间距
+  if (fieldType === FIELD_TYPES.REFERENCE_TABLE && specialSpacing) {
+    const spacerElement = document.createElement('span');
+    spacerElement.style.width = SPACING.REFERENCE_TABLE_SPACER;
+    spacerElement.style.display = 'inline-block';
+    container.appendChild(spacerElement);
+  }
+
+  // 为每个字段创建标签，调整宽度
+  const labelElements = fieldNames.map((fieldName, index) => {
+    // 稍稍减少最后一个元素的宽度以适应布局
+    const adjustedWidth = index === fieldNames.length - 1
+      ? widths[index] - 1
+      : widths[index];
+
+    return createFieldWithLabels({
+      code: fieldName,
+      width: adjustedWidth,
+    });
+  });
+
+  // 将所有标签元素添加到容器中
+  labelElements.forEach(labelElement => container.appendChild(labelElement));
+
+  return container;
+};

page/detail/field-label-processor.js

@@ -0,0 +1,241 @@
+/**
+ * 详情页面字段标签处理器模块
+ * 负责处理不同页面上的字段和间距标签
+ */
+
+import {
+  getColumnWidths,
+  safelyInsertLabel,
+  safelyAppendLabel
+} from '../../utils/dom-utils.js';
+import {
+  createFieldWithLabels,
+  createFieldLabels
+} from './dom.js';
+import { FieldTypeChecker } from '../../utils/field-utils.js';
+import { COLORS } 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;
+  }
+
+  /**
+   * 为子表字段元素添加标签
+   * @param {Object} field - 字段配置信息
+   * @param {HTMLElement} fieldElement - 字段 DOM 元素
+   */
+  addSubtableLabel(field, fieldElement) {
+    try {
+      // 在表上方添加字段代码标签
+      const tableCodeLabel = createFieldWithLabels({
+        code: field.code,
+        type: field.type,
+      });
+      tableCodeLabel.style.display = 'block';
+      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);
+
+    } catch (error) {
+      console.error(`Failed to add label for subtable field ${field.code}:`, error);
+    }
+  }
+
+  /**
+   * 为引用表字段元素添加标签
+   * @param {Object} field - 字段配置信息
+   * @param {HTMLElement} fieldElement - 字段 DOM 元素
+   */
+  addReferenceTableLabel(field, fieldElement) {
+    try {
+      // 在引用表上方添加字段代码标签
+      const tableCodeLabel = createFieldWithLabels({
+        code: field.code,
+        type: field.type,
+      });
+      tableCodeLabel.style.display = 'block';
+
+      safelyInsertLabel(fieldElement, tableCodeLabel);
+
+      // 如果可用，添加显示字段标签
+      if (field.referenceTable?.displayFields) {
+        const displayFields = field.referenceTable.displayFields;
+        const columnWidths = getColumnWidths(fieldElement, field.type);
+        const dataExist = !!fieldElement.querySelector('tbody > tr');
+        const displayLabels = createFieldLabels(displayFields, columnWidths, field.type, dataExist);
+
+        safelyInsertLabel(fieldElement, displayLabels);
+      }
+
+    } catch (error) {
+      console.error(`Failed to add label for reference table field ${field.code}:`, error);
+    }
+  }
+
+  /**
+   * 为组字段元素添加标签
+   * @param {Object} field - 字段配置信息
+   * @param {HTMLElement} fieldElement - 字段 DOM 元素
+   */
+  addGroupLabel(field, fieldElement) {
+    try {
+      // 在组的父元素之前添加标签
+      const parentElement = fieldElement.parentElement;
+      if (parentElement) {
+        const groupLabel = createFieldWithLabels({
+          code: field.code,
+          type: field.type,
+        });
+
+        safelyInsertLabel(parentElement, groupLabel);
+      } else {
+        console.warn(`Parent element for group field ${field.code} does not exist`);
+      }
+
+    } catch (error) {
+      console.error(`Failed to add label for group field ${field.code}:`, error);
+    }
+  }
+
+  /**
+   * 为标准字段元素添加标签
+   * @param {Object} field - 字段配置信息
+   * @param {HTMLElement} fieldElement - 字段 DOM 元素
+   */
+  addStandardFieldLabel(field, fieldElement) {
+    try {
+      const fieldLabel = createFieldWithLabels({
+        code: field.code,
+        type: field.type,
+      });
+
+      safelyInsertLabel(fieldElement, fieldLabel);
+
+    } catch (error) {
+      console.error(`Failed to add label for standard field ${field.code}:`, error);
+    }
+  }
+
+  /**
+   * 处理并为页面上的所有字段元素添加标签
+   * @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(`Error occurred while processing label for field ${field.code}:`, fieldError);
+          skippedCount++;
+        }
+      }
+
+      console.log(`Field label processing completed: ${processedCount} successful, ${skippedCount} skipped`);
+
+    } catch (error) {
+      console.error('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 = COLORS.SPACER_BORDER;
+
+          processedCount++;
+
+        } catch (spacerError) {
+          console.error(`Error occurred while processing label for spacer element ${spacer.elementId}:`, spacerError);
+          skippedCount++;
+        }
+      }
+
+      document.querySelectorAll('.spacer-cybozu:not([id])').forEach(spacerElement => {
+        spacerElement.style.border = COLORS.SPACER_BORDER;
+        safelyAppendLabel(spacerElement, createFieldWithLabels({
+          code: '',
+          type: LAYOUT_TYPES.SPACER,
+        }));
+      });
+
+    } catch (error) {
+      console.error('Error occurred while processing spacer element labels:', error);
+      throw error;
+    }
+  }
+}