dumi 2.0.0-beta.3 → 2.0.0-beta.5

package/dist/client/theme-api/DumiDemo.js

@@ -14,6 +14,6 @@ export var DumiDemo = function DumiDemo(props) {
   return /*#__PURE__*/React.createElement(Previewer, _extends({
     asset: asset,
     demoUrl: // allow user override demoUrl by frontmatter
-    props.previewerProps.demoUrl || "".concat(SP_ROUTE_PREFIX, "demos/").concat(props.demo.id)
+    props.previewerProps.demoUrl || "/".concat(SP_ROUTE_PREFIX, "demos/").concat(props.demo.id)
   }, props.previewerProps), /*#__PURE__*/createElement(component));
 };

package/dist/client/theme-api/DumiPage.d.ts

@@ -0,0 +1,4 @@
+import { type FC, type ReactNode } from 'react';
+export declare const DumiPage: FC<{
+    children: ReactNode;
+}>;

package/dist/client/theme-api/DumiPage.js

@@ -0,0 +1,39 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { useRouteMeta, useSiteData } from 'dumi';
+import ContentTabs from 'dumi/theme/slots/ContentTabs';
+import React, { useEffect, useState } from 'react';
+export var DumiPage = function DumiPage(props) {
+  var _useRouteMeta = useRouteMeta(),
+      tabs = _useRouteMeta.tabs;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      tab = _useState2[0],
+      setTab = _useState2[1];
+
+  var _useSiteData = useSiteData(),
+      setLoading = _useSiteData.setLoading; // update loading status when page loaded
+
+
+  useEffect(function () {
+    setLoading(false);
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ContentTabs, {
+    tabs: tabs,
+    tabKey: tab === null || tab === void 0 ? void 0 : tab.key,
+    onChange: function onChange(val) {
+      setTab(val);
+    }
+  }), tab ? /*#__PURE__*/React.createElement(tab.components.default) : props.children);
+};

package/dist/client/theme-api/index.d.ts

@@ -1,7 +1,8 @@
-export { useIntl } from 'react-intl';
+export { createIntlCache, defineMessages, FormattedDate, FormattedDateParts, FormattedDisplayName, FormattedList, FormattedMessage, FormattedNumber, FormattedNumberParts, FormattedPlural, FormattedRelativeTime, FormattedTime, FormattedTimeParts, injectIntl, IntlContext, IntlProvider, RawIntlProvider, useIntl, } from 'react-intl';
 export { useSiteData } from './context';
 export { DumiDemo } from './DumiDemo';
 export { DumiDemoGrid } from './DumiDemoGrid';
+export { DumiPage } from './DumiPage';
 export type { IPreviewerProps } from './types';
 export { useAtomAssets } from './useAtomAssets';
 export { useLocale } from './useLocale';

package/dist/client/theme-api/index.js

@@ -1,7 +1,8 @@
-export { useIntl } from 'react-intl';
+export { createIntlCache, defineMessages, FormattedDate, FormattedDateParts, FormattedDisplayName, FormattedList, FormattedMessage, FormattedNumber, FormattedNumberParts, FormattedPlural, FormattedRelativeTime, FormattedTime, FormattedTimeParts, injectIntl, IntlContext, IntlProvider, RawIntlProvider, useIntl } from 'react-intl';
 export { useSiteData } from "./context";
 export { DumiDemo } from "./DumiDemo";
 export { DumiDemoGrid } from "./DumiDemoGrid";
+export { DumiPage } from "./DumiPage";
 export { useAtomAssets } from "./useAtomAssets";
 export { useLocale } from "./useLocale";
 export { useNavData } from "./useNavData";

package/dist/client/theme-api/types.d.ts

@@ -1,5 +1,5 @@
 import type { ExampleBlockAsset } from 'dumi-assets-types';
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 export interface IPreviewerProps {
     /**
      * title of current demo
@@ -68,6 +68,17 @@ export interface IRouteMeta {
         depth: number;
         title: string;
     }[];
+    tabs?: {
+        key: string;
+        components: {
+            default: ComponentType;
+            Extra: ComponentType;
+            Action: ComponentType;
+        };
+        frontmatter: Omit<IRouteMeta['frontmatter'], 'description' | 'keywords' | 'nav' | 'group'>;
+        toc: IRouteMeta['toc'];
+        [key: string]: any;
+    }[];
     [key: string]: any;
 }
 declare type IBasicLocale = {
@@ -88,6 +99,8 @@ export interface INavItem {
 interface ISidebarItem {
     title: string;
     link: string;
+    order: number;
+    frontmatter: IRouteMeta['frontmatter'];
     [key: string]: any;
 }
 export interface ISidebarGroup {

package/dist/client/theme-api/useSidebarData.js

@@ -71,7 +71,8 @@ export var useFullSidebarData = function useFullSidebarData() {
           children: [].concat(_toConsumableArray(((_ret$parentPath$title2 = ret[parentPath][titleKey]) === null || _ret$parentPath$title2 === void 0 ? void 0 : _ret$parentPath$title2.children) || []), [{
             title: route.meta.frontmatter.title,
             link: "/".concat(route.path),
-            order: route.meta.frontmatter.order || 0
+            order: route.meta.frontmatter.order || 0,
+            frontmatter: route.meta.frontmatter
           }])
         };
       }
@@ -125,7 +126,8 @@ export var useSidebarData = function useSidebarData() {
   // /a/b => /a
   // /en-US/a => /en-US/a
   // /en-US/a/b => /en-US/a
+  // /en-US/a/b/ => /en-US/a (also strip trailing /)
 
-  var parentPath = clearPath ? pathname.replace(/(\/[^/]+)(\/[^/]+)$/, '$1') : pathname;
+  var parentPath = clearPath ? pathname.replace(/(\/[^/]+)(\/[^/]+\/?)$/, '$1') : pathname;
   return parentPath ? sidebar[parentPath] : [];
 };

package/dist/features/configPlugins/schema.js

@@ -28,7 +28,7 @@ function getUnifiedPluginSchema(Joi) {
 function getSchemas() {
   return {
     resolve: (Joi) => Joi.object({
-      docDirs: Joi.array().items(Joi.string()).optional(),
+      docDirs: Joi.array().items(Joi.alternatives(Joi.string(), Joi.object({ dir: Joi.string(), type: Joi.string().optional() }))).optional(),
       entityDirs: Joi.array().items(Joi.object({ type: Joi.string(), dir: Joi.string() })).optional(),
       codeBlockMode: Joi.string().valid("active", "passive").optional(),
       entryFile: Joi.string().optional()

package/dist/features/meta.d.ts

@@ -1,4 +1,5 @@
 import type { IApi } from "../types";
+export declare const TABS_META_PATH = "dumi/meta/tabs.ts";
 export declare const ATOMS_META_PATH = "dumi/meta/atoms.ts";
 declare const _default: (api: IApi) => void;
 export default _default;

package/dist/features/meta.js

@@ -20,19 +20,22 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var meta_exports = {};
 __export(meta_exports, {
   ATOMS_META_PATH: () => ATOMS_META_PATH,
+  TABS_META_PATH: () => TABS_META_PATH,
   default: () => meta_default
 });
 module.exports = __toCommonJS(meta_exports);
 var import_plugin_utils = require("umi/plugin-utils");
+var import_tabs = require("./tabs");
+var TABS_META_PATH = "dumi/meta/tabs.ts";
 var ATOMS_META_PATH = "dumi/meta/atoms.ts";
 var meta_default = (api) => {
-  const routeFiles = [];
+  const metaFiles = [];
   api.modifyRoutes((routes) => {
-    routeFiles.length = 0;
+    metaFiles.length = 0;
     Object.values(routes).forEach((route) => {
-      if (!route.isLayout && !/\*|:/.test(route.path)) {
-        routeFiles.push({
-          index: routeFiles.length,
+      if (!route.isLayout && !/\*|:/.test(route.path) && !(0, import_tabs.isTabRouteFile)(route.file)) {
+        metaFiles.push({
+          index: metaFiles.length,
           file: route.file,
           id: route.id
         });
@@ -40,7 +43,7 @@ var meta_default = (api) => {
     });
     return routes;
   });
-  api.onGenerateFiles(() => {
+  api.onGenerateFiles(async () => {
     api.writeTmpFile({
       noPluginDir: true,
       path: ATOMS_META_PATH,
@@ -49,32 +52,51 @@ var meta_default = (api) => {
     api.writeTmpFile({
       noPluginDir: true,
       path: "dumi/meta/index.ts",
-      content: import_plugin_utils.Mustache.render(`{{#routeFiles}}
+      content: import_plugin_utils.Mustache.render(`{{#metaFiles}}
 import { demos as d{{{index}}}, frontmatter as fm{{{index}}}, toc as toc{{{index}}} } from '{{{file}}}?type=meta';
-{{/routeFiles}}
+{{/metaFiles}}
 
 export { components } from './atoms';
+export { tabs } from './tabs';
 
 export const demos = {
-  {{#routeFiles}}
+  {{#metaFiles}}
   ...d{{{index}}},
-  {{/routeFiles}}
+  {{/metaFiles}}
 };
 
-export const routesMeta = {
-  {{#routeFiles}}
-  '{{{id}}}': { frontmatter: fm{{{index}}}, toc: toc{{{index}}} },
-  {{/routeFiles}}
-}`, { routeFiles })
+export const filesMeta = {
+  {{#metaFiles}}
+  '{{{id}}}': {
+    frontmatter: fm{{{index}}},
+    toc: toc{{{index}}},
+    {{#tabs}}
+    tabs: {{{tabs}}},
+    {{/tabs}}
+  },
+  {{/metaFiles}}
+}`, {
+        metaFiles: await api.applyPlugins({
+          type: api.ApplyPluginsType.modify,
+          key: "dumi.modifyMetaFiles",
+          initialValue: metaFiles
+        })
+      })
     });
     api.writeTmpFile({
       noPluginDir: true,
       path: "dumi/meta/runtime.ts",
-      content: `import { routesMeta } from '.';
+      content: `import { filesMeta, tabs } from '.';
 export const patchRoutes = ({ routes }) => {
   Object.values(routes).forEach((route) => {
-    if (routesMeta[route.id]) {
-      route.meta = { ...route.meta, ...routesMeta[route.id] };
+    if (filesMeta[route.id]) {
+      route.meta = { ...route.meta, ...filesMeta[route.id] };
+
+      // apply real tab data from id
+      route.meta.tabs = route.meta.tabs?.map(id => ({
+        ...tabs[id],
+        ...filesMeta[id],
+      }));
     }
   });
 }
@@ -85,5 +107,6 @@ export const patchRoutes = ({ routes }) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ATOMS_META_PATH
+  ATOMS_META_PATH,
+  TABS_META_PATH
 });

package/dist/features/parser.js

@@ -35,7 +35,13 @@ var parser_default = (api) => {
       content: `export const components = ${JSON.stringify(data.components, null, 2)};`
     });
   };
-  api.describe({ key: "apiParser", enableBy: api.EnableBy.config });
+  api.describe({
+    key: "apiParser",
+    enableBy: api.EnableBy.config,
+    config: {
+      schema: (Joi) => Joi.object()
+    }
+  });
   api.modifyDefaultConfig((memo) => {
     var _a;
     if (!((_a = api.userConfig.resolve) == null ? void 0 : _a.entryFile)) {

package/dist/features/routes.js

@@ -32,6 +32,9 @@ var import_path = __toESM(require("path"));
 var import_pluralize = require("pluralize");
 var import_plugin_utils = require("umi/plugin-utils");
 var CTX_LAYOUT_ID = "dumi-context-layout";
+function normalizeDocDir(docDir) {
+  return typeof docDir === "object" ? docDir : { dir: docDir };
+}
 function localizeUmiRoute(route, locales) {
   const locale = locales.find((locale2) => route.path.endsWith(`/${locale2.id}`) && import_path.default.parse(route.file).name.endsWith(`.${locale2.id}`));
   if (locale) {
@@ -44,9 +47,11 @@ function localizeUmiRoute(route, locales) {
 var routes_default = (api) => {
   var _a, _b, _c;
   const extraWatchPaths = [
-    ...((_b = (_a = api.userConfig.resolve) == null ? void 0 : _a.entityDirs) == null ? void 0 : _b.map(({ dir }) => dir)) || ["docs"],
-    ...((_c = api.userConfig.resolve) == null ? void 0 : _c.docDirs) || []
-  ].map((dir) => import_path.default.join(api.cwd, dir, "**/*.md"));
+    ...((_a = api.userConfig.resolve) == null ? void 0 : _a.entityDirs) || [],
+    ...((_c = (_b = api.userConfig.resolve) == null ? void 0 : _b.docDirs) == null ? void 0 : _c.map(normalizeDocDir)) || [
+      { dir: "docs" }
+    ]
+  ].map(({ dir }) => import_path.default.join(api.cwd, dir, "**/*.md"));
   const pagesDir = import_path.default.join(api.cwd, ".dumi/pages");
   api.describe({ key: "dumi:routes" });
   api.addTmpGenerateWatcherPaths(() => extraWatchPaths);
@@ -110,7 +115,7 @@ var routes_default = (api) => {
       route.file = import_path.default.resolve(pagesDir, route.file);
       routes[route.id] = route;
     });
-    docDirs.forEach((dir) => {
+    docDirs.map(normalizeDocDir).forEach(({ type, dir }) => {
       const base = import_path.default.join(api.cwd, dir);
       const dirRoutes = (0, import_core.getConventionRoutes)({
         base,
@@ -119,6 +124,11 @@ var routes_default = (api) => {
       Object.entries(dirRoutes).forEach(([key, route]) => {
         route.id = `${dir}/${key}`;
         route.parentId = docLayoutId;
+        if (type) {
+          const pluralType = (0, import_pluralize.plural)(type);
+          route.path = `${pluralType}/${route.path}`.replace(/\/+$/, "/");
+          route.absPath = `/${route.path}`;
+        }
         route.file = import_path.default.resolve(base, route.file);
         localizeUmiRoute(route, api.config.locales);
         routes[route.id] = route;

package/dist/features/tabs.d.ts

@@ -0,0 +1,5 @@
+import type { IApi } from "../types";
+export declare function isTabRouteFile(file: string): boolean;
+export declare function getTabKeyFromFile(file: string): string;
+declare const _default: (api: IApi) => void;
+export default _default;

package/dist/features/tabs.js

@@ -0,0 +1,106 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/features/tabs.ts
+var tabs_exports = {};
+__export(tabs_exports, {
+  default: () => tabs_default,
+  getTabKeyFromFile: () => getTabKeyFromFile,
+  isTabRouteFile: () => isTabRouteFile
+});
+module.exports = __toCommonJS(tabs_exports);
+var import_utils = require("@umijs/core/dist/route/utils");
+var import_path = __toESM(require("path"));
+var import_plugin_utils = require("umi/plugin-utils");
+var import_meta = require("./meta");
+function isTabRouteFile(file) {
+  return file.includes("$tab-");
+}
+function getTabKeyFromFile(file) {
+  return file.match(/\$tab-([^.]+)/)[1];
+}
+var tabs_default = (api) => {
+  const tabs = [];
+  api.describe({ key: void 0 });
+  api.modifyRoutes((routes) => {
+    tabs.length = 0;
+    Object.values(routes).forEach((route) => {
+      if (isTabRouteFile(route.file)) {
+        delete routes[route.id];
+        const rtlFile = (0, import_plugin_utils.winPath)(import_path.default.relative(api.cwd, route.file));
+        const routeId = (0, import_utils.createRouteId)(rtlFile);
+        const tabKey = getTabKeyFromFile(rtlFile);
+        const parentFile = route.file.replace(/\$tab-[^.]+\./, "");
+        tabs.push({
+          index: tabs.length,
+          key: tabKey,
+          id: `${routeId}`,
+          file: route.file,
+          parentFile
+        });
+      }
+    });
+    return routes;
+  });
+  api.register({
+    key: "dumi.modifyMetaFiles",
+    fn: (metaFiles) => {
+      const tabsMapping = tabs.reduce((ret, tab) => ({
+        ...ret,
+        [tab.parentFile]: [...ret[tab.parentFile] || [], tab]
+      }), {});
+      Object.values(metaFiles).forEach((metaFile) => {
+        if (tabsMapping[metaFile.file]) {
+          metaFile.tabs = JSON.stringify(tabsMapping[metaFile.file].map(({ id }) => id));
+        }
+      });
+      tabs.forEach((tab) => {
+        metaFiles.push({
+          id: tab.id,
+          file: tab.file,
+          index: metaFiles.length
+        });
+      });
+      return metaFiles;
+    }
+  });
+  api.onGenerateFiles(() => {
+    api.writeTmpFile({
+      noPluginDir: true,
+      path: import_meta.TABS_META_PATH,
+      content: import_plugin_utils.Mustache.render(`{{#tabs}}
+import * as tab{{{index}}} from '{{{file}}}';
+{{/tabs}}
+
+export const tabs = {
+  {{#tabs}}
+  '{{{id}}}': { key: '{{{key}}}', components: tab{{{index}}} },
+  {{/tabs}}
+}
+`, { tabs })
+    });
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getTabKeyFromFile,
+  isTabRouteFile
+});

package/dist/loaders/markdown/index.js

@@ -71,20 +71,15 @@ export const toc = {{{toc}}}
         }
       }));
     } else {
+      const isFragment = Boolean(this.resourcePath.includes("$tab-") || this.resourceQuery);
       cb(null, `${Object.values(opts.builtins).map((item) => `import ${item.specifier} from '${item.source}';`).join("\n")}
-import React, { useEffect } from 'react';
-import { useSiteData } from 'dumi';
+import React from 'react';${isFragment ? "" : `
+import { DumiPage } from 'dumi'`}
 
 // export named function for fastRefresh
 // ref: https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#edits-always-lead-to-full-reload
 function DumiMarkdownContent() {
-  const { setLoading } = useSiteData();
-
-  useEffect(() => {
-    setLoading(false);
-  }, []);
-
-  return ${ret.content};
+  return ${isFragment ? ret.content : `<DumiPage>${ret.content}</DumiPage>`};
 }
 
 export default DumiMarkdownContent;`);

package/dist/loaders/markdown/transformer/rehypeJsxify.js

@@ -86,7 +86,7 @@ function rehypeJsxify() {
         delete copy.value;
       }
     });
-    return toJs(esTree, { handlers: jsx }).value;
+    return toJs(esTree, { handlers: jsx }).value.trim().slice(0, -1);
   };
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/loaders/markdown/transformer/remarkMeta.js

@@ -25,6 +25,7 @@ __export(remarkMeta_exports, {
   default: () => remarkMeta
 });
 module.exports = __toCommonJS(remarkMeta_exports);
+var import_tabs = require("../../../features/tabs");
 var import_js_yaml = __toESM(require("js-yaml"));
 var import_path = __toESM(require("path"));
 var import_plugin_utils = require("umi/plugin-utils");
@@ -52,8 +53,12 @@ function remarkMeta(opts) {
         });
       },
       () => {
-        const pathWithoutIndex = opts.fileAbsPath.replace(/(\/index([^/]+)?)?\.md$/, "");
-        vFile.data.frontmatter.title = import_plugin_utils.lodash.startCase(import_path.default.basename(pathWithoutIndex));
+        if ((0, import_tabs.isTabRouteFile)(opts.fileAbsPath)) {
+          vFile.data.frontmatter.title = import_plugin_utils.lodash.startCase((0, import_tabs.getTabKeyFromFile)(opts.fileAbsPath));
+        } else {
+          const pathWithoutIndex = opts.fileAbsPath.replace(/(\/index([^/]+)?)?\.md$/, "");
+          vFile.data.frontmatter.title = import_plugin_utils.lodash.startCase(import_path.default.basename(pathWithoutIndex));
+        }
       }
     ];
     while (!vFile.data.frontmatter.title && titleReaders.length) {

package/dist/preset.js

@@ -36,6 +36,7 @@ var preset_default = (api) => {
       require.resolve("./features/compile"),
       require.resolve("./features/routes"),
       require.resolve("./features/meta"),
+      require.resolve("./features/tabs"),
       require.resolve("./features/theme"),
       require.resolve("./features/locales"),
       require.resolve("./features/parser")

package/dist/types.d.ts

@@ -9,7 +9,10 @@ import type { IApi as IUmiApi } from 'umi';
 declare type IUmiConfig = IUmiApi['config'];
 export interface IDumiConfig extends IUmiConfig {
     resolve: {
-        docDirs: string[];
+        docDirs: (string | {
+            type?: string;
+            dir: string;
+        })[];
         entityDirs: {
             type: string;
             dir: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.5",
   "description": "Framework for developing UI components",
   "keywords": [],
   "license": "MIT",

package/theme-default/locales/en-US.json

@@ -14,5 +14,6 @@
   "api.component.default": "Default",
   "api.component.required": "(required)",
   "api.component.loading": "Properties definition is resolving, wait a moment...",
-  "api.component.not.found": "Properties definition not found for {id} component"
+  "api.component.not.found": "Properties definition not found for {id} component",
+  "content.tabs.default": "Doc"
 }

package/theme-default/locales/zh-CN.json

@@ -14,5 +14,6 @@
   "api.component.default": "默认值",
   "api.component.required": "(必选)",
   "api.component.loading": "属性定义正在解析中，稍等片刻...",
-  "api.component.not.found": "未找到 {id} 组件的属性定义"
+  "api.component.not.found": "未找到 {id} 组件的属性定义",
+  "content.tabs.default": "文档"
 }

package/theme-default/slots/Content/index.less

@@ -48,7 +48,7 @@
   max-width: 100%;
 
   &:not([data-no-sidebar]) {
-    padding: 48px;
+    padding: @s-content-padding;
     background-color: #fff;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;

package/theme-default/slots/ContentTabs/index.d.ts

@@ -0,0 +1,11 @@
+import { useRouteMeta } from 'dumi';
+import { type FC } from 'react';
+import './index.less';
+declare type IContentTabs = ReturnType<typeof useRouteMeta>['tabs'];
+export interface IContentTabsProps {
+    tabs: IContentTabs;
+    tabKey?: string;
+    onChange: (tab?: NonNullable<IContentTabs>[0]) => void;
+}
+declare const ContentTabs: FC<IContentTabsProps>;
+export default ContentTabs;

package/theme-default/slots/ContentTabs/index.js

@@ -0,0 +1,35 @@
+import { useIntl } from 'dumi';
+import React from 'react';
+import "./index.less";
+
+var ContentTabs = function ContentTabs(_ref) {
+  var tabs = _ref.tabs,
+      key = _ref.tabKey,
+      onChange = _ref.onChange;
+  var intl = useIntl(); // TODO: tab.Extra & tab.Action render
+
+  return Boolean(tabs === null || tabs === void 0 ? void 0 : tabs.length) ? /*#__PURE__*/React.createElement("ul", {
+    className: "dumi-default-content-tabs"
+  }, /*#__PURE__*/React.createElement("li", {
+    onClick: function onClick() {
+      return onChange();
+    },
+    "data-active": !key || undefined
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button"
+  }, intl.formatMessage({
+    id: 'content.tabs.default'
+  }))), tabs.map(function (tab) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: tab.key,
+      onClick: function onClick() {
+        return onChange(tab);
+      },
+      "data-active": key === tab.key || undefined
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button"
+    }, tab.frontmatter.title));
+  })) : null;
+};
+
+export default ContentTabs;

package/theme-default/slots/ContentTabs/index.less

@@ -0,0 +1,57 @@
+@import (reference) '../../styles/variables.less';
+
+.@{prefix}-content-tabs {
+  list-style-type: none;
+  display: flex;
+  align-items: center;
+  height: 60px;
+  margin: -@s-content-padding -@s-content-padding @s-content-padding -@s-content-padding;
+  padding: 0 @s-content-padding;
+  border-bottom: 1px solid @c-border-light;
+
+  [data-no-sidebar] & {
+    margin: 0 0 @s-content-padding;
+    padding: 0;
+  }
+
+  > li {
+    height: inherit;
+
+    > 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-right: 42px;
+    }
+
+    &[data-active] {
+      position: relative;
+
+      > button {
+        color: @c-text;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: -1px;
+        height: 1px;
+        background-color: @c-primary;
+      }
+    }
+  }
+}

package/theme-default/styles/variables.less

@@ -1,6 +1,7 @@
 @prefix: dumi-default;
 
 @s-content-width: 1392px;
+@s-content-padding: 48px;
 @s-sidebar-width: 184px;
 @s-header-height: 76px;