feat(flat-component): add MainPageHeader component to storybook (#642)

packages/flat-components/src/components/MainPageLayout/MainPageHeader/MainPageHeader.stories.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { MainPageHeader, MainPageHeaderProps } from ".";
+import { BrowserRouter as Router } from "react-router-dom";
+
+const storyMeta: Meta = {
+    title: "Components/MainPageHeader",
+    component: MainPageHeader,
+};
+
+export default storyMeta;
+
+export const Overview: Story<MainPageHeaderProps> = args => (
+    <Router>
+        <div className="vh-75 mw8-ns">
+            <MainPageHeader {...args} />
+        </div>
+    </Router>
+);
+Overview.args = {
+    routePath: "/example/path",
+    title: "Example",
+    periodicUUID: "periodicUUID",
+};

packages/flat-components/src/components/MainPageLayout/MainPageHeader/index.less

@@ -0,0 +1,31 @@
+.main-page-header-container {
+    display: flex;
+    align-items: center;
+    line-height: 24px;
+    margin-top: 24px;
+    margin-bottom: 16px;
+}
+
+.main-page-header-back {
+    color: #3381ff;
+}
+
+.main-page-header-title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: #444e60;
+    line-height: 1;
+}
+
+.main-page-header-periodic-sign {
+    display: flex;
+    width: 36px;
+    height: 22px;
+    line-height: 22px;
+    margin-left: 8px;
+    background-color: #3381ff;
+    border-radius: 4px;
+    color: #fff;
+    justify-content: center;
+}

packages/flat-components/src/components/MainPageLayout/MainPageHeader/index.tsx

@@ -0,0 +1,32 @@
+import backSVG from "./icons/back.svg";
+import "./index.less";
+
+import React from "react";
+import { Link } from "react-router-dom";
+import { Divider } from "antd";
+
+export interface MainPageHeaderProps {
+    routePath: string;
+    title: string;
+    periodicUUID?: string;
+}
+
+export const MainPageHeader: React.FC<MainPageHeaderProps> = ({
+    routePath,
+    title,
+    periodicUUID,
+}) => {
+    return (
+        <div className="main-page-header-container">
+            <Link to={routePath}>
+                <div className="main-page-header-back">
+                    <img src={backSVG} alt="back" />
+                    <span>返回</span>
+                </div>
+            </Link>
+            <Divider type="vertical" />
+            <h1 className="main-page-header-title">{title}</h1>
+            {periodicUUID && <span className="main-page-header-periodic-sign">周期</span>}
+        </div>
+    );
+};