From 72ed54dcb1bd4ec7bfa9f2b44f7fee63c18a1a3a Mon Sep 17 00:00:00 2001 From: dyh_a Date: Tue, 6 Jun 2023 16:27:38 +0800 Subject: [PATCH] =?UTF-8?q?feat(components):=20=E6=96=B0=E5=A2=9E=E5=B8=83?= =?UTF-8?q?=E5=B1=80(layouts)=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes #4 --- .../src/layouts/App.layout.module.scss | 88 +++++++++---------- .../playground/src/layouts/App.layout.tsx | 48 +++++----- internal/playground/src/router.tsx | 6 ++ internal/playground/src/views/LayoutPage.tsx | 22 +++++ packages/components/src/index.ts | 1 + packages/components/src/layouts/Aside.tsx | 19 ++++ packages/components/src/layouts/Footer.tsx | 19 ++++ packages/components/src/layouts/Header.tsx | 19 ++++ packages/components/src/layouts/Layout.tsx | 23 +++++ packages/components/src/layouts/Main.tsx | 19 ++++ packages/components/src/layouts/index.ts | 6 ++ .../components/src/layouts/layout.types.ts | 3 + packages/components/src/layouts/layouts.scss | 18 ++++ 13 files changed, 221 insertions(+), 70 deletions(-) create mode 100644 internal/playground/src/views/LayoutPage.tsx create mode 100644 packages/components/src/layouts/Aside.tsx create mode 100644 packages/components/src/layouts/Footer.tsx create mode 100644 packages/components/src/layouts/Header.tsx create mode 100644 packages/components/src/layouts/Layout.tsx create mode 100644 packages/components/src/layouts/Main.tsx create mode 100644 packages/components/src/layouts/index.ts create mode 100644 packages/components/src/layouts/layout.types.ts create mode 100644 packages/components/src/layouts/layouts.scss diff --git a/internal/playground/src/layouts/App.layout.module.scss b/internal/playground/src/layouts/App.layout.module.scss index a8c1b2d4..9fe70d96 100644 --- a/internal/playground/src/layouts/App.layout.module.scss +++ b/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; } diff --git a/internal/playground/src/layouts/App.layout.tsx b/internal/playground/src/layouts/App.layout.tsx index a2cc552d..19440a5e 100644 --- a/internal/playground/src/layouts/App.layout.tsx +++ b/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 ( -
-
+ +
playground({location.pathname.replace(/^\//, '')}) -
- -
- - - -
-
+ + + + +
+ + + +
+ + ); } diff --git a/internal/playground/src/router.tsx b/internal/playground/src/router.tsx index 7407ea09..c49019d2 100644 --- a/internal/playground/src/router.tsx +++ b/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: , }, + { + name: 'layout', + path: '/layout', + element: , + }, ]; export const router = createBrowserRouter([ diff --git a/internal/playground/src/views/LayoutPage.tsx b/internal/playground/src/views/LayoutPage.tsx new file mode 100644 index 00000000..d616ae0e --- /dev/null +++ b/internal/playground/src/views/LayoutPage.tsx @@ -0,0 +1,22 @@ +import { Aside, Footer, Header, Layout, Main } from '@pkg/components'; + +export function LayoutPage() { + return ( + <> + +
+ header +
+ + +
main
+ + + +
main
+ +
footer
+ + + ); +} diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index c8c69871..ff2ce38c 100644 --- a/packages/components/src/index.ts +++ b/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'; diff --git a/packages/components/src/layouts/Aside.tsx b/packages/components/src/layouts/Aside.tsx new file mode 100644 index 00000000..90061102 --- /dev/null +++ b/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 = (props) => { + const { children, className, ...rest } = props; + return ( + + ); +}; diff --git a/packages/components/src/layouts/Footer.tsx b/packages/components/src/layouts/Footer.tsx new file mode 100644 index 00000000..b3e46dfb --- /dev/null +++ b/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 = (props) => { + const { children, className, ...rest } = props; + return ( +
+ {children} +
+ ); +}; diff --git a/packages/components/src/layouts/Header.tsx b/packages/components/src/layouts/Header.tsx new file mode 100644 index 00000000..fb5a525a --- /dev/null +++ b/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 = (props) => { + const { children, className, ...rest } = props; + return ( +
+ {children} +
+ ); +}; diff --git a/packages/components/src/layouts/Layout.tsx b/packages/components/src/layouts/Layout.tsx new file mode 100644 index 00000000..129111f2 --- /dev/null +++ b/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 ( +
+ {children} +
+ ); +}; diff --git a/packages/components/src/layouts/Main.tsx b/packages/components/src/layouts/Main.tsx new file mode 100644 index 00000000..73f807b4 --- /dev/null +++ b/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 = (props) => { + const { children, className, ...rest } = props; + return ( +
+ {children} +
+ ); +}; diff --git a/packages/components/src/layouts/index.ts b/packages/components/src/layouts/index.ts new file mode 100644 index 00000000..908d909b --- /dev/null +++ b/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'; diff --git a/packages/components/src/layouts/layout.types.ts b/packages/components/src/layouts/layout.types.ts new file mode 100644 index 00000000..94cf3be3 --- /dev/null +++ b/packages/components/src/layouts/layout.types.ts @@ -0,0 +1,3 @@ +import React from 'react'; + +export type BaseLayoutsProps = React.HTMLAttributes; diff --git a/packages/components/src/layouts/layouts.scss b/packages/components/src/layouts/layouts.scss new file mode 100644 index 00000000..9d0544ad --- /dev/null +++ b/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; +}