diff --git a/src/page/detail/dom.js b/src/features/add-field-label/dom.js similarity index 89% rename from src/page/detail/dom.js rename to src/features/add-field-label/dom.js index ed72edd..b388d72 100644 --- a/src/page/detail/dom.js +++ b/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); diff --git a/src/page/admin/form/admin-field-label-processor.js b/src/page/admin/form/admin-field-label-processor.js index 9ee898b..f31216c 100644 --- a/src/page/admin/form/admin-field-label-processor.js +++ b/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'; diff --git a/src/page/admin/form/dom.js b/src/page/admin/form/dom.js deleted file mode 100644 index ced395f..0000000 --- a/src/page/admin/form/dom.js +++ /dev/null @@ -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} fieldNames - 要为其创建标签的字段名称数组 - * @param {Array} 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; -}; diff --git a/src/page/detail/field-label-processor.js b/src/page/detail/field-label-processor.js index 4ad47d9..7c0a328 100644 --- a/src/page/detail/field-label-processor.js +++ b/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';