refactor: update addContentTab args (#1427)

* fix: modify the addContentTab parameter * fix: supplementary parameter * fix: optimized code format
umijs · Jan 18, 2023 · fc4be89 · fc4be89
1 parent 487d1fc
commit fc4be89
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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
@@ -33,9 +33,9 @@ const ContentTabs: FC<IContentTabsProps> = ({
           data-active={key === tab.key || undefined}
         >
           <button type="button">
-            {tab.nameIntlId
-              ? intl.formatMessage({ id: tab.nameIntlId })
-              : tab.name || tab.meta.frontmatter.title}
+            {tab.titleIntlId
+              ? intl.formatMessage({ id: tab.titleIntlId })
+              : tab.meta.frontmatter.title}
           </button>
         </li>
       ))}

diff --git 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
@@ -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}}
 }
 `,