Merge pull request #15 from Barba828/feat-layout

Feat layout

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

packages/buitar/package.json

@@ -23,6 +23,7 @@
 		"eslint": "^8.45.0",
 		"eslint-plugin-react-hooks": "^4.6.0",
 		"eslint-plugin-react-refresh": "^0.4.3",
+		"postcss-preset-env": "^9.3.0",
 		"sass": "^1.49.9",
 		"typescript": "^5.0.2",
 		"vite": "^4.4.5",

packages/buitar/src/app.scss

@@ -37,7 +37,6 @@ body {
 		height: 100%;
 		overflow-x: hidden;
 		padding-left: 10vw;
-		padding-top: 5vh;
 	}
 
 	@media #{$pcLayout} {

packages/buitar/src/app.tsx

@@ -1,5 +1,5 @@
 import { BrowserRouter, useRoutes } from 'react-router-dom'
-import { ConfigProvider, SlideMenu, AudioBtn, BoardProvider } from '@/components'
+import { ConfigProvider, SlideMenu, FixedBtns, BoardProvider, PageHeader } from '@/components'
 import { routeConfig } from '@/pages/router'
 import { Suspense } from 'react'
 import { HelmetProvider } from 'react-helmet-async'
@@ -11,9 +11,13 @@ export const App = () => {
 		<BrowserRouter>
 			<ConfigProvider>
 				<HelmetProvider>
-					<SlideMenu />
-					<Board />
-					<AudioBtn />
+					<BoardProvider>
+						<DrumProvider>
+							<SlideMenu />
+							<Board />
+							<FixedBtns />
+						</DrumProvider>
+					</BoardProvider>
 				</HelmetProvider>
 			</ConfigProvider>
 		</BrowserRouter>
@@ -23,12 +27,9 @@ export const App = () => {
 const Board = () => {
 	const element = useRoutes(routeConfig)
 	return (
-		<BoardProvider>
-			<DrumProvider>
-				<main id="board">
-					<Suspense fallback={<div>Loading...</div>}>{element}</Suspense>
-				</main>
-			</DrumProvider>
-		</BoardProvider>
+		<main id="board">
+			<PageHeader />
+			<Suspense fallback={<div>Loading...</div>}>{element}</Suspense>
+		</main>
 	)
 }

packages/buitar/src/components/audio-btn/audio-btn.module.scss → packages/buitar/src/components/fixed-btn/audio-btn.module.scss

@@ -1,9 +1,6 @@
 .audio-btn {
-	position: fixed;
-	right: 20px;
-	top: 20px;
-	width: 32px !important;
-	height: 32px !important;
+	width: 32px;
+	height: 32px;
 	cursor: pointer;
 	background: none;
 	border: none;

packages/buitar/src/components/audio-btn/audio-btn.tsx → packages/buitar/src/components/fixed-btn/audio-btn.tsx

@@ -2,15 +2,15 @@ import { FC, memo, useEffect, useState } from 'react'
 import { Icon } from '@/components/icon'
 import cx from 'classnames'
 import * as Tone from 'tone'
-
-import styles from './audio-btn.module.scss'
 import { TonePlayer } from '@buitar/tone-player'
 import { waitAudioContext } from '@/utils/audio-play'
 
+import styles from './audio-btn.module.scss'
+
 /**
  * audioContext状态开关
  */
-export const AudioBtn: FC = memo(() => {
+export const AudioBtn: FC<React.HTMLAttributes<HTMLButtonElement>> = memo((props) => {
 	const [mute, setMute] = useState<Boolean>(Tone.context.state !== 'running')
     const context = (window.tonePlayer as TonePlayer).context || Tone.context
 
@@ -28,7 +28,7 @@ export const AudioBtn: FC = memo(() => {
 	return (
 		<button
 			className={cx(
-				// 'primary-button',
+				props.className,
 				styles['audio-btn'],
 				!mute && styles['audio-btn__hidden']
 			)}

packages/buitar/src/components/fixed-btn/fixed-btns.module.scss

@@ -0,0 +1,23 @@
+.btn-group {
+	position: fixed;
+	right: 20px;
+	bottom: 100px;
+	z-index: 99;
+}
+.btn {
+	width: 32px;
+	height: 32px;
+	cursor: pointer;
+	margin: $space-6;
+	background: $gray-02;
+	border-radius: 50%;
+	border: none;
+	color: inherit;
+	opacity: 0.8;
+	@include flex-center;
+	@media (any-hover: hover) {
+		&:hover {
+			background: $gray-03;
+		}
+	}
+}

packages/buitar/src/components/fixed-btn/fixed-btns.tsx

@@ -0,0 +1,14 @@
+import { FC } from 'react'
+import { AudioBtn } from './audio-btn'
+import { SettingBtn } from './setting-btn'
+
+import styles from './fixed-btns.module.scss'
+
+export const FixedBtns: FC<{}> = () => {
+	return (
+		<div className={styles['btn-group']}>
+			<AudioBtn className={styles['btn']}></AudioBtn>
+			<SettingBtn className={styles['btn']}></SettingBtn>
+		</div>
+	)
+}

packages/buitar/src/components/fixed-btn/index.ts

@@ -0,0 +1,2 @@
+export * from './audio-btn'
+export * from './fixed-btns'

packages/buitar/src/components/fixed-btn/setting-btn.tsx

@@ -0,0 +1,21 @@
+import { FC, memo, useState, useCallback } from 'react'
+import { BoardOptionsController, Icon, Modal } from '@/components'
+
+export const SettingBtn: FC<React.HTMLAttributes<HTMLButtonElement>> = memo((props) => {
+	const [settingModalVisible, setSettingModalVisible] = useState<boolean>(false)
+	const toggleSettingModalVisible = useCallback(() => {
+		setSettingModalVisible(!settingModalVisible)
+	}, [settingModalVisible])
+	return (
+		<button id="setting-btn" className={props.className}>
+			<Icon name="icon-setting" onClick={toggleSettingModalVisible} />
+			<Modal
+				visible={settingModalVisible}
+				onCancel={toggleSettingModalVisible}
+				onConfirm={toggleSettingModalVisible}
+			>
+				<BoardOptionsController />
+			</Modal>
+		</button>
+	)
+})

packages/buitar/src/components/index.ts

@@ -4,11 +4,11 @@ export * from './drum-board'
 export * from './sound-board'
 export * from './sequencer'
 export * from './guitar-player'
-export * from './pages-intro'
+export * from './pages-info'
 
 export * from './ui'
 export * from './slide-menu'
 export * from './portal'
 export * from './icon'
 export * from './svg-chord'
-export * from './audio-btn'
+export * from './fixed-btn'

packages/buitar/src/components/pages-info/index.ts

@@ -0,0 +1,3 @@
+export { PagesIntro } from './pages-intro.component'
+export { PageHeader } from './page-header.component'
+export { PagesMeta } from './pages-meta'

packages/buitar/src/components/pages-info/page-header.component.tsx

@@ -0,0 +1,24 @@
+import { useMemo, memo } from 'react'
+import { useRouteMatch } from '@/utils/hooks/use-routers'
+import { Icon } from '@/components/icon'
+import { useNavigate } from 'react-router-dom'
+
+import styles from './page-header.module.scss'
+
+export const PageHeader = memo(() => {
+	const curRoute = useRouteMatch()
+	const navigate = useNavigate()
+	const showBack = useMemo(() => !!curRoute?.meta?.back, [curRoute])
+
+	if(showBack){
+		return (
+			<header className={styles['page-header']} onClick={() => navigate(-1)}>
+				<Icon name="icon-back" size={16}></Icon>
+				<h2>{curRoute.name}</h2>
+			</header>
+		)
+	}
+
+	return null
+
+})

packages/buitar/src/components/pages-info/page-header.module.scss

@@ -0,0 +1,10 @@
+.page-header {
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+
+	> h2 {
+		margin: $font-16 $font-10;
+		font-size: $font-20;
+	}
+}

packages/buitar/src/components/pages-intro/index.tsx → packages/buitar/src/components/pages-info/pages-intro.component.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { memo } from 'react'
 import { pagesIntroConfig } from '@/pages/pages.config'
 import { useTopRoute } from '@/utils/hooks/use-routers'
 
@@ -7,7 +7,7 @@ import styles from './pages-intro.module.scss'
 /**
  * 页面介绍
  */
-const PagesIntro: FC = () => {
+export const PagesIntro = memo(() => {
 	const curTopRoute = useTopRoute()
 	if (!curTopRoute?.id) {
 		return null
@@ -22,14 +22,11 @@ const PagesIntro: FC = () => {
 	const { title, content } = pageInfo
 
 	return (
-		<div className={styles['pages-intro']}>
+		<section className={styles['pages-intro']}>
 			<h2>{title}</h2>
 			{content.map((item, index) => (
 				<p key={index}>{item}</p>
 			))}
-		</div>
+		</section>
 	)
-}
-
-export { PagesIntro }
-export { PagesMeta } from './pages-meta'
+})

packages/buitar/src/components/pages-intro/pages-intro.module.scss → packages/buitar/src/components/pages-info/pages-intro.module.scss

@@ -1,7 +1,7 @@
 .pages-intro {
 	padding-right: 10%;
 	opacity: 0.7;
-	margin-bottom: 5%;
+	margin-bottom: 5vh;
 
 	h2 {
 		letter-spacing: 0.5px;

packages/buitar/src/components/portal/portal-modal.component.tsx

@@ -31,7 +31,7 @@ export const Modal: FC<ModalProps> = ({ visible, pure, title, children, onConfir
 
 	return (
 		<PortalInner>
-			<div className="modal flex-center">
+			<div className="modal flex-center fade-in">
 				{pure ? (
 					children
 				) : (
@@ -41,7 +41,7 @@ export const Modal: FC<ModalProps> = ({ visible, pure, title, children, onConfir
 						) : (
 							title
 						)}
-
+						
 						{children}
 
 						<div className={styles['modal-options']}>

packages/buitar/src/components/portal/portal-modal.module.scss

@@ -4,7 +4,8 @@
 	max-height: 92vh;
 	overflow-y: scroll;
 	background: $gray-01;
-    padding: $btn-margin;
+    padding: calc($btn-margin * 2);
+	border-radius: calc($btn-margin * 4);
 
 	.modal-options {
 		display: flex;
@@ -13,6 +14,7 @@
 		:global(.primary-button) {
 			height: calc($btn-size);
 			flex: 1;
+			border-radius: calc($btn-margin * 3);
 		}
 	}