feat: tab.action&tab.extra

Author: DBSDs

docs/guide/page-tab.md

@@ -32,8 +32,11 @@ export default (api: IApi) => {
     key: 'test',
     component: require.resolve('./a.tsx'),
     test: /^\/components\//,
+    extra: require.resolve('./extra.tsx'),
+    action: require.resolve('./actions.tsx'),
   }));
 };
 ```
 
 `component` 放入我们自定义的 Tab 内容，`test` 可以写入正则来匹配路由，这样我们就实现了为 `/componets` 下的路由页面添加自定义 Tab。
+其中，`extra` 和 `action` 都是可选项，`extra` 可以自定义每个 Tab 的紧跟内容，`action` 可以自定义整个tab栏的右侧内容。

docs/theme/default.md

@@ -119,4 +119,11 @@ hero:
       link: /getting-started
 ```
 
+#### extra
+
+- 类型：`String`
+- 默认值：`null`
+- 详细：
+
+配置 Tab 页面紧跟的 Tab 区域
 <!-- md config end -->

examples/normal/actions.tsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default () => <>🏀</>;

examples/normal/extra.tsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default () => <>😄</>;

examples/normal/plugin.ts

@@ -4,5 +4,12 @@ export default (api: IApi) => {
   api.addContentTab(() => ({
     key: 'test',
     component: require.resolve('./a.tsx'),
+    extra: require.resolve('./extra.tsx'),
+    action: require.resolve('./actions.tsx'),
+  }));
+
+  api.addContentTab(() => ({
+    key: 'test2',
+    component: require.resolve('./a.tsx'),
   }));
 };

examples/normal/src/Foo/index.$tab-api.md

@@ -1,5 +1,6 @@
 ---
 title: API
+extra: 😭
 ---
 
 约定式 Tab 测试 + 自动 API 测试

src/client/theme-api/types.ts

@@ -80,6 +80,7 @@ export interface IRouteMeta {
     };
     atomId?: string;
     filename?: string;
+    extra: string;
     [key: string]: any;
   };
   // route toc

src/client/theme-default/slots/ContentTabs/index.less

@@ -24,48 +24,58 @@
     }
   }
 
-  > li {
-    height: inherit;
+  &-nav {
+    flex: auto;
+    display: flex;
+    height: 60px;
 
-    > button {
-      padding: 0;
+    >li {
       height: inherit;
-      color: @c-text-secondary;
-      font-size: 17px;
-      border: 0;
-      background: transparent;
-      cursor: pointer;
-      transition: all 0.2s;
 
-      &:hover {
-        color: @c-primary;
+      >button {
+        padding: 0;
+        height: inherit;
+        color: @c-text-secondary;
+        font-size: 17px;
+        border: 0;
+        background: transparent;
+        cursor: pointer;
+        transition: all 0.2s;
+
+        &:hover {
+          color: @c-primary;
+        }
       }
-    }
 
-    &:not(last-child) {
-      margin-inline-end: 42px;
+      &:not(last-child) {
+        margin-inline-end: 42px;
 
-      @media @mobile {
-        margin-inline-end: 20px;
+        @media @mobile {
+          margin-inline-end: 20px;
+        }
       }
-    }
 
-    &[data-active] {
-      position: relative;
+      &[data-active] {
+        position: relative;
 
-      > button {
-        color: @c-text;
-      }
+        >button {
+          color: @c-text;
+        }
 
-      &::after {
-        content: '';
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: -1px;
-        height: 1px;
-        background-color: @c-primary;
+        &::after {
+          content: '';
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: -1px;
+          height: 1px;
+          background-color: @c-primary;
+        }
       }
     }
   }
+
+  &-action {
+    flex: none;
+  }
 }

src/client/theme-default/slots/ContentTabs/index.tsx

@@ -4,6 +4,18 @@ import './index.less';
 
 type IContentTabs = ReturnType<typeof useRouteMeta>['tabs'];
 
+const TabsAction: FC<{ tabs: IContentTabs }> = ({ tabs }) => {
+  const tabActions = tabs
+    ?.map((tab) => tab.components.Action)
+    .filter((tab) => tab);
+
+  return Boolean(tabActions?.length) ? (
+    <div className="dumi-default-content-tabs-actions">
+      {React.createElement(tabActions![0])}
+    </div>
+  ) : null;
+};
+
 export interface IContentTabsProps {
   tabs: IContentTabs;
   tabKey: string | null;
@@ -17,24 +29,27 @@ const ContentTabs: FC<IContentTabsProps> = ({
 }) => {
   const intl = useIntl();
 
-  // TODO: tab.Extra & tab.Action render
-
   return Boolean(tabs?.length) ? (
     <ul className="dumi-default-content-tabs">
-      <li onClick={() => onChange()} data-active={!key || undefined}>
-        <button type="button">
-          {intl.formatMessage({ id: 'content.tabs.default' })}
-        </button>
-      </li>
-      {tabs!.map((tab) => (
-        <li
-          key={tab.key}
-          onClick={() => onChange(tab)}
-          data-active={key === tab.key || undefined}
-        >
-          <button type="button">{tab.meta.frontmatter.title}</button>
+      <div className="dumi-default-content-tabs-nav">
+        <li onClick={() => onChange()} data-active={!key || undefined}>
+          <button type="button">
+            {intl.formatMessage({ id: 'content.tabs.default' })}
+          </button>
         </li>
-      ))}
+        {tabs!.map((tab) => (
+          <li
+            key={tab.key}
+            onClick={() => onChange(tab)}
+            data-active={key === tab.key || undefined}
+          >
+            <button type="button">{tab.meta.frontmatter.title}</button>
+            {tab.meta.frontmatter.extra}
+            {tab.components.Extra && React.createElement(tab.components.Extra)}
+          </li>
+        ))}
+      </div>
+      <TabsAction tabs={tabs} />
     </ul>
   ) : null;
 };

src/features/tabs.ts

@@ -9,6 +9,8 @@ export interface IContentTab {
   id?: string;
   test?: RegExp;
   component: string;
+  extra?: string;
+  action?: string;
 }
 
 export function isTabRouteFile(file: string) {
@@ -30,8 +32,9 @@ export default (api: IApi) => {
     key: string;
     id: string;
     file: string;
+    extra?: string;
+    action?: string;
   }[] = [];
-
   api.describe({ key: undefined });
 
   // collect extra content tabs before routes generate
@@ -96,9 +99,10 @@ export default (api: IApi) => {
         key: tab.key,
         id: tab.id!,
         file: tab.component,
+        extra: tab.extra,
+        action: tab.action,
       })),
     );
-
     return routes;
   });
 
@@ -121,24 +125,44 @@ export default (api: IApi) => {
           index: metaFiles.length,
         });
       });
-
       return metaFiles;
     },
   });
 
   // generate tabs tmp file
   api.onGenerateFiles(() => {
+    console.log(tabs, 'tabs');
     api.writeTmpFile({
       noPluginDir: true,
       path: TABS_META_PATH,
       content: Mustache.render(
         `{{#tabs}}
-import * as tab{{{index}}} from '{{{file}}}';
+import tab{{{index}}} from '{{{file}}}';
+
+{{#extra}}
+import tabExtra{{{index}}} from '{{{extra}}}';
+{{/extra}}
+
+{{#action}}
+import tabAction{{{index}}} from '{{{action}}}';
+{{/action}}
+
 {{/tabs}}
 
 export const tabs = {
   {{#tabs}}
-  '{{{id}}}': { key: '{{{key}}}', components: tab{{{index}}} },
+  '{{{id}}}': {
+    key: '{{{key}}}',
+    components: {
+      default: tab{{{index}}},
+    {{#extra}}
+      Extra: tabExtra{{{index}}},
+    {{/extra}}
+    {{#action}}
+      Action: tabAction{{{index}}}
+    {{/action}}
+    }
+  },
   {{/tabs}}
 }
 `,