@zat-design/sisyphus-react 3.1.4 → 3.1.5-beta.10

package/.dumi/theme/layouts/BasicLayout.tsx

@@ -0,0 +1,88 @@
+import React, { useContext, useState } from 'react'
+import { IRouteComponentProps } from '@umijs/types'
+import { context, Link } from 'dumi/theme'
+import Navbar from './components/Navbar'
+import SideMenu from './components/SideMenu'
+import SlugList from 'dumi-theme-default/src/components/SlugList'
+import SearchBar from 'dumi-theme-default/src/components/SearchBar'
+import 'dumi-theme-default/src/style/layout.less'
+
+const Hero = hero => (
+  <>
+    <div className="__dumi-default-layout-hero">
+      {hero.image && <img src={hero.image} />}
+      <h1>{hero.title}</h1>
+      <div dangerouslySetInnerHTML={{ __html: hero.desc }} />
+      {hero.actions &&
+        hero.actions.map(action => (
+          <Link to={action.link} key={action.text}>
+            <button type="button">{action.text}</button>
+          </Link>
+        ))}
+    </div>
+  </>
+)
+
+const Features = features => (
+  <div className="__dumi-default-layout-features">
+    {features.map(feat => (
+      <dl key={feat.title} style={{ backgroundImage: feat.icon ? `url(${feat.icon})` : undefined }}>
+        {feat.link ? (
+          <Link to={feat.link}>
+            <dt>{feat.title}</dt>
+          </Link>
+        ) : (
+          <dt>{feat.title}</dt>
+        )}
+        <dd dangerouslySetInnerHTML={{ __html: feat.desc }} />
+      </dl>
+    ))}
+  </div>
+)
+
+const Layout: React.FC<IRouteComponentProps> = ({ children, location }) => {
+  const ctx = useContext(context)
+  const {
+    config: { mode },
+    meta
+  } = ctx
+  const [menuCollapsed, setMenuCollapsed] = useState<boolean>(true)
+  const isSiteMode = mode === 'site'
+  const showHero = isSiteMode && meta.hero
+  const showFeatures = isSiteMode && meta.features
+  const showSideMenu = meta.sidemenu !== false && !showHero && !showFeatures && !meta.gapless
+  const showSlugs =
+    !showHero &&
+    !showFeatures &&
+    Boolean(meta.slugs?.length) &&
+    (meta.toc === 'content' || meta.toc === undefined) &&
+    !meta.gapless
+  return (
+    <div
+      className="__dumi-default-layout"
+      data-route={location.pathname}
+      data-show-sidemenu={String(showSideMenu)}
+      data-show-slugs={String(showSlugs)}
+      data-site-mode={isSiteMode}
+      data-gapless={String(!!meta.gapless)}
+      onClick={() => {
+        if (menuCollapsed) return
+        setMenuCollapsed(true)
+      }}
+    >
+      <Navbar location={location} selectedKeys={[meta?.nav?.path]} navPrefix={<SearchBar />} />
+      <SideMenu mobileMenuCollapsed={menuCollapsed} location={location} />
+      {showSlugs && <SlugList slugs={meta.slugs} className="__dumi-default-layout-toc" />}
+      {showHero && Hero(meta.hero)}
+      {showFeatures && Features(meta.features)}
+      <div className="__dumi-default-layout-content">
+        {children}
+        {(showHero || showFeatures) && meta.footer && (
+          <div className="__dumi-default-layout-footer" dangerouslySetInnerHTML={{ __html: meta.footer }} />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Layout

package/.dumi/theme/layouts/components/Dark.less

@@ -0,0 +1,157 @@
+/* 颜色表 */
+@c-primary: #4569d4;
+@c-heading: #454d64;
+@c-text: #454d64;
+@c-secondary: #717484;
+@c-link: @c-primary;
+@c-border: #ebedf1;
+@c-btn-border: #dadadf;
+@c-light-bg: #f9fafb;
+
+/* 尺寸表 */
+@s-nav-height: 64px;
+@s-mobile-nav-height: 50px;
+@s-menu-width: 260px;
+@s-site-menu-width: 300px;
+@s-menu-mobile-width: 240px;
+@s-content-margin: 58px;
+
+@img-logo: 'data:image/png;base64,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';
+@prefix: __dumi-default;
+@mobile: ~'only screen and (max-width: 767px)';
+@desktop: ~'only screen and (min-width: 768px)';
+@icons: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcwAAAA8CAMAAADc4HoZAAABFFBMVEUAAABGT2VGTmZaYXpCvGtIUGg3tGBGTmU3s2A/tmFKUGxFTmRFTWVQWmxFTWRJUGZFTWRGTmRLWWpFTWRGTmVGTmVLVG1FTmRGTWVHTmVFTWRHUGdFTWRGT2ZFTWVGTmU6t2I7xHA3tF9GTWRIT2dFTmRGTmVFTWQ3s2BFTWRGTmVGTmZKUmVFTWRFTWRGTWRGTmVcXHxFTmVFTmVGTmVFTWRIUGdGTWVNU3FGT2ZGTmVHTmVFTWRFTWVFTmVITWRHUGZFTWVFTmRGTmZGTmVFTWVLU2g4tF83tGBFTWQ3s1/LzdT09faoq7Zwdoieoq58gpLj5OeCh5fq6+2/wsmTmKWQlKJfZnpIUGfU1tu0t8BOVWynlyFSAAAASXRSTlMAkoAHEkDQ/dgYFuf0C8gj+KQQmm1oEuyNWNg53kSXfCYI5tEtzq7ivbOgTBy924R1BfHUibcpYw1JcU7v+7E3Nav6XVPDGraPqQuKawAACh1JREFUeNrsm2lT6kgUhg9QFFUkgWDYZfnAVsi+KQJeQdGqt1xm7jZ3lv//PyYdhe7QWQw1zP0w83xQsY9Um4fTp7vToeBczmaX5MN5rXZO/+NGJzGuLejnkw3dADehLHkQyceAWD5C/0my9XqWPLlCK9WHQScirUMk18g7J9ZosYLFajFyT8siLIpuyQkHKBDw4NgYsnDr0Xybaii60rjYzsmdbrqnw0TvpbvkhjYuzinygDXJXLewR2/O/f73w1cWCUj0LkmiU8SeYsc9LXMZIJNjyXkqmbWQCzV8ICawzLO8jh3q4IyciYfugMnMMGYT4C4UJ2fOEbbSc0EyrVp4T/7u4kiZs6jANjwBxkupWMLG7NIlLZvxM+As3nRLTsD/N5xtekmHIEQuhBAoBuREtmaXWVgB41Smc97JbMZA7pqcKKgopbu7FC1BLUgD22MyeVnPWD0bonLLeCQRhIkzQNnz6gHiK0HmxeF4qkKPSsVygh2x2q50SmlZIGIyiQo8OY+XGVExOLVM2WVRbAkDSma0609aQaxKMgOo6YjQ77Tc8d3laxPRxS7R564yI8WSFkymgUNuJqlbomQLisblpnNAf0nrB1j06rTsA7n0SE5L2skkh+Qcm2CP3vGV2QHWp5Ypu4wDosumRpyzNrBwcFmqk4166dBmrFgJ5aeDKhvSklWLBLokgBhcaF3bFL59lV45EQsR3QLVfV0uAuNFhEy2JaC/fcveMVC8ltKSy3RITtjRl34yDSj0r8rMNkyXQksByJOdCmIdslNAKS7V0BIKdpmGQ1+S9slA2IVa60My89HoRKyZ5XTD8rhBX1DwEN85Gw53drIsT6W0FGTKyYmYtgcI427rI1NB5bQyZZeTuNCSXaEpBX2Cotm9qWqdJOqqajN85y8zTC6E8SGZGalmjja4uaQC0OUy0UzSAckNTKS0FGTKyYmYbfQP42brcFGr/X5+N/XDNVG+36+eXCZ3Kbbkbd644cHBW6bpnTlx0vZO6PL0NI/LE8uksxtUqQ7sUgpoAfp0TgLzqQ4oAFkkeFqadCwFxJMz4SKTwogVpIsaBtrv+qdQzZ8ibSB8cpncJW+Z68iQTBq5EXG6N6UIvTHVr2hPpHTX9ZY5Rf0ImfIEyEMmFWHQmk89gHKhBShCP68UoHVfFtZnqV0yahWYVLTdJyMFwE0ms8l+cnFJfWyIuM2TyuQuecsW4xFJMMcd0S1PzBRQGdkaOKosc4DKYn1amSM2rb4H5lwmaVUVqEXJItoA1LBGokwoHWKUS0AqBZTKxOgocJXJl74uLi+Be+I2TyuTu+SkkCInmrZS3kNXkMnnF9RFT5Qpv1cVJkYwmRzxlavMIRClmTgBYmIeU1bpfC+WqS6RKPOKOTxjaWlZXSpWcp4xq1dBZIaBTxH+v95kySLyCQifSCZ3WYuTnYbDKNvpnVMVPUpulvSGPiFRJlq39M5E95bZNYZXD1icTOaoHophQ1EgLcpkrBOsdLJimbglsstMzpnGxZtSE0vjwlKalGVyuEzZJSXQIxJs2kVVDJOLC6NKVK/0jLWrzEzPYB/G6SxV9pJZq2XlyXSHDqlAjW5XjaSCzfsfom2XiX3hbEN4y3G/r64agy7ZifRrXOa6wmMkmT7YZfbwTuPsUoGi2WUyWOlkxZJIkskGWD7YkpWcb4NtAJlVm8tHYEF2m6KofW/pXLe2INxkTs0QeszB5N5rmJVckg55RzI+gTpEToFySRZ1GAcy94lg8AmOtmtSh2QnNebrTCnmWJlzHRatYeRegbomWSZpU2Cq0UdkdgLKlBMzA2EZNpJkmnmZQ9EwqtSDMijqGU+ZeeSqD/pCkikhZ6ZsU8cNc+kuc3EoU0tgT4hE5q3ELgZCTIBh1nECVAWm0fMs3daA8bV4wUN7f0nhAkdCgkztnx9mZ5iQ+zDLSLxdx5bZFK+Tp8wZDNLqFEAmr5myzRh36TfM8obXX01eAeyaqT4LhYvouMccLzNSRIlZmwGzLnGskVWWWWhBmgBZlXPpOwHieEyA5joGsktZJvumXBN5yzSQW/puGhy2XGBDTjZbWDGXLhMgRZ4ArQF8f375+vnP5y/gFawKYHzlEuOzNPGRSVFgSkT37LcCYDSidpnnCUCQaTmUlyaW1QAyxaVJAVjLLmWZViQSUW+Z9RsWE1DmFuMIOZAddIMtTSrA69PTy/dfXr798QMo7GVmzjXyijleJqVwV7d6t4rL2+NlUeY5GE6bBnNp0yCQTG4zBYVIWGa6y6SMCmDoKZOuFQDVYDI1FWlyJtimQR8/vv76/O319enrl89/wdjLZEnsFeO/nee6NImv8MAW6zpSssylKLMMxrHbebJM2eZohYrkUpL5HhKfqohdesokbZED1oFk0gC5M/Kje+e7nafi9fnl8y8mn1+ef6AtyXSNOV4mZd4q7wAo+8s8fqOdA7httJd3Hwlpo12WeUZUv0PaVWaCuTSVqxgGkznPYTYiP/w32lfAr0+/fAF+++2PV6ApyvSK8ZcpL034LbAWclm2kEU/4i8z8C0wf5mcENQIcTxkJnuTOMV1ZBxkniceqYkmnRmtR4ooQWVSJwbD16b/LbAGTEffnvD705NpC3lZphxzrEwbYVZg2Dd+c9pZZpCb08FltrChj8nsAGpiDD0py9RWUIvAkFWOuwcFuA0ok4bALCuKswQFvTk9gMnL85fvz99h0ttsmp8+tdt9LlOKuXC5OS1fOa42c3jUUrW6sIGetB8bwVCUuUCgYyPBZa6B+w/KpHsVgOq4adBhTQ8RonIOwE3ACRBjGMNquJ/ODcc9YgQ8NtJVYfLn568vMImtVrmcoiitVmLuFON6bMRfpiOPY/QOD3T16juZ9V6AA10+MhkkE0Ys6yuzXFgTY35fzTw6L03iV8MOMbTt8CpJwWVa02C9PSyUt8NPKtBK0hEHuoYAzAH0G0z0c+IEjIGALDMfdeYCuD88ahmrxJnMuBE77qilLHPkKnOZlhLz9CcNnFu06hg7lLBGRx21DMHkr9+ZJ6HFKya4TC9atIOf6woBIX6SK8AhaM8D0D//ELR3ryLXlV4xV0qElhEiz0PQbcNoOx+CvlJgIT6H4xUTHCMGd1LE4aVTKpa+jyf4y/z5jycE7lXwxxO0gtFu5svECRrz/4NDf7dvxjYQwzAMdGEE8RaWq2ySh/cf6OGoyQCRANLkBHenWqnzxyGU6aVP0zRN0zTtmzUru64ZWZ923kC0n6tT9WnnnL+y5R51pj6L9ahlx7k6UR8kVt2Sh1W35GHVLXlYdUseVt2Sh1W3fK8aDmuSOmyfelyGwpqkjtvnnvMyENYcdeA+fSxaDNYUdeg+TovBmqAO3sdpMVjD1eH7OC0Ga7A6QR+nxWANVafo47QYrIHqJH0eWhDWMHWaPosWhTVInahPHzisIepUffrAYQ1QJ+vTgVgD1IP6/AHM0QJdY511NAAAAABJRU5ErkJggg==';
+
+.@{prefix}-icon {
+  background: url(@icons) no-repeat ~'0 0/230px auto';
+}
+
+/* 颜色表 - dark */
+@c-bg-dark: #141414;
+@c-light-bg-dark: rgba(255,255,255,0.08);
+@c-primary-dark: #7395f7;
+@c-heading-dark: rgba(255, 255, 255, 0.85);
+@c-text-dark: rgba(255, 255, 255, 0.85);
+@c-secondary-dark: rgba(255,255,255,0.65);
+@c-border-dark: #6b6c6d;
+@c-btn-border-dark: #464646;
+
+.@{prefix}-dark {
+  position: fixed;
+  right: 20px;
+  top: 16px;
+
+  [data-mode="doc"] & {
+    position: relative;
+    top: 0;
+    right: 0;
+    display: inline-block;
+  }
+
+  @media @mobile {
+    position: relative;
+    top: 6px;
+    right: auto;
+    display: flex;
+    justify-content: center;
+
+    .@{prefix}-navbar & {
+      display: none;
+    }
+  }
+
+  &-sun,
+  &-moon,
+  &-auto {
+    position: relative;
+    border-radius: 50%;
+    outline: none;
+    cursor: pointer;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    svg {
+      transition: all 0.3s linear;
+      &:hover {
+        transform: scale(1.2);
+      }
+    }
+  }
+
+  &-sun,
+  &-moon,
+  &-auto {
+    border: 1px solid @c-btn-border;
+    background-color: @c-light-bg;
+
+    svg {
+      fill: @c-text;
+      [data-prefers-color=dark] & {
+        fill: @c-text-dark;
+      }
+    }
+
+    [data-prefers-color=dark] & {
+      border-color: @c-btn-border-dark;
+      background-color: @c-bg-dark;
+    }
+  }
+
+  &-switch {
+    [data-mode=doc] & {
+      display: flex;
+      button + button {
+        margin-left: 4px;
+      }
+    }
+
+    @media @mobile {
+      display: flex;
+      button + button {
+        margin-left: 10px;
+      }
+    }
+
+    &-active {
+      .@{prefix}-menu & {
+        border-color: @c-primary;
+        [data-prefers-color=dark] & {
+          border-color: @c-primary-dark;
+        }
+      }
+    }
+
+    [data-mode=doc][data-mobile-show=true] & {
+      margin-bottom: 10px;
+    }
+
+    button {
+      z-index: 102;
+    }
+
+    &-list {
+      animation: dropDown 0.2s linear 0s 1;
+
+      button {
+        z-index: 101;
+        margin-top: 4px;
+      }
+
+      [data-mode="doc"] & {
+        position: absolute;
+      }
+    }
+  }
+}
+
+@keyframes dropDown {
+  0% {
+    margin-top: -100%;
+  }
+  100% {
+    margin-top: 0;
+  }
+}

package/.dumi/theme/layouts/components/Dark.tsx

@@ -0,0 +1,78 @@
+import type { FC } from 'react';
+import React from 'react';
+import { usePrefersColor } from 'dumi/theme';
+import './Dark.less';
+
+interface darkProps {
+  darkSwitch: boolean;
+  isSideMenu: boolean;
+  onDarkSwitchClick?: (ev) => void;
+};
+
+const Dark: FC<darkProps> = ({ darkSwitch, onDarkSwitchClick, isSideMenu }) => {
+  const allState = ['dark', 'light', 'auto'];
+  const [color, setColor] = usePrefersColor();
+  const prefersColor = color;
+
+  const sunSvg = <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4026" width="22" height="22"><path d="M915.2 476.16h-43.968c-24.704 0-44.736 16-44.736 35.84s20.032 35.904 44.736 35.904H915.2c24.768 0 44.8-16.064 44.8-35.904s-20.032-35.84-44.8-35.84zM512 265.6c-136.704 0-246.464 109.824-246.464 246.4 0 136.704 109.76 246.464 246.464 246.464S758.4 648.704 758.4 512c0-136.576-109.696-246.4-246.4-246.4z m0 425.6c-99.008 0-179.2-80.128-179.2-179.2 0-98.944 80.192-179.2 179.2-179.2S691.2 413.056 691.2 512c0 99.072-80.192 179.2-179.2 179.2zM197.44 512c0-19.84-19.136-35.84-43.904-35.84H108.8c-24.768 0-44.8 16-44.8 35.84s20.032 35.904 44.8 35.904h44.736c24.768 0 43.904-16.064 43.904-35.904zM512 198.464c19.776 0 35.84-20.032 35.84-44.8v-44.8C547.84 84.032 531.84 64 512 64s-35.904 20.032-35.904 44.8v44.8c0 24.768 16.128 44.864 35.904 44.864z m0 627.136c-19.776 0-35.904 20.032-35.904 44.8v44.736C476.096 940.032 492.16 960 512 960s35.84-20.032 35.84-44.8v-44.736c0-24.768-16.064-44.864-35.84-44.864z m329.92-592.832c17.472-17.536 20.288-43.072 6.4-57.024-14.016-14.016-39.488-11.2-57.024 6.336-4.736 4.864-26.496 26.496-31.36 31.36-17.472 17.472-20.288 43.008-6.336 57.024 13.952 14.016 39.488 11.2 57.024-6.336 4.8-4.864 26.496-26.56 31.296-31.36zM213.376 759.936c-4.864 4.8-26.56 26.624-31.36 31.36-17.472 17.472-20.288 42.944-6.4 56.96 14.016 13.952 39.552 11.2 57.024-6.336 4.8-4.736 26.56-26.496 31.36-31.36 17.472-17.472 20.288-43.008 6.336-56.96-14.016-13.952-39.552-11.072-56.96 6.336z m19.328-577.92c-17.536-17.536-43.008-20.352-57.024-6.336-14.08 14.016-11.136 39.488 6.336 57.024 4.864 4.864 26.496 26.56 31.36 31.424 17.536 17.408 43.008 20.288 56.96 6.336 14.016-14.016 11.264-39.488-6.336-57.024-4.736-4.864-26.496-26.56-31.296-31.424z m527.168 628.608c4.864 4.864 26.624 26.624 31.36 31.424 17.536 17.408 43.072 20.224 57.088 6.336 13.952-14.016 11.072-39.552-6.4-57.024-4.864-4.8-26.56-26.496-31.36-31.36-17.472-17.408-43.072-20.288-57.024-6.336-13.952 14.016-11.008 39.488 6.336 56.96z" p-id="4027"></path></svg>;
+  const moonSvg = <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3854" width="22" height="22"><path d="M991.816611 674.909091a69.166545 69.166545 0 0 0-51.665455-23.272727 70.795636 70.795636 0 0 0-27.438545 5.585454A415.674182 415.674182 0 0 1 754.993338 698.181818c-209.594182 0-393.472-184.785455-393.472-395.636363 0-52.363636 38.539636-119.621818 69.515637-173.614546 4.887273-8.610909 9.634909-16.756364 14.103272-24.901818A69.818182 69.818182 0 0 0 384.631156 0a70.842182 70.842182 0 0 0-27.438545 5.585455C161.678429 90.298182 14.362065 307.898182 14.362065 512c0 282.298182 238.824727 512 532.38691 512a522.286545 522.286545 0 0 0 453.957818-268.334545A69.818182 69.818182 0 0 0 991.816611 674.909091zM546.679156 954.181818c-248.785455 0-462.941091-192-462.941091-442.181818 0-186.647273 140.637091-372.829091 300.939637-442.181818-36.817455 65.629091-92.578909 151.970909-92.578909 232.727273 0 250.181818 214.109091 465.454545 462.917818 465.454545a488.331636 488.331636 0 0 0 185.181091-46.545455 453.003636 453.003636 0 0 1-393.565091 232.727273z m103.656728-669.323636l-14.266182 83.781818a34.909091 34.909091 0 0 0 50.362182 36.770909l74.775272-39.563636 74.752 39.563636a36.142545 36.142545 0 0 0 16.174546 3.956364 34.909091 34.909091 0 0 0 34.210909-40.727273l-14.289455-83.781818 60.509091-59.345455a35.025455 35.025455 0 0 0-19.223272-59.578182l-83.61891-12.101818-37.376-76.101818a34.56 34.56 0 0 0-62.254545 0l-37.376 76.101818-83.618909 12.101818a34.909091 34.909091 0 0 0-19.246546 59.578182z m70.423272-64.698182a34.280727 34.280727 0 0 0 26.135273-19.083636l14.312727-29.090909 14.336 29.090909a34.257455 34.257455 0 0 0 26.135273 19.083636l32.046546 4.887273-23.272728 22.574545a35.234909 35.234909 0 0 0-10.007272 30.952727l5.46909 32.116364-28.625454-15.127273a34.490182 34.490182 0 0 0-32.302546 0l-28.695272 15.127273 5.469091-32.116364a35.141818 35.141818 0 0 0-9.984-30.952727l-23.272728-22.574545z" p-id="3855"></path></svg>;
+  const autoSvg = <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11002" width="22" height="22"><path d="M127.658667 492.885333c0-51.882667 10.24-101.717333 30.378666-149.162666s47.786667-88.064 81.92-122.538667 75.093333-61.781333 122.538667-81.92 96.938667-30.378667 149.162667-30.378667 101.717333 10.24 149.162666 30.378667 88.405333 47.786667 122.88 81.92 61.781333 75.093333 81.92 122.538667 30.378667 96.938667 30.378667 149.162666-10.24 101.717333-30.378667 149.162667-47.786667 88.405333-81.92 122.88-75.093333 61.781333-122.88 81.92-97.28 30.378667-149.162666 30.378667-101.717333-10.24-149.162667-30.378667-88.064-47.786667-122.538667-81.92-61.781333-75.093333-81.92-122.88-30.378667-96.938667-30.378666-149.162667z m329.045333 0c0 130.048 13.994667 244.394667 41.984 343.381334h12.970667c46.762667 0 91.136-9.216 133.461333-27.306667s78.848-42.666667 109.568-73.386667 54.954667-67.242667 73.386667-109.568 27.306667-86.698667 27.306666-133.461333c0-46.421333-9.216-90.794667-27.306666-133.12s-42.666667-78.848-73.386667-109.568-67.242667-54.954667-109.568-73.386667-86.698667-27.306667-133.461333-27.306666h-11.605334c-28.672 123.562667-43.349333 237.909333-43.349333 343.722666z" p-id="11003"></path></svg>;
+
+  const list = allState.filter(state => state !== prefersColor);
+
+  const changeColor = (ev, toColor) => {
+    if (!isSideMenu && onDarkSwitchClick) {
+      onDarkSwitchClick(ev);
+    }
+    if (toColor === prefersColor) return;
+    setColor(toColor);
+  };
+
+  const getSvg = (baseColor) => {
+    switch (baseColor) {
+      case 'dark':
+        return (
+          <button key="dumi-dark-btn-moon" title="Dark theme" onClick={ev => changeColor(ev, baseColor)} className={`__dumi-default-dark-moon ${baseColor === prefersColor ? '__dumi-default-dark-switch-active' : ''}`}>
+            {moonSvg}
+          </button>
+        );
+      case 'light':
+        return (
+          <button key="dumi-dark-btn-sun" title="Light theme" onClick={ev => changeColor(ev, baseColor)} className={`__dumi-default-dark-sun ${baseColor === prefersColor ? '__dumi-default-dark-switch-active' : ''}`}>
+            {sunSvg}
+          </button>
+        );
+      case 'auto':
+        return (
+          <button key="dumi-dark-btn-auto" title="Default to system" onClick={ev => changeColor(ev, baseColor)} className={`__dumi-default-dark-auto ${baseColor === prefersColor ? '__dumi-default-dark-switch-active' : ''}`}>
+            {autoSvg}
+          </button>
+        )
+      default:
+    }
+  };
+
+  return (
+    <div className="__dumi-default-dark">
+      <div
+        className={`__dumi-default-dark-switch ${!isSideMenu && darkSwitch ? "__dumi-default-dark-switch-open" : ""}`}>
+        {isSideMenu ? (
+          allState.map(item => (
+            getSvg(item)
+          ))
+        ) : getSvg(prefersColor)}
+      </div>
+      {!isSideMenu && darkSwitch && (
+        <div className="__dumi-default-dark-switch-list" onClick={()=> onDarkSwitchClick(false)}>
+          {
+            list.map(item => (
+              getSvg(item)
+            ))
+          }
+        </div>
+      )}
+    </div>
+  )
+};
+
+export default Dark;

package/.dumi/theme/layouts/components/Navbar.tsx

@@ -0,0 +1,83 @@
+import React, { useContext, useState } from 'react'
+import { Menu } from 'antd'
+import { context, Link, NavLink } from 'dumi/theme'
+import 'dumi-theme-default/src/components/Navbar.less'
+import Dark from './Dark';
+
+const Navbar = ({ navPrefix, location, selectedKeys }) => {
+  const [darkSwitch, setDarkSwitch] = useState(false);
+  const ctxt = useContext(context);
+  console.log(ctxt);
+  
+  const {
+    base,
+    config: { mode, title, logo },
+    nav: navItems
+  } = ctxt;
+
+  const lang = localStorage.getItem('locale') || 'zh-CN';
+
+  const changeLanguage = (val) => {
+    const value = val === 'zh-CN' ? 'en-US' : 'zh-CN';
+    const pathname = location.pathname;
+    localStorage.setItem('locale', value);
+    if(value === 'en-US' && !pathname.startsWith('/en-US')){
+      const origin = window.location.origin;
+      window.location.href = origin+ '/en-US' + pathname;
+    } else if(value === 'zh-CN' && pathname.startsWith('/en-US')){
+      const origin = window.location.origin;
+      window.location.href = origin+pathname.replace('/en-US', '');
+    }else{
+      window.location.reload();
+    }
+  }
+
+  return (
+    <div className="__dumi-default-navbar" data-mode={mode}>
+      <span>
+        {/* logo & title */}
+        <Link
+          className="__dumi-default-navbar-logo"
+          style={{
+            backgroundImage: logo && `url('${logo}')`
+          }}
+          to={base}
+          data-plaintext={logo === false || undefined}
+        >
+          {title}
+        </Link>
+      </span>
+      {/* nav */}
+      <Menu mode="horizontal" selectedKeys={selectedKeys} className="__amiya-nav">
+        <Menu.Item key="search-button">
+          {navPrefix}
+        </Menu.Item>
+        {navItems.map(nav => {
+          return (
+            <Menu.Item key={nav.path}>
+              {nav.path ? (
+                <NavLink to={nav.path} key={nav.path}>
+                  {nav.title}
+                </NavLink>
+              ) : (
+                nav.title
+              )}
+            </Menu.Item>
+          )
+        })}
+      </Menu>
+      <div className="__dumi-default-navbar-tool">
+        <div onClick={() => changeLanguage(lang)} className="__dumi-default-locale-select" style={{ cursor: 'pointer',border: '1px solid #dadadf',padding: '0 16px 0 16px', color: 'var(--zaui-text-weak)',borderRadius: '14px'}}>
+          {
+            lang === 'zh-CN' ? '中文' : 'English'
+          }
+        </div>
+      </div>
+      <>
+        <Dark darkSwitch={darkSwitch} isSideMenu={false} onDarkSwitchClick={setDarkSwitch} />
+      </>
+    </div>
+  )
+}
+
+export default Navbar

package/.dumi/theme/layouts/components/SideMenu.tsx

@@ -0,0 +1,61 @@
+import React, { useContext, useMemo } from 'react'
+import { context, Link } from 'dumi/theme'
+import { Menu } from 'antd'
+
+const { ItemGroup, Item: MenuItem } = Menu
+
+/**
+ * 渲染菜单
+ * @param menuList 菜单列表
+ */
+const renderMenu = (menuList: any[], p: any[]) => {
+  if (!menuList || !menuList.length) {
+    return null
+  }
+
+  return menuList.map(menu => {
+    let newParent = [...p, menu]
+
+    if (menu.children && menu.children.some(item => item.visible !== false)) {
+      return (
+        <ItemGroup key={menu.path} title={menu.title}>
+          {menu.children && renderMenu(menu.children, newParent)}
+        </ItemGroup>
+      )
+    } else {
+      return (
+        <MenuItem icon={menu.icon} key={menu.path}>
+          <Link to={menu.path}>{menu.title}</Link>
+        </MenuItem>
+      )
+    }
+  })
+}
+
+export default function SideMenu(props) {
+  const {
+    config: { mode },
+    menu,
+    meta
+  } = useContext(context)
+  const isHiddenMenus =
+    Boolean((meta.hero || meta.features || meta.gapless) && mode === 'site') || meta.sidemenu === false || undefined
+
+  const { pathname } = props.location
+
+  if (isHiddenMenus) {
+    return null
+  }
+
+  const openKeys = useMemo(() => {
+    return menu.filter(item => item.children && item.children.length).map(item => item.path)
+  }, [menu])
+
+  return (
+    <div className="__amiya-menu">
+      <Menu mode="inline" selectedKeys={[pathname]} openKeys={openKeys}>
+        {renderMenu(menu, [])}
+      </Menu>
+    </div>
+  )
+}

package/.dumi/theme/layouts/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import Layout from './BasicLayout'
+import { ConfigProvider } from 'antd'
+import { IRouteComponentProps } from 'umi'
+import zhCN from 'antd/es/locale/zh_CN'
+// import jaJP from 'antd/es/locale/ja_JP'
+import enUS from 'antd/es/locale/en_US'
+import moment from 'moment'
+import 'moment/locale/zh-cn'
+import './layout.less'
+moment.locale('zh-cn')
+
+let localeMap = {
+  'zh-CN': zhCN,
+  'en-US': enUS,
+}
+
+let locale = localStorage.getItem('locale') || 'zh-CN'
+
+export default ({ children, ...props }: IRouteComponentProps) => {
+  return (
+    <ConfigProvider locale={localeMap[locale]}>
+      <Layout {...props}>{children}</Layout>
+    </ConfigProvider>
+  )
+}

package/.dumi/theme/layouts/layout.less

@@ -0,0 +1,87 @@
+.__amiya {
+  &-theme {
+    right   : 100px;
+    bottom  : 100px;
+    z-index : 10;
+    position: fixed !important;
+  }
+
+  &-nav {
+    flex           : 1;
+    border-bottom  : none !important;
+    display        : flex;
+    justify-content: flex-end;
+  }
+
+  &-theme-color {
+    width        : 1em;
+    height       : 1em;
+    margin-right : 4px;
+    border-radius: 2px;
+    display      : flex;
+  }
+
+  &-menu {
+    position        : fixed;
+    z-index         : 100;
+    top             : 60px;
+    left            : 0;
+    bottom          : 0;
+    width           : 260px;
+    background-color: #f2f5fa;
+    box-sizing      : border-box;
+    transition      : left 0.3s;
+    margin-left     : 40px;
+
+    .ant-menu {
+      height    : 100%;
+      padding   : 24px 0;
+      overflow  : hidden;
+      overflow-y: auto;
+
+      &.ant-menu-inline .ant-menu-item:not(:last-child) {
+        margin-bottom: 0;
+        margin-top   : 0;
+      }
+
+      &.ant-menu-inline .ant-menu-item::after {
+        display: none;
+      }
+
+      &.ant-menu-inline .ant-menu-item {
+        width: calc(98%);
+      }
+    }
+
+    .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+      border-radius: 8px;
+    }
+  }
+}
+
+
+.__dumi-default-previewer-actions {
+  background-color: #fff;
+  justify-content : center;
+
+  >span {
+    display: none;
+  }
+}
+
+[data-prefers-color='dark'] .__dumi-default-previewer-actions {
+  background-color: unset;
+}
+
+.__dumi-default-layout[data-site-mode='true'] {
+  padding-top: 90px;
+}
+
+img {
+  max-width: 100%;
+}
+
+.deleted-sign.deleted.prefix,
+.inserted-sign.inserted.prefix {
+  user-select: none;
+}

package/.dumi/theme/typings.d.ts

@@ -0,0 +1,7 @@
+declare module '*.module.less'
+
+interface Window {
+  DarkReader: any
+}
+
+declare const DarkReader