feat(components): 新增布局(layouts)组件

Closes #4

internal/playground/src/layouts/App.layout.module.scss

@@ -1,54 +1,46 @@
+$h: 60px;
 ._ {
-  $h: 60px;
-  display: flex;
-  padding-top: $h;
+  width: 100vw;
   height: 100vh;
   box-sizing: border-box;
-  :global {
-    header {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: $h;
-      text-align: center;
-      line-height: $h;
-      background-color: var(--aside-bg-color);
-    }
-    aside {
-      $w: 230px;
-      flex-basis: $w;
-      padding: 20px;
-      width: $w;
-      height: 100%;
-      overflow-y: auto;
-      box-sizing: border-box;
-      background-color: var(--aside-bg-color);
-      ul {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-      }
-      li {
-        color: #1a2be1;
-        &.active {
-          color: #8c06b8;
-          pointer-events: none;
-        }
-      }
-      a {
-        display: block;
-        padding: 5px 0;
-        text-decoration: none;
-        color: inherit;
-      }
-    }
-    main {
-      flex: 1;
-      padding: 20px;
-      box-sizing: border-box;
-      height: 100%;
-      overflow-y: auto;
+}
+.header {
+  height: $h;
+  text-align: center;
+  line-height: $h;
+  background-color: var(--aside-bg-color);
+}
+.aside {
+  $w: 230px;
+  flex-basis: $w;
+  padding: 20px;
+  width: $w;
+  height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
+  background-color: var(--aside-bg-color);
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  li {
+    color: #1a2be1;
+    &.active {
+      color: #8c06b8;
+      pointer-events: none;
     }
   }
+  a {
+    display: block;
+    padding: 5px 0;
+    text-decoration: none;
+    color: inherit;
+  }
+}
+.main {
+  padding: 20px;
+  box-sizing: border-box;
+  height: 100%;
+  overflow-y: auto;
 }

internal/playground/src/layouts/App.layout.tsx

@@ -3,6 +3,7 @@ import { Link, Outlet, useLocation } from 'react-router-dom';
 import styles from './App.layout.module.scss';
 import { getClassNames } from '@tool-pack/basic';
 import { baseRouter } from '../router';
+import { Aside, Header, Layout, Main } from '@pkg/components';
 
 export function AppLayout(): JSX.Element {
   const location = useLocation();
@@ -11,32 +12,35 @@ export function AppLayout(): JSX.Element {
     document.documentElement.classList.toggle('dark');
   };
   return (
-    <div className={styles['_']}>
-      <header>
+    <Layout className={styles['_']} vertical>
+      <Header className={styles['header']}>
         playground({location.pathname.replace(/^\//, '')})
         <select name="mode" id="mode-selector" onChange={onSelectChange}>
           <option value="light">light</option>
           <option value="dark">dark</option>
         </select>
-      </header>
-      <aside>
-        <ul>
-          {baseRouter.map((item) => (
-            <li
-              key={item.name}
-              className={getClassNames({
-                active: item.path === location.pathname,
-              })}>
-              <Link to={item.path}>{item.name}</Link>
-            </li>
-          ))}
-        </ul>
-      </aside>
-      <main>
-        <React.Suspense>
-          <Outlet />
-        </React.Suspense>
-      </main>
-    </div>
+      </Header>
+
+      <Layout>
+        <Aside className={styles['aside']}>
+          <ul>
+            {baseRouter.map((item) => (
+              <li
+                key={item.name}
+                className={getClassNames({
+                  active: item.path === location.pathname,
+                })}>
+                <Link to={item.path}>{item.name}</Link>
+              </li>
+            ))}
+          </ul>
+        </Aside>
+        <Main className={styles['main']}>
+          <React.Suspense>
+            <Outlet />
+          </React.Suspense>
+        </Main>
+      </Layout>
+    </Layout>
   );
 }

internal/playground/src/router.tsx

@@ -7,6 +7,7 @@ import { TransitionPage } from './views/TransitionPage';
 import { TransitionGroupPage } from './views/transition-group';
 import { LoadingPage } from './views/loading';
 import { ButtonPage } from './views/button';
+import { LayoutPage } from './views/LayoutPage';
 
 export const baseRouter = [
   {
@@ -29,6 +30,11 @@ export const baseRouter = [
     path: '/button',
     element: <ButtonPage />,
   },
+  {
+    name: 'layout',
+    path: '/layout',
+    element: <LayoutPage />,
+  },
 ];
 
 export const router = createBrowserRouter([

internal/playground/src/views/LayoutPage.tsx

@@ -0,0 +1,22 @@
+import { Aside, Footer, Header, Layout, Main } from '@pkg/components';
+
+export function LayoutPage() {
+  return (
+    <>
+      <Layout vertical style={{ textAlign: 'center', background: '#efefef' }}>
+        <Header className="header" style={{ background: 'pink' }}>
+          header
+        </Header>
+        <Layout>
+          <Aside style={{ width: '200px' }}>aside</Aside>
+          <Main style={{ background: 'blue' }}>main</Main>
+        </Layout>
+        <Layout vertical>
+          <Aside style={{ background: 'lime' }}>aside</Aside>
+          <Main>main</Main>
+        </Layout>
+        <Footer style={{ background: 'pink' }}>footer</Footer>
+      </Layout>
+    </>
+  );
+}

packages/components/src/index.ts

@@ -3,3 +3,4 @@ export * from './transition';
 export * from './transition-group';
 export * from './loading';
 export * from './button';
+export * from './layouts';

packages/components/src/layouts/Aside.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { BaseLayoutsProps } from './layout.types';
+import { getComponentClass } from '@pkg/shared';
+import { getClassNames } from '@tool-pack/basic';
+
+const rootClass = getComponentClass('aside');
+
+export const Aside: React.FC<BaseLayoutsProps> = (props) => {
+  const { children, className, ...rest } = props;
+  return (
+    <aside
+      {...rest}
+      className={getClassNames(rootClass, {
+        [className as string]: className,
+      })}>
+      {children}
+    </aside>
+  );
+};

packages/components/src/layouts/Footer.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { BaseLayoutsProps } from './layout.types';
+import { getComponentClass } from '@pkg/shared';
+import { getClassNames } from '@tool-pack/basic';
+
+const rootClass = getComponentClass('footer');
+
+export const Footer: React.FC<BaseLayoutsProps> = (props) => {
+  const { children, className, ...rest } = props;
+  return (
+    <footer
+      {...rest}
+      className={getClassNames(rootClass, {
+        [className as string]: className,
+      })}>
+      {children}
+    </footer>
+  );
+};

packages/components/src/layouts/Header.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { BaseLayoutsProps } from './layout.types';
+import { getComponentClass } from '@pkg/shared';
+import { getClassNames } from '@tool-pack/basic';
+
+const rootClass = getComponentClass('header');
+
+export const Header: React.FC<BaseLayoutsProps> = (props) => {
+  const { children, className, ...rest } = props;
+  return (
+    <header
+      {...rest}
+      className={getClassNames(rootClass, {
+        [className as string]: className,
+      })}>
+      {children}
+    </header>
+  );
+};

packages/components/src/layouts/Layout.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { getComponentClass } from '@pkg/shared';
+import { getClassNames } from '@tool-pack/basic';
+import { BaseLayoutsProps } from './layout.types';
+
+const rootClass = getComponentClass('layout');
+export const Layout: React.FC<
+  BaseLayoutsProps & {
+    vertical?: boolean;
+  }
+> = (props) => {
+  const { vertical, className, children, ...rest } = props;
+  return (
+    <section
+      {...rest}
+      className={getClassNames(rootClass, {
+        vertical,
+        [className as string]: className,
+      })}>
+      {children}
+    </section>
+  );
+};

packages/components/src/layouts/Main.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { BaseLayoutsProps } from './layout.types';
+import { getComponentClass } from '@pkg/shared';
+import { getClassNames } from '@tool-pack/basic';
+
+const rootClass = getComponentClass('main');
+
+export const Main: React.FC<BaseLayoutsProps> = (props) => {
+  const { children, className, ...rest } = props;
+  return (
+    <main
+      {...rest}
+      className={getClassNames(rootClass, {
+        [className as string]: className,
+      })}>
+      {children}
+    </main>
+  );
+};

packages/components/src/layouts/index.ts

@@ -0,0 +1,6 @@
+import './layouts.scss';
+export * from './Layout';
+export * from './Header';
+export * from './Footer';
+export * from './Main';
+export * from './Aside';

packages/components/src/layouts/layout.types.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export type BaseLayoutsProps = React.HTMLAttributes<HTMLElement>;

packages/components/src/layouts/layouts.scss

@@ -0,0 +1,18 @@
+@import '../scss.variable';
+
+.#{$PREFIX}layout {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+
+  &.vertical {
+    flex-direction: column;
+  }
+}
+.#{$PREFIX}aside,
+.#{$PREFIX}main {
+  overflow: auto;
+}
+.#{$PREFIX}main {
+  flex: 1;
+}