refactor: migrate to dumi

.dumi/pages/index/index.scss

@@ -0,0 +1,56 @@
+@import '../../theme/style/const.scss';
+
+.dtc-homepage {
+    background-color: #ebf5fd;
+    height: calc(100vh - 64px);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    font-family: 'Smiley Sans Oblique';
+
+    .dtc-homepage-title {
+        font-size: 70px;
+        color: $basic-black-color;
+        user-select: none;
+        margin-bottom: 12px;
+        line-height: 1.15;
+    }
+
+    .dtc-homepage-badges {
+        margin-bottom: 12px;
+
+        img:not(:last-child) {
+            margin-inline-end: 20px;
+        }
+    }
+
+    .dtc-homepage-description {
+        color: $basic-black-color;
+        font-size: 30px;
+    }
+
+    .dtc-homepage-btnGroups {
+        margin: 12px auto 0;
+        width: 200px;
+        display: grid;
+        grid-gap: 18px;
+        grid-template-columns: 1fr 1fr;
+
+        > .ant-btn {
+            font-size: 20px;
+            height: 40px;
+            line-height: 40px;
+        }
+    }
+}
+
+@media only screen and (max-width: 767px) {
+    .dtc-homepage {
+        height: calc(100vh - 52px);
+
+        .dtc-homepage-btnGroups {
+            width: 300px;
+        }
+    }
+}

.dumi/pages/index/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Button } from 'antd';
+import { GithubOutlined } from '@ant-design/icons';
+import './index.scss';
+
+export default function Homepage() {
+    return (
+        <div className="dtc-homepage">
+            <h1 className="dtc-homepage-title">dt-react-component</h1>
+            <div className="dtc-homepage-badges">
+                <img src="https://img.shields.io/npm/v/dt-react-component.svg?style=flat" />
+                <img src="http://img.shields.io/npm/dm/dt-react-component.svg?style=flat" />
+            </div>
+            <div className="dtc-homepage-description">一个基于 ant design 的组件库</div>
+            <div className="dtc-homepage-btnGroups">
+                <Button type="primary" href="/guide">
+                    Quick Start
+                </Button>
+                <Button
+                    icon={<GithubOutlined />}
+                    href="https://github.com/DTStack/dt-react-component"
+                >
+                    Github
+                </Button>
+            </div>
+        </div>
+    );
+}

.dumi/theme/hooks/index.tsx

@@ -0,0 +1,8 @@
+import { useState } from 'react';
+
+const RESPONSIVE_MOBILE = 768;
+
+export function useMobile() {
+    const [isMobile] = useState<boolean>(window.innerWidth < RESPONSIVE_MOBILE);
+    return isMobile;
+}

.dumi/theme/layouts/DocLayout.scss

@@ -0,0 +1,27 @@
+$default-font: 'Smiley Sans Oblique', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+
+body {
+    font-family: $default-font;
+}
+
+.dumi-default-doc-layout {
+    background: #ebf5fd;
+    font-family: $default-font;
+}
+
+// NOT use SmileySans in markdown content
+.dumi-default-content {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+        'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+        'Noto Color Emoji';
+}
+
+.dumi-default-doc-layout > main {
+    max-width: 100vw;
+}
+
+.ant-tooltip {
+    font-size: 18px;
+}

.dumi/theme/layouts/DocLayout.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import DumiDocLayout from 'dumi/theme-default/layouts/DocLayout';
+import 'dumi/theme-default/layouts/DocLayout/index.less';
+import './DocLayout.scss';
+
+export default function DocLayout() {
+    return <DumiDocLayout />;
+}

.dumi/theme/slots/Footer/index.scss

@@ -0,0 +1,59 @@
+@import '../../style/const.scss';
+
+.dtc-footer {
+    font-family: 'Smiley Sans Oblique';
+    background: rgb(250, 250, 252);
+
+    .dtc-footer-links {
+        padding-top: 20px;
+        width: 800px;
+        margin: 0 auto;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+
+        .dtc-footer-rows {
+            display: flex;
+            flex-direction: column;
+            padding-left: 50%;
+
+            .dtc-footer-rows-title {
+                line-height: 28px;
+                font-size: 14px;
+                color: #8b8fa8;
+            }
+
+            .dtc-footer-col {
+                line-height: 28px;
+
+                > a {
+                    color: $basic-black-color;
+                }
+            }
+        }
+    }
+
+    .dtc-footer-divider {
+        margin: 0 48px;
+    }
+
+    .dtc-footer-copyright {
+        text-align: center;
+        font-size: 14px;
+        padding-bottom: 20px;
+    }
+}
+
+@media only screen and (max-width: 767px) {
+    .dtc-footer {
+        .dtc-footer-links {
+            width: 100%;
+            padding-top: 20px;
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: 1fr 1fr;
+
+            .dtc-footer-rows {
+                padding-left: 50px;
+            }
+        }
+    }
+}

.dumi/theme/slots/Footer/index.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Divider } from 'antd';
+import './index.scss';
+
+export default function Footer() {
+    return (
+        <div className="dtc-footer">
+            <div className="dtc-footer-links">
+                <div className="dtc-footer-rows">
+                    <span className="dtc-footer-rows-title">帮助</span>
+                    <div className="dtc-footer-col">
+                        <a
+                            href="https://github.com/DTStack/dt-react-component/blob/master/CHANGELOG.md"
+                            target="_blank"
+                        >
+                            更新日志
+                        </a>
+                    </div>
+                    <div className="dtc-footer-col">
+                        <a
+                            href="https://github.com/DTStack/dt-react-component/issues"
+                            target="_blank"
+                        >
+                            报告 Bug
+                        </a>
+                    </div>
+                </div>
+                <div className="dtc-footer-rows">
+                    <span className="dtc-footer-rows-title">相关链接</span>
+                    <div className="dtc-footer-col">
+                        <a href="https://www.dtstack.com/" target="_blank">
+                            袋鼠云
+                        </a>
+                    </div>
+                    <div className="dtc-footer-col">
+                        <a href="http://ued.dtstack.cn/" target="_blank">
+                            数栈前端团队
+                        </a>
+                    </div>
+                    <div className="dtc-footer-col">
+                        <a href="https://4x.ant.design/index-cn" target="_blank">
+                            Ant Design 4
+                        </a>
+                    </div>
+                </div>
+                <div className="dtc-footer-rows">
+                    <span className="dtc-footer-rows-title">社区</span>
+                    <div className="dtc-footer-col">
+                        <a href="https://github.com/DTStack/dt-react-component" target="_blank">
+                            Github
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div className="dtc-footer-divider">
+                <Divider />
+            </div>
+            <div className="dtc-footer-copyright">dt-react-component 3.0.5 · Made by dtstack</div>
+        </div>
+    );
+}

.dumi/theme/slots/Header/index.scss

@@ -0,0 +1,67 @@
+@import '../../style/const.scss';
+
+@media only screen and (min-width: 767px) {
+    #root {
+        // reset dumi style
+        .dumi-default-header {
+            background-color: rgba(255, 255, 255, 0.75);
+            box-shadow: 0 1px 2px 0 rgb(0 0 0 / 3%), 0 1px 6px -1px rgb(0 0 0 / 2%),
+                0 2px 4px 0 rgb(0 0 0 / 2%);
+        }
+
+        .dumi-default-header-content {
+            height: 64px;
+            max-width: 100vw;
+        }
+
+        .dumi-default-header-left {
+            width: auto;
+        }
+
+        .dumi-default-header-right {
+            justify-content: end;
+            align-items: center;
+            gap: 14px;
+        }
+
+        .dumi-default-logo {
+            font-family: 'Smiley Sans Oblique';
+            font-size: 24px;
+            font-weight: 600;
+            color: $basic-black-color;
+
+            img {
+                height: 40px;
+            }
+        }
+
+        .dumi-default-navbar > li {
+            font-size: 20px;
+            padding: 0 20px;
+
+            &:not(:last-child) {
+                margin-inline-end: 0;
+            }
+            a {
+                color: $basic-black-color;
+            }
+
+            a.active {
+                color: $primary-color;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 767px) {
+    #root {
+        .dtc-github-icon {
+            width: 100%;
+            padding: 12px 0;
+            font-size: 18px;
+            line-height: 1;
+            text-align: center;
+            display: block;
+        }
+    }
+}

.dumi/theme/slots/Header/index.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { useRouteMeta } from 'dumi';
+import Logo from 'dumi/theme-default/slots/Logo';
+import Navbar from 'dumi/theme-default/slots/Navbar';
+import SearchBar from 'dumi/theme-default/slots/SearchBar';
+import LangSwitch from 'dumi/theme-default/slots/LangSwitch';
+import RtlSwitch from 'dumi/theme-default/slots/RtlSwitch';
+import { Button, Tooltip } from 'antd';
+import { CloseOutlined, MenuOutlined, GithubOutlined } from '@ant-design/icons';
+import { useMobile } from '../../hooks';
+import 'dumi/theme-default/slots/Header/index.less';
+import './index.scss';
+
+export default function Header() {
+    const { frontmatter } = useRouteMeta();
+    const isMobile = useMobile();
+    const [showMenu, setShowMenu] = useState(false);
+
+    return (
+        <div
+            className="dumi-default-header"
+            data-static={Boolean(frontmatter.hero) || undefined}
+            data-mobile-active={showMenu || undefined}
+            onClick={() => setShowMenu(false)}
+        >
+            <div className="dumi-default-header-content">
+                <section className="dumi-default-header-left">
+                    <Logo />
+                </section>
+                <section className="dumi-default-header-right">
+                    <Navbar />
+                    <div className="dumi-default-header-right-aside">
+                        <SearchBar />
+                        <LangSwitch />
+                        <RtlSwitch />
+                    </div>
+                    {isMobile ? (
+                        <a
+                            className="dtc-github-icon"
+                            href="https://github.com/DTStack/dt-react-component"
+                            target="_blank"
+                        >
+                            Github
+                        </a>
+                    ) : (
+                        <Tooltip title="Github">
+                            <Button
+                                type="text"
+                                className="dtc-github-icon"
+                                icon={<GithubOutlined />}
+                                href="https://github.com/DTStack/dt-react-component"
+                                target="_blank"
+                            ></Button>
+                        </Tooltip>
+                    )}
+                </section>
+                <button
+                    type="button"
+                    className="dumi-default-header-menu-btn"
+                    onClick={(ev) => {
+                        ev.stopPropagation();
+                        setShowMenu((v) => !v);
+                    }}
+                >
+                    {showMenu ? <CloseOutlined /> : <MenuOutlined />}
+                </button>
+            </div>
+        </div>
+    );
+}