refactor

src/features/add-field-label/dom.js

@@ -4,7 +4,10 @@
  */
 
 import { FIELD_TYPES } from '@/utils/constants.js';
-import { LABEL_TEXT_STYLE, SPACING, IS_FIELD_TYPE_DISPLAY, LABEL_STYLE } from '@/features/add-field-label/settings.js';
+import { LABEL_TEXT_STYLE, SPACING, IS_FIELD_TYPE_DISPLAY, LABEL_STYLE, ADMIN_LABEL_STYLE } from '@/features/add-field-label/settings.js';
+import { isInDetailPage } from '@/utils/kintone-utils';
+
+const _LABEL_STYLE = isInDetailPage() ? LABEL_STYLE : ADMIN_LABEL_STYLE
 
 /**
  * 创建带样式的span元素
@@ -18,7 +21,7 @@ const createStyledSpan = (textContent, type) => {
   Object.assign(span.style, LABEL_TEXT_STYLE)
 
   // GROUP类型字段的特殊样式
-  if (type === FIELD_TYPES.GROUP) {
+  if (type === FIELD_TYPES.GROUP && isInDetailPage()) {
     span.style.marginLeft = SPACING.GROUP_MARGIN_LEFT;
   }
 
@@ -65,7 +68,7 @@ const createFieldSpanElement = ({ code, type, width }) => {
 export const createFieldWithLabels = ({ code, type, width }) => {
   const container = document.createElement('div');
 
-  Object.assign(container.style, LABEL_STYLE)
+  Object.assign(container.style, _LABEL_STYLE)
 
   const fieldSpan = createFieldSpanElement({ code, type, width });
   container.appendChild(fieldSpan);

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

@@ -11,8 +11,7 @@ import {
 } from '@/utils/dom-utils.js';
 import {
   createFieldWithLabels,
-  createFieldLabels
-} from './dom.js';
+} from '@/features/add-field-label/dom.js';
 import { FieldTypeChecker } from '@/utils/field-utils.js';
 import { DOM_CLASSES, FIELD_TYPES, LAYOUT_TYPES } from '@/utils/constants.js';
 import { STYLES } from '@/features/add-field-label/settings.js';

src/page/admin/form/dom.js

@@ -1,105 +0,0 @@
-/**
- * DOM 字段标签操作工具模块
- * 提供用于创建和管理字段标签 DOM 元素的辅助函数
- */
-
-import { FIELD_TYPES } from '@/utils/constants.js';
-import { SPACING, IS_FIELD_TYPE_DISPLAY, ADMIN_LABEL_STYLE, LABEL_TEXT_STYLE } from '@/features/add-field-label/settings.js';
-
-/**
- * 创建带样式的span元素
- * @param {string} textContent - 文本内容
- * @param {string} type - 字段类型（用于特殊样式）
- * @returns {HTMLSpanElement} 配置好的span元素
- */
-const createStyledSpan = (textContent, type) => {
-  const span = document.createElement('span');
-  span.textContent = textContent;
-  Object.assign(span.style, LABEL_TEXT_STYLE)
-  return 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) {
-    Object.assign(container.style, {
-      width: `${Number(width) - SPACING.TABLE_COLUMN_PADDING}px`,
-      marginLeft: `${SPACING.TABLE_COLUMN_PADDING}px`,
-    });
-  } else {
-    container.style.width = SPACING.FIELD_CONTAINER_WIDTH;
-  }
-
-  // 创建文本内容
-  const textContent = (IS_FIELD_TYPE_DISPLAY && type) ? `${code} (${type})` : code;
-  const fieldSpan = createStyledSpan(textContent, type);
-
-  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');
-
-  Object.assign(container.style, ADMIN_LABEL_STYLE)
-
-  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;
-};

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

@@ -11,7 +11,7 @@ import {
 import {
   createFieldWithLabels,
   createFieldLabels
-} from './dom.js';
+} from '@/features/add-field-label/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';