如何在AdminJS中修改下拉框默认占位文本

我创建的下拉列表功能正常，但其中的"Select..."和"No options"占位文本无法完成翻译，相关截图如下：

现有实现代码 #

Student Entity #

@Column({ type: 'varchar' })
studyStatus!: string; 

StudyStatusEnum #

enum StudyStatusEnum {
  studying = 'studying',
  completed = 'completed studies',
  academic = 'academic leave',
  deducted = 'deducted',
}
export default StudyStatusEnum;

admin-panel/student/translations #

export default {
  [StudyStatusEnum.academic]: 'MyTranslatedText',
  [StudyStatusEnum.completed]: 'MyTranslatedText1',
  [StudyStatusEnum.deducted]: 'MyTranslatedText2',
  [StudyStatusEnum.studying]: 'MyTranslatedText3',
};

admin-panel/student/utils #

const getStudentStudyStatus = (): IAvailableValues[] => {
  return Object.values(StudyStatusEnum).map((value) => {
    const label = studentStudyStatusTranslation[value as StudyStatusEnum];
    
    return { label, value };
  });
};

export default getStudentStudyStatus;

student.constants #

const FIELDS = {
  STUDY_STATUS: 'studyStatus',
};

export default Object.freeze({
  FIELDS,

  LIST_PROPERTIES: [
    FIELDS.STUDY_STATUS,  ],
  SHOW_PROPERTIES: [],
  EDIT_PROPERTIES: [],
  FILTER_PROPERTIES: [],
});

student.resource #

export default () => ({
  resource: StudentEntity,
  options: {
    navigation: { icon: 'Education' },
    
    properties: {
      [StudentConstants.FIELDS.STUDY_STATUS]: {
        availableValues: studyStatus,
      },
    },

    listProperties: StudentConstants.LIST_PROPERTIES,
  },
} as ResourceWithOptions);

解决方案 #

方案1：字段级自定义占位文本 #

这两个占位文本是组件默认值，需要在字段配置中显式指定翻译后的内容：

1. 在翻译文件中添加占位文本的翻译项：

// admin-panel/student/translations
export default {
  // 原有选项翻译
  [StudyStatusEnum.academic]: 'MyTranslatedText',
  [StudyStatusEnum.completed]: 'MyTranslatedText1',
  [StudyStatusEnum.deducted]: 'MyTranslatedText2',
  [StudyStatusEnum.studying]: 'MyTranslatedText3',
  // 新增占位文本翻译
  selectPlaceholder: '请选择...',
  noOptionsMessage: '无可用选项',
};

2. 在student.resource中引入翻译文件，配置字段属性：

// student.resource
import studentTranslations from './translations';

export default () => ({
  resource: StudentEntity,
  options: {
    navigation: { icon: 'Education' },
    
    properties: {
      [StudentConstants.FIELDS.STUDY_STATUS]: {
        availableValues: studyStatus,
        selectPlaceholder: studentTranslations.selectPlaceholder,
        noOptionsMessage: studentTranslations.noOptionsMessage,
      },
    },

    listProperties: StudentConstants.LIST_PROPERTIES,
  },
} as ResourceWithOptions);

方案2：全局翻译配置（针对AdminJS框架） #

如果使用AdminJS，可以通过全局语言包配置统一替换所有下拉列表的默认占位文本：

// admin.ts（AdminJS初始化文件）
import { AdminJS } from 'adminjs';
import localeZh from 'adminjs/lib/locale/zh';

// 自定义中文翻译，覆盖默认占位文本
const customZhLocale = {
  ...localeZh,
  translations: {
    ...localeZh.translations,
    properties: {
      ...localeZh.translations.properties,
      selectPlaceholder: '请选择...',
      noOptions: '无可用选项',
    },
  },
};

AdminJS.registerLocale('zh', customZhLocale);

// 初始化AdminJS时指定语言
const admin = new AdminJS({
  // 其他配置项
  locale: {
    language: 'zh',
    translations: customZhLocale.translations,
  },
});

内容的提问来源于stack exchange，提问作者Serhii Melnikov