diff --git a/docs/guide/page-tab.md b/docs/guide/page-tab.md index 668955c08a..670befc379 100644 --- a/docs/guide/page-tab.md +++ b/docs/guide/page-tab.md @@ -30,11 +30,11 @@ import { IApi } from 'dumi'; export default (api: IApi) => { api.addContentTab(() => ({ key: 'test', - name: '标题', + title: '标题', component: require.resolve('./a.tsx'), test: /^\/components\//, })); }; ``` -`component` 放入我们自定义的 Tab 内容,`test` 可以写入正则来匹配路由,`name` 为我们自定义 Tab 标题,如果需要配置国际化标题,可以通过 [modifyTheme](/plugin/api#modifytheme) API 来添加 locales 数据,然后配置 [nameIntlId](/plugin/api#addcontenttab) 关联对应的 key 来实现国际化。这样我们就实现了为 `/componets` 下的路由页面添加自定义 Tab。 +`component` 放入我们自定义的 Tab 内容,`test` 可以写入正则来匹配路由,`title` 为我们自定义 Tab 标题,如果需要配置国际化标题,可以通过 [modifyTheme](/plugin/api#modifytheme) API 来添加 locales 数据,然后配置 [titleIntlId](/plugin/api#addcontenttab) 关联对应的 key 来实现国际化。这样我们就实现了为 `/componets` 下的路由页面添加自定义 Tab。 diff --git a/docs/plugin/api.md b/docs/plugin/api.md index d3662741f7..401aafec24 100644 --- a/docs/plugin/api.md +++ b/docs/plugin/api.md @@ -30,11 +30,11 @@ api.addContentTab(() => ({ /** * 用于自定义 tab 名称 */ - name?: string; + title?: string; /** * tab 名称文案国际化,通过传入国际化文案 key 来实现。优先级高于 name 配置项 */ - nameIntlId?: string; + titleIntlId?: string; /** * 页面 Tab 的 React 组件 */ diff --git a/src/client/theme-api/types.ts b/src/client/theme-api/types.ts index 92ce79af08..46f0d38b13 100644 --- a/src/client/theme-api/types.ts +++ b/src/client/theme-api/types.ts @@ -114,8 +114,8 @@ export interface IRouteMeta { // tabs tabs?: { key: string; - name?: string; - nameIntlId?: string; + title?: string; + titleIntlId?: string; components: { default: ComponentType; Extra: ComponentType; diff --git a/src/client/theme-default/slots/ContentTabs/index.tsx b/src/client/theme-default/slots/ContentTabs/index.tsx index b3fe63baad..90a9ae42cb 100644 --- a/src/client/theme-default/slots/ContentTabs/index.tsx +++ b/src/client/theme-default/slots/ContentTabs/index.tsx @@ -33,9 +33,9 @@ const ContentTabs: FC = ({ data-active={key === tab.key || undefined} > ))} diff --git a/src/features/meta.ts b/src/features/meta.ts index cef9f13c0a..2325179d03 100644 --- a/src/features/meta.ts +++ b/src/features/meta.ts @@ -116,10 +116,17 @@ export const patchRoutes = ({ routes }) => { route.meta = deepmerge(route.meta, filesMeta[route.id]); // apply real tab data from id - route.meta.tabs = route.meta.tabs?.map(id => ({ - ...tabs[id], - meta: filesMeta[id], - })); + route.meta.tabs = route.meta.tabs?.map((id) => { + const meta = { + frontmatter: { title: tabs[id].title }, + toc: [], + texts: [], + } + return { + ...tabs[id], + meta: filesMeta[id] || meta, + } + }); } } }); diff --git a/src/features/tabs.ts b/src/features/tabs.ts index f28d2d23a0..ad23e62f16 100644 --- a/src/features/tabs.ts +++ b/src/features/tabs.ts @@ -8,8 +8,8 @@ export interface IContentTab { key: string; id?: string; test?: RegExp; - name?: string; - nameIntlId?: string; + title?: string; + titleIntlId?: string; component: string; } @@ -32,8 +32,8 @@ export default (api: IApi) => { key: string; id: string; file: string; - name?: string; - nameIntlId?: string; + title?: string; + titleIntlId?: string; }[] = []; api.describe({ key: undefined }); @@ -99,8 +99,8 @@ export default (api: IApi) => { index: tabs.length + index, key: tab.key, id: tab.id!, - name: tab.name, - nameIntlId: tab.nameIntlId, + title: tab.title || path.parse(tab.component).name.toUpperCase(), + titleIntlId: tab.titleIntlId, file: tab.component, })), ); @@ -121,11 +121,14 @@ export default (api: IApi) => { // append tabs to meta files tabs.forEach((tab) => { - metaFiles.push({ - id: tab.id, - file: tab.file, - index: metaFiles.length, - }); + const isFromPlugin = tabsFromPlugins.some((item) => item.id === tab.id); + if (!isFromPlugin) { + metaFiles.push({ + id: tab.id, + file: tab.file, + index: metaFiles.length, + }); + } }); return metaFiles; @@ -144,7 +147,7 @@ import * as tab{{{index}}} from '{{{file}}}'; export const tabs = { {{#tabs}} - '{{{id}}}': { key: '{{{key}}}', name: '{{{name}}}', nameIntlId: '{{{nameIntlId}}}', components: tab{{{index}}} }, + '{{{id}}}': { key: '{{{key}}}', title: '{{{title}}}', titleIntlId: '{{{titleIntlId}}}', components: tab{{{index}}} }, {{/tabs}} } `,