dumi 2.0.0-beta.2 → 2.0.0-beta.5

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/features/theme/index.js

@@ -109,7 +109,7 @@ export { default } from '${item.source}';`
       content: `import React, { useState, useEffect } from 'react';
 import { useOutlet, history } from 'dumi';
 import { SiteContext } from '${(0, import_plugin_utils.winPath)(require.resolve("../../client/theme-api/context"))}';
-import { demos } from '../meta';
+import { demos, components } from '../meta';
 import { locales } from '../locales/config';
 
 export default function DumiContextWrapper() {
@@ -124,6 +124,7 @@ export default function DumiContextWrapper() {
   return (
     <SiteContext.Provider value={{
       demos,
+      components,
       locales,
       loading,
       setLoading,

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/loaders/page/index.d.ts

@@ -0,0 +1 @@
+export default function pageMetaLoader(this: any, raw: string): string;

package/dist/loaders/page/index.js

@@ -0,0 +1,41 @@
+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/loaders/page/index.ts
+var page_exports = {};
+__export(page_exports, {
+  default: () => pageMetaLoader
+});
+module.exports = __toCommonJS(page_exports);
+var import_utils = require("../../utils");
+var import_path = __toESM(require("path"));
+var import_plugin_utils = require("umi/plugin-utils");
+function pageMetaLoader(raw) {
+  const pathWithoutIndex = this.resourcePath.replace(/(\/index([^/]+)?)?\.(j|t)sx?$/, "");
+  let { frontmatter } = (0, import_utils.parseCodeFrontmatter)(raw);
+  frontmatter || (frontmatter = {});
+  frontmatter.title ?? (frontmatter.title = import_plugin_utils.lodash.startCase(import_path.default.basename(pathWithoutIndex)));
+  return `export const frontmatter = ${JSON.stringify(frontmatter)};
+export const toc = [];
+export const demos = {};`;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/dist/preset.js

@@ -36,8 +36,10 @@ 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/locales"),
+      require.resolve("./features/parser")
     ]
   };
 };

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+import type AtomAssetsParser from "./assetParsers/atom";
 import type { IDumiDemoProps } from "./client/theme-api/DumiDemo";
 import type { ILocalesConfig, IThemeConfig } from "./client/theme-api/types";
 import type { IThemeLoadResult } from "./features/theme/loader";
@@ -8,12 +9,16 @@ 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;
         }[];
         codeBlockMode: 'active' | 'passive';
+        entryFile?: string;
     };
     locales: ILocalesConfig;
     themeConfig: IThemeConfig;
@@ -62,6 +67,7 @@ export declare type IApi = IUmiApi & {
     userConfig: IDumiUserConfig;
     service: IUmiApi['service'] & {
         themeData: IThemeLoadResult;
+        atomParser: AtomAssetsParser;
     };
     /**
      * register a new tech stack

package/dist/utils.d.ts

@@ -13,3 +13,10 @@ export declare const getFileRangeLines: (content: string, range: string) => stri
  * @param filePath  source file path
  */
 export declare const getFileContentByRegExp: (content: string, regexp: string, filePath: string) => string;
+/**
+ * parse frontmatter from code string
+ */
+export declare function parseCodeFrontmatter(raw: string): {
+    code: string;
+    frontmatter: Record<string, any> | null;
+};

package/dist/utils.js

@@ -1,6 +1,8 @@
+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)
@@ -14,6 +16,7 @@ var __copyProps = (to, from, except, desc) => {
   }
   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/utils.ts
@@ -21,9 +24,11 @@ var utils_exports = {};
 __export(utils_exports, {
   getFileContentByRegExp: () => getFileContentByRegExp,
   getFileRangeLines: () => getFileRangeLines,
-  getRoutePathFromFsPath: () => getRoutePathFromFsPath
+  getRoutePathFromFsPath: () => getRoutePathFromFsPath,
+  parseCodeFrontmatter: () => parseCodeFrontmatter
 });
 module.exports = __toCommonJS(utils_exports);
+var import_js_yaml = __toESM(require("js-yaml"));
 var import_plugin_utils = require("umi/plugin-utils");
 function getRoutePathFromFsPath(fsPath) {
   return import_plugin_utils.lodash.kebabCase((0, import_plugin_utils.winPath)(fsPath).replace(/((\/|^)index(\.[a-zA-Z-]+)?)?\.\w+$/g, ""));
@@ -48,9 +53,20 @@ Error: ${err}`);
     return content;
   }
 };
+function parseCodeFrontmatter(raw) {
+  const [, comment = "", code = ""] = raw.replace(/^\n\s*/, "").match(/^(\/\*\*[^]*?\n\s*\*\/)?(?:\s|\n)*([^]+)?$/);
+  const yamlComment = comment.replace(/^\/|\/$/g, "").replace(/(^|\n)\s*\*+/g, "$1");
+  let frontmatter = null;
+  try {
+    frontmatter = import_js_yaml.default.load(yamlComment);
+  } catch {
+  }
+  return { code: frontmatter ? code : raw, frontmatter };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   getFileContentByRegExp,
   getFileRangeLines,
-  getRoutePathFromFsPath
+  getRoutePathFromFsPath,
+  parseCodeFrontmatter
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.5",
   "description": "Framework for developing UI components",
   "keywords": [],
   "license": "MIT",
@@ -59,6 +59,7 @@
     "@types/mdast": "^3.0.10",
     "@umijs/bundler-utils": "^4.0.22",
     "@umijs/core": "^4.0.22",
+    "dumi-afx-deps": "^1.0.0-alpha.1",
     "dumi-assets-types": "2.0.0-alpha.0",
     "estree-util-to-js": "^1.1.0",
     "estree-util-visit": "^1.2.0",
@@ -110,7 +111,7 @@
     "@umijs/test": "^4.0.22",
     "cross-env": "^7.0.3",
     "eslint": "^8.20.0",
-    "father": "^4.0.3",
+    "father": "^4.0.7",
     "husky": "^8.0.1",
     "jest": "^27.0.0",
     "lint-staged": "^13.0.3",

package/theme-default/builtins/API/index.d.ts

@@ -0,0 +1,5 @@
+import { type FC } from 'react';
+declare const API: FC<{
+    id: string;
+}>;
+export default API;

package/theme-default/builtins/API/index.js

@@ -0,0 +1,57 @@
+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 { useAtomAssets, useIntl } from 'dumi';
+import React from 'react';
+
+var API = function API(_ref) {
+  var _definition$propsConf;
+
+  var id = _ref.id;
+
+  var _useAtomAssets = useAtomAssets(),
+      components = _useAtomAssets.components;
+
+  var definition = components === null || components === void 0 ? void 0 : components[id];
+  var intl = useIntl();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "markdown"
+  }, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, intl.formatMessage({
+    id: 'api.component.name'
+  })), /*#__PURE__*/React.createElement("th", null, intl.formatMessage({
+    id: 'api.component.description'
+  })), /*#__PURE__*/React.createElement("th", null, intl.formatMessage({
+    id: 'api.component.type'
+  })), /*#__PURE__*/React.createElement("th", null, intl.formatMessage({
+    id: 'api.component.default'
+  })))), /*#__PURE__*/React.createElement("tbody", null, definition && (_definition$propsConf = definition.propsConfig) !== null && _definition$propsConf !== void 0 && _definition$propsConf.properties ? Object.entries(definition.propsConfig.properties).map(function (_ref2) {
+    var _definition$propsConf2;
+
+    var _ref3 = _slicedToArray(_ref2, 2),
+        name = _ref3[0],
+        prop = _ref3[1];
+
+    return /*#__PURE__*/React.createElement("tr", {
+      key: name
+    }, /*#__PURE__*/React.createElement("td", null, name), /*#__PURE__*/React.createElement("td", null, prop.description || '--'), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("code", null, prop.type)), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("code", null, (_definition$propsConf2 = definition.propsConfig.required) !== null && _definition$propsConf2 !== void 0 && _definition$propsConf2.includes(name) ? intl.formatMessage({
+      id: 'api.component.required'
+    }) : prop.default || '--')));
+  }) : /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    colSpan: 4
+  }, intl.formatMessage({
+    id: "api.component.".concat(components ? 'not.found' : 'loading')
+  }, {
+    id: id
+  }))))));
+};
+
+export default API;

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

@@ -7,5 +7,13 @@
   "previewer.actions.codepen": "Open in CodePen (Not implemented)",
   "previewer.actions.separate": "Open in separate page",
   "404.title": "PAGE NOT FOUND",
-  "404.back": "Back to homepage"
+  "404.back": "Back to homepage",
+  "api.component.name": "Name",
+  "api.component.description": "Description",
+  "api.component.type": "Type",
+  "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",
+  "content.tabs.default": "Doc"
 }

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

@@ -7,5 +7,13 @@
   "previewer.actions.codepen": "在 CodePen 中打开（未实现）",
   "previewer.actions.separate": "在独立页面中打开",
   "404.title": "页面未找到",
-  "404.back": "返回首页"
+  "404.back": "返回首页",
+  "api.component.name": "属性名",
+  "api.component.description": "描述",
+  "api.component.type": "类型",
+  "api.component.default": "默认值",
+  "api.component.required": "(必选)",
+  "api.component.loading": "属性定义正在解析中，稍等片刻...",
+  "api.component.not.found": "未找到 {id} 组件的属性定义",
+  "content.tabs.default": "文档"
 }

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

@@ -23,6 +23,24 @@
     padding-right: 24px;
     background-color: tint(@c-site-bg, 50%);
   }
+
+  // table
+  table {
+    width: 100%;
+  }
+
+  th {
+    background-color: tint(@c-site-bg, 50%);
+  }
+
+  th,
+  td {
+    padding-block-start: 10px;
+    padding-block-end: 10px;
+    padding-inline-start: 16px;
+    padding-inline-end: 16px;
+    border-color: @c-border-light;
+  }
 }
 
 .@{prefix}-content {
@@ -30,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;
 

package/dist/client/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["src/*"],
-      "@@/*": ["src/.umi/*"],
-      "dumi": ["."],
-      "dumi/theme": ["src/client/theme-api"],
-      "dumi/theme/*": ["src/client/theme-default/*"]
-    },
-    "types": ["../../src/.umi/typings"]
-  }
-}