Refine 默认翻译文件common.json全解析内置组件文案覆盖的完整键清单与源码对照【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refineRefine 的所有内置组件按钮、通知、错误页、表格操作列、文档标题、自动保存指示器等都支持国际化i18n这意味着你可以通过创建自己的翻译文件来覆盖这些默认文本而无需改动组件源码。本文以 Refine 官方文档 partial 文件 documentation/docs/partials/_partial-translation-file-en.md 中完整收录的locales/en/common.json为骨架逐组拆解全部翻译键的含义、插值参数与使用场景并对照 packages/core 中的源码与测试讲清每个键在 Refine 内部被谁消费、何时生效帮助你为真实后台项目编写准确、可复用的多语言文案文件。翻译文件在 Refine 文档中的定位该文件本身是一个 partial 片段被两处官方文档以组件方式内嵌引用documentation/docs/i18n/i18n-provider/index.md 中通过import TranslationFileEN from ../../partials/\_partial-translation-file-en.md引入作为i18n Provider 指南中可覆盖的翻译键清单documentation/docs/guides-concepts/i18n/index.md 中同时引入了 EN 与 DE 两个 partial用于展示guides-concepts 教程中多语言英/德示例的落地形态。也就是说这份common.json是 Refine 文档与用户之间的键契约只要你的翻译文件与它保持相同键路径namespace 为commonRefine 内置组件在渲染时就会优先读取你的文案未提供的键则回退到组件内硬编码的默认英文文本。对应的i18nProvider接口类型定义在 packages/core/src/contexts/i18n/types.tstype TranslateFunction ( key: string, options?: any, defaultMessage?: string, ) string; type ChangeLocaleFunction ( locale: string, options?: any, ) Promiseany | any; type GetLocaleFunction () string; export type I18nProvider { translate: TranslateFunction; changeLocale: ChangeLocaleFunction; getLocale: GetLocaleFunction; };下面按 JSON 的顶层分组逐组讲解。pages页面级文案登录、注册、错误页pages分组覆盖认证与错误场景的整页文案包含嵌套的fields、errors、buttons三个子组。login 登录页login: { title: Sign in to your account, signin: Sign in, signup: Sign up, divider: or, fields: { email: Email, password: Password }, errors: { validEmail: Invalid email address, requiredEmail: Email is required, requiredPassword: Password is required }, buttons: { submit: Login, forgotPassword: Forgot password?, noAccount: Don’t have an account?, rememberMe: Remember me } }键路径示例pages.login.title、pages.login.errors.validEmail。其中表单校验类文案validEmail、requiredEmail、requiredPassword通常配合 UI 库的校验规则使用例如 Ant Design 的Form校验 message 直接引用这些键。forgotPassword 忘记密码页forgotPassword: { title: Forgot your password?, fields: { email: Email }, errors: { validEmail: Invalid email address, requiredEmail: Email is required }, buttons: { submit: Send reset instructions } }register 注册页register: { title: Sign up for your account, fields: { email: Email, password: Password }, errors: { validEmail: Invalid email address, requiredEmail: Email is required, requiredPassword: Password is required }, buttons: { submit: Register, haveAccount: Have an account? } }updatePassword 更新密码页updatePassword: { title: Update password, fields: { password: New Password, confirmPassword: Confirm new password }, errors: { confirmPasswordNotMatch: Passwords do not match, requiredPassword: Password required, requiredConfirmPassword: Confirm password is required }, buttons: { submit: Update } }error 错误页error: { info: You may have forgotten to add the {{action}} component to {{resource}} resource., 404: Sorry, the page you visited does not exist., resource404: Are you sure you have created the {{resource}} resource., backHome: Back Home }其中pages.error.404由内置错误页组件消费见 packages/core/src/components/pages/error/index.tsx// 组件内部通过 translate 读取该键未提供时回退到默认英文 translate(pages.error.404, Sorry, the page you visited does not exist.)注意pages.error.info与pages.error.resource404使用了插值参数{{action}}与{{resource}}在翻译文件中必须原样保留占位符运行时 Refine 会注入实际值。actions 与 buttons操作与按钮文案actions分组对应资源操作的通用动作名多用于菜单、面包屑与标题的默认名称actions: { list: List, create: Create, edit: Edit, show: Show }buttons分组则对应页面内各类按钮的文本buttons: { create: Create, save: Save, logout: Logout, delete: Delete, edit: Edit, cancel: Cancel, confirm: Are you sure?, filter: Filter, clear: Clear, refresh: Refresh, show: Show, undo: Undo, import: Import, clone: Clone, notAccessTitle: You dont have permission to access }典型消费示例buttons.notAccessTitle由权限相关 hook packages/core/src/hooks/button/button-can-access/index.tsx 在按钮无访问权限时读取其行为在 button-can-access/index.spec.tsx 中有对应测试buttons.confirm常用于删除确认弹窗的提示文本buttons.undo配合可撤销undoable删除流程的倒计时提示。warnWhenUnsavedChanges 与 loading全局提示warnWhenUnsavedChanges: Are you sure you want to leave? You have unsaved changes., loading: LoadingwarnWhenUnsavedChanges表单存在未保存修改时离开页面的确认文案由useWarnAboutChange相关逻辑触发见 packages/core/src/hooks/refine/useWarnAboutChange/index.ts 及其测试 useWarnAboutChange/index.spec.tsxloading通用加载占位文本在数据加载期间被多个组件复用。notifications通知消息含插值参数notifications: { success: Successful, error: Error (status code: {{statusCode}}), undoable: You have {{seconds}} seconds to undo, createSuccess: Successfully created {{resource}}, createError: There was an error creating {{resource}} (status code: {{statusCode}}), deleteSuccess: Successfully deleted {{resource}}, deleteError: Error when deleting {{resource}} (status code: {{statusCode}}), editSuccess: Successfully edited {{resource}}, editError: Error when editing {{resource}} (status code: {{statusCode}}), importProgress: Importing: {{processed}}/{{total}} }这是插值参数最密集的一组共出现四个运行时注入变量参数含义出现位置{{resource}}当前操作的资源名如postscreate/delete/edit 的成功与失败消息{{statusCode}}请求失败时的 HTTP 状态码error、createError、deleteError、editError{{seconds}}可撤销操作剩余的秒数undoable{{processed}}/{{total}}导入进度已处理条数与总条数importProgress源码佐证均位于 packages/core/src/hooks/datauseCreate.ts 在创建成功时读取notifications.createSuccessuseDelete.ts 读取notifications.deleteSuccessuseUpdate.ts 读取notifications.editSuccess批量版本 useCreateMany / useDeleteMany / useUpdateMany 使用相同键可撤销删除的倒计时提示由 packages/core/src/components/undoableQueue/index.tsx 读取notifications.undoable并通过userFriendlySecond将剩余秒数格式化后注入{{seconds}}。tags 与 dashboard轻量通用文案tags: { clone: Clone }, dashboard: { title: Dashboard }tags.clone克隆操作生成的标签文本dashboard.title仪表盘页的默认标题。posts示例资源文案键路径模板posts: { posts: Posts, fields: { id: Id, title: Title, category: Category, status: { title: Status, published: Published, draft: Draft, rejected: Rejected }, content: Content, createdAt: Created At }, titles: { create: Create Post, edit: Edit Post, list: Posts, show: Show Post } }posts是 Refine 示例/教程中最常使用的资源这份文案也给出了为任意自定义资源设计翻译键的通用模板资源名 →fields.字段名→titles.动作名。在列表页中列标题可直接通过translate(posts.fields.title)读取例如const { translate } useTranslation(); // ... Table.Column dataIndextitle title{translate(posts.fields.title)} /table表格操作列标题table: { actions: Actions }table.actions是列表页操作列编辑/查看/删除按钮所在列的默认列标题在表格场景中被广泛引用见 guides-concepts 的 i18n 示例 中PostList页面的title{translate(table.actions)}。documentTitle浏览器标签页标题含 id 插值documentTitle: { default: refine, suffix: | Refine, post: { list: Posts | Refine, show: #{{id}} Show Post | Refine, edit: #{{id}} Edit Post | Refine, create: Create new Post | Refine, clone: #{{id}} Clone Post | Refine } }documentTitle用于自动生成浏览器标签页标题其生成逻辑实现在 packages/core/src/definitions/helpers/generateDocumentTitle/index.tsdocumentTitle.default作为默认标题documentTitle.suffix作为统一后缀对每个资源示例中为post按动作list/show/edit/create/clone读取documentTitle.resource.action其中#{{id}}的{{id}}由当前记录 id 注入因此documentTitle.post.show最终会渲染为#5 Show Post | Refine这类形态该辅助函数同样被测试覆盖于 generateDocumentTitle/index.spec.ts。autoSave自动保存指示器状态autoSave: { success: saved, error: auto save failure, loading: saving..., idle: waiting for changes }autoSave.*对应表单自动保存Auto Save四种状态下的指示文本由内置组件 packages/core/src/components/autoSaveIndicator/index.tsx 消费组件内部为每种statussuccess/error/pending/idle提供了默认文案并优先通过useTranslate读取autoSave.success、autoSave.error、autoSave.loading、autoSave.idle四个键。换句话说即使不覆盖该分组组件也能正常渲染覆盖后则显示你的本地化文案。在你的项目中落地目录结构与覆盖方式参考 i18n 概念指南 中的做法将翻译文件放入 public 目录并由 i18n 实例按{{lng}}/{{ns}}路径懒加载|-- public | |-- locales | |-- en | | |-- common.json | |-- de | |-- common.json |-- src |-- package.json |-- tsconfig.json对应的 i18n 实例配置以 react-i18next 为例需要声明supportedLngs、ns: [common]、defaultNS: common与fallbackLng并将loadPath指向/locales/{{lng}}/{{ns}}.json。随后创建i18nProvider并传给Refine i18nProvider{...}内置组件与useTranslationhook 即可统一读取翻译键。完整接线方式见 documentation/docs/i18n/i18n-provider/index.md 与 documentation/docs/guides-concepts/i18n/index.md仓库内的完整可运行示例见 examples/i18n-react。覆盖原则与注意事项键路径必须与common.json保持一致Refine 组件内部通过translate(notifications.deleteSuccess, ...)这类完整键路径读取文案键名或层级不一致将导致回退到默认英文。插值占位符需原样保留{{resource}}、{{statusCode}}、{{seconds}}、{{id}}、{{processed}}、{{total}}是运行时注入变量翻译时不可删除只能调整其在句子中的位置。默认英文是兜底而非来源多数键在组件内部都有硬编码默认值如 autoSaveIndicator/index.tsx 中的saved、saving...翻译文件负责覆盖即使某些键未覆盖应用也不会报错。未使用的键可以省略posts、tags、dashboard等属于示例/通用文案分组你的项目若没有对应资源或模块无需全部照搬documentTitle.resource的键名需与你的资源名保持一致才能命中。简言之这份common.json是 Refine 国际化体系中内置文案全覆盖的权威清单理解pages、buttons、notifications、documentTitle、autoSave等分组的键结构与插值参数再对照 packages/core 中useCreate、useDelete、useUpdate、UndoableQueue、AutoSaveIndicator、generateDocumentTitle等实现你就能精准掌控后台应用中每一处内置 UI 文案快速交付英德日中任意语言的后台面板。【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Refine 默认翻译文件（common.json）全解析：内置组件文案覆盖的完整键清单与源码对照
Refine 默认翻译文件common.json全解析内置组件文案覆盖的完整键清单与源码对照【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refineRefine 的所有内置组件按钮、通知、错误页、表格操作列、文档标题、自动保存指示器等都支持国际化i18n这意味着你可以通过创建自己的翻译文件来覆盖这些默认文本而无需改动组件源码。本文以 Refine 官方文档 partial 文件 documentation/docs/partials/_partial-translation-file-en.md 中完整收录的locales/en/common.json为骨架逐组拆解全部翻译键的含义、插值参数与使用场景并对照 packages/core 中的源码与测试讲清每个键在 Refine 内部被谁消费、何时生效帮助你为真实后台项目编写准确、可复用的多语言文案文件。翻译文件在 Refine 文档中的定位该文件本身是一个 partial 片段被两处官方文档以组件方式内嵌引用documentation/docs/i18n/i18n-provider/index.md 中通过import TranslationFileEN from ../../partials/\_partial-translation-file-en.md引入作为i18n Provider 指南中可覆盖的翻译键清单documentation/docs/guides-concepts/i18n/index.md 中同时引入了 EN 与 DE 两个 partial用于展示guides-concepts 教程中多语言英/德示例的落地形态。也就是说这份common.json是 Refine 文档与用户之间的键契约只要你的翻译文件与它保持相同键路径namespace 为commonRefine 内置组件在渲染时就会优先读取你的文案未提供的键则回退到组件内硬编码的默认英文文本。对应的i18nProvider接口类型定义在 packages/core/src/contexts/i18n/types.tstype TranslateFunction ( key: string, options?: any, defaultMessage?: string, ) string; type ChangeLocaleFunction ( locale: string, options?: any, ) Promiseany | any; type GetLocaleFunction () string; export type I18nProvider { translate: TranslateFunction; changeLocale: ChangeLocaleFunction; getLocale: GetLocaleFunction; };下面按 JSON 的顶层分组逐组讲解。pages页面级文案登录、注册、错误页pages分组覆盖认证与错误场景的整页文案包含嵌套的fields、errors、buttons三个子组。login 登录页login: { title: Sign in to your account, signin: Sign in, signup: Sign up, divider: or, fields: { email: Email, password: Password }, errors: { validEmail: Invalid email address, requiredEmail: Email is required, requiredPassword: Password is required }, buttons: { submit: Login, forgotPassword: Forgot password?, noAccount: Don’t have an account?, rememberMe: Remember me } }键路径示例pages.login.title、pages.login.errors.validEmail。其中表单校验类文案validEmail、requiredEmail、requiredPassword通常配合 UI 库的校验规则使用例如 Ant Design 的Form校验 message 直接引用这些键。forgotPassword 忘记密码页forgotPassword: { title: Forgot your password?, fields: { email: Email }, errors: { validEmail: Invalid email address, requiredEmail: Email is required }, buttons: { submit: Send reset instructions } }register 注册页register: { title: Sign up for your account, fields: { email: Email, password: Password }, errors: { validEmail: Invalid email address, requiredEmail: Email is required, requiredPassword: Password is required }, buttons: { submit: Register, haveAccount: Have an account? } }updatePassword 更新密码页updatePassword: { title: Update password, fields: { password: New Password, confirmPassword: Confirm new password }, errors: { confirmPasswordNotMatch: Passwords do not match, requiredPassword: Password required, requiredConfirmPassword: Confirm password is required }, buttons: { submit: Update } }error 错误页error: { info: You may have forgotten to add the {{action}} component to {{resource}} resource., 404: Sorry, the page you visited does not exist., resource404: Are you sure you have created the {{resource}} resource., backHome: Back Home }其中pages.error.404由内置错误页组件消费见 packages/core/src/components/pages/error/index.tsx// 组件内部通过 translate 读取该键未提供时回退到默认英文 translate(pages.error.404, Sorry, the page you visited does not exist.)注意pages.error.info与pages.error.resource404使用了插值参数{{action}}与{{resource}}在翻译文件中必须原样保留占位符运行时 Refine 会注入实际值。actions 与 buttons操作与按钮文案actions分组对应资源操作的通用动作名多用于菜单、面包屑与标题的默认名称actions: { list: List, create: Create, edit: Edit, show: Show }buttons分组则对应页面内各类按钮的文本buttons: { create: Create, save: Save, logout: Logout, delete: Delete, edit: Edit, cancel: Cancel, confirm: Are you sure?, filter: Filter, clear: Clear, refresh: Refresh, show: Show, undo: Undo, import: Import, clone: Clone, notAccessTitle: You dont have permission to access }典型消费示例buttons.notAccessTitle由权限相关 hook packages/core/src/hooks/button/button-can-access/index.tsx 在按钮无访问权限时读取其行为在 button-can-access/index.spec.tsx 中有对应测试buttons.confirm常用于删除确认弹窗的提示文本buttons.undo配合可撤销undoable删除流程的倒计时提示。warnWhenUnsavedChanges 与 loading全局提示warnWhenUnsavedChanges: Are you sure you want to leave? You have unsaved changes., loading: LoadingwarnWhenUnsavedChanges表单存在未保存修改时离开页面的确认文案由useWarnAboutChange相关逻辑触发见 packages/core/src/hooks/refine/useWarnAboutChange/index.ts 及其测试 useWarnAboutChange/index.spec.tsxloading通用加载占位文本在数据加载期间被多个组件复用。notifications通知消息含插值参数notifications: { success: Successful, error: Error (status code: {{statusCode}}), undoable: You have {{seconds}} seconds to undo, createSuccess: Successfully created {{resource}}, createError: There was an error creating {{resource}} (status code: {{statusCode}}), deleteSuccess: Successfully deleted {{resource}}, deleteError: Error when deleting {{resource}} (status code: {{statusCode}}), editSuccess: Successfully edited {{resource}}, editError: Error when editing {{resource}} (status code: {{statusCode}}), importProgress: Importing: {{processed}}/{{total}} }这是插值参数最密集的一组共出现四个运行时注入变量参数含义出现位置{{resource}}当前操作的资源名如postscreate/delete/edit 的成功与失败消息{{statusCode}}请求失败时的 HTTP 状态码error、createError、deleteError、editError{{seconds}}可撤销操作剩余的秒数undoable{{processed}}/{{total}}导入进度已处理条数与总条数importProgress源码佐证均位于 packages/core/src/hooks/datauseCreate.ts 在创建成功时读取notifications.createSuccessuseDelete.ts 读取notifications.deleteSuccessuseUpdate.ts 读取notifications.editSuccess批量版本 useCreateMany / useDeleteMany / useUpdateMany 使用相同键可撤销删除的倒计时提示由 packages/core/src/components/undoableQueue/index.tsx 读取notifications.undoable并通过userFriendlySecond将剩余秒数格式化后注入{{seconds}}。tags 与 dashboard轻量通用文案tags: { clone: Clone }, dashboard: { title: Dashboard }tags.clone克隆操作生成的标签文本dashboard.title仪表盘页的默认标题。posts示例资源文案键路径模板posts: { posts: Posts, fields: { id: Id, title: Title, category: Category, status: { title: Status, published: Published, draft: Draft, rejected: Rejected }, content: Content, createdAt: Created At }, titles: { create: Create Post, edit: Edit Post, list: Posts, show: Show Post } }posts是 Refine 示例/教程中最常使用的资源这份文案也给出了为任意自定义资源设计翻译键的通用模板资源名 →fields.字段名→titles.动作名。在列表页中列标题可直接通过translate(posts.fields.title)读取例如const { translate } useTranslation(); // ... Table.Column dataIndextitle title{translate(posts.fields.title)} /table表格操作列标题table: { actions: Actions }table.actions是列表页操作列编辑/查看/删除按钮所在列的默认列标题在表格场景中被广泛引用见 guides-concepts 的 i18n 示例 中PostList页面的title{translate(table.actions)}。documentTitle浏览器标签页标题含 id 插值documentTitle: { default: refine, suffix: | Refine, post: { list: Posts | Refine, show: #{{id}} Show Post | Refine, edit: #{{id}} Edit Post | Refine, create: Create new Post | Refine, clone: #{{id}} Clone Post | Refine } }documentTitle用于自动生成浏览器标签页标题其生成逻辑实现在 packages/core/src/definitions/helpers/generateDocumentTitle/index.tsdocumentTitle.default作为默认标题documentTitle.suffix作为统一后缀对每个资源示例中为post按动作list/show/edit/create/clone读取documentTitle.resource.action其中#{{id}}的{{id}}由当前记录 id 注入因此documentTitle.post.show最终会渲染为#5 Show Post | Refine这类形态该辅助函数同样被测试覆盖于 generateDocumentTitle/index.spec.ts。autoSave自动保存指示器状态autoSave: { success: saved, error: auto save failure, loading: saving..., idle: waiting for changes }autoSave.*对应表单自动保存Auto Save四种状态下的指示文本由内置组件 packages/core/src/components/autoSaveIndicator/index.tsx 消费组件内部为每种statussuccess/error/pending/idle提供了默认文案并优先通过useTranslate读取autoSave.success、autoSave.error、autoSave.loading、autoSave.idle四个键。换句话说即使不覆盖该分组组件也能正常渲染覆盖后则显示你的本地化文案。在你的项目中落地目录结构与覆盖方式参考 i18n 概念指南 中的做法将翻译文件放入 public 目录并由 i18n 实例按{{lng}}/{{ns}}路径懒加载|-- public | |-- locales | |-- en | | |-- common.json | |-- de | |-- common.json |-- src |-- package.json |-- tsconfig.json对应的 i18n 实例配置以 react-i18next 为例需要声明supportedLngs、ns: [common]、defaultNS: common与fallbackLng并将loadPath指向/locales/{{lng}}/{{ns}}.json。随后创建i18nProvider并传给Refine i18nProvider{...}内置组件与useTranslationhook 即可统一读取翻译键。完整接线方式见 documentation/docs/i18n/i18n-provider/index.md 与 documentation/docs/guides-concepts/i18n/index.md仓库内的完整可运行示例见 examples/i18n-react。覆盖原则与注意事项键路径必须与common.json保持一致Refine 组件内部通过translate(notifications.deleteSuccess, ...)这类完整键路径读取文案键名或层级不一致将导致回退到默认英文。插值占位符需原样保留{{resource}}、{{statusCode}}、{{seconds}}、{{id}}、{{processed}}、{{total}}是运行时注入变量翻译时不可删除只能调整其在句子中的位置。默认英文是兜底而非来源多数键在组件内部都有硬编码默认值如 autoSaveIndicator/index.tsx 中的saved、saving...翻译文件负责覆盖即使某些键未覆盖应用也不会报错。未使用的键可以省略posts、tags、dashboard等属于示例/通用文案分组你的项目若没有对应资源或模块无需全部照搬documentTitle.resource的键名需与你的资源名保持一致才能命中。简言之这份common.json是 Refine 国际化体系中内置文案全覆盖的权威清单理解pages、buttons、notifications、documentTitle、autoSave等分组的键结构与插值参数再对照 packages/core 中useCreate、useDelete、useUpdate、UndoableQueue、AutoSaveIndicator、generateDocumentTitle等实现你就能精准掌控后台应用中每一处内置 UI 文案快速交付英德日中任意语言的后台面板。【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
