Merge pull request #16 from Barba828/feat-layout

feat: layout change

packages/buitar/src/app.scss

@@ -18,12 +18,6 @@ body {
 	&::-webkit-scrollbar {
 		display: none; /* Chrome Safari */
 	}
-
-	a {
-		text-decoration: none;
-		color: inherit;
-		-webkit-tap-highlight-color: $gray-02; // 点击块高亮
-	}
 }
 
 #app {

packages/buitar/src/components/chord-list/chord-list.module.scss

@@ -27,8 +27,8 @@
 			white-space: nowrap;
 			flex: 1;
 			display: flex;
-			align-items: end;
-			justify-content: start;
+			align-items: flex-end;
+			justify-content: flex-start;
 		}
 	}
 }

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

@@ -2,11 +2,11 @@
 	position: fixed;
 	right: 20px;
 	bottom: 100px;
-	z-index: 99;
+	z-index: 1;
 }
 .btn {
-	width: 32px;
-	height: 32px;
+	width: $btn-size;
+	height: $btn-size;
 	cursor: pointer;
 	margin: $space-6;
 	background: $gray-02;
@@ -18,6 +18,7 @@
 	@media (any-hover: hover) {
 		&:hover {
 			background: $gray-03;
+			opacity: 1;
 		}
 	}
 }

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

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

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

@@ -0,0 +1,20 @@
+.pages-intro {
+	opacity: 0.7;
+	padding: $space-16;
+	max-height: 64vh;
+	overflow-y: scroll;
+
+	h2 {
+		letter-spacing: 0.5px;
+		font-weight: 500;
+		font-size: 32px;
+		margin: 0 0 $space-16;
+	}
+
+	p {
+		margin: 10px 0px;
+		font-weight: 300;
+		font-size: 18px;
+		text-align: justify;
+	}
+}

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

@@ -0,0 +1,47 @@
+import { FC, memo, useState, useCallback } from 'react'
+import { Icon, Modal } from '@/components'
+import { pagesIntroConfig } from '@/pages/pages.config'
+import { useRouteMatch } from '@/utils/hooks/use-routers'
+import styles from './info-btn.module.scss'
+
+export const InfoBtn: FC<React.HTMLAttributes<HTMLButtonElement>> = memo((props) => {
+	const curRoute = useRouteMatch()
+	const [infoModalVisible, setInfoModalVisible] = useState<boolean>(false)
+
+	const toggleInfoModalVisible = useCallback(() => {
+		setInfoModalVisible(!infoModalVisible)
+	}, [infoModalVisible])
+
+	if (!curRoute?.id) {
+		return null
+	}
+
+	const pageInfo = pagesIntroConfig.get(curRoute.id)
+
+	if (!pageInfo) {
+		return null
+	}
+	const { title, content } = pageInfo
+
+	return (
+		<button id="info-btn" className={props.className}>
+			<Icon
+				name="icon-more"
+				style={{ transform: 'rotate(90deg)' }}
+				onClick={toggleInfoModalVisible}
+			></Icon>
+			<Modal
+				visible={infoModalVisible}
+				onCancel={toggleInfoModalVisible}
+				onConfirm={toggleInfoModalVisible}
+			>
+				<section className={styles['pages-intro']}>
+					<h2>{title}</h2>
+					{content.map((item, index) => (
+						<p key={index}>{item}</p>
+					))}
+				</section>
+			</Modal>
+		</button>
+	)
+})

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

@@ -10,15 +10,18 @@ export const PageHeader = memo(() => {
 	const navigate = useNavigate()
 	const showBack = useMemo(() => !!curRoute?.meta?.back, [curRoute])
 
-	if(showBack){
+	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
 
-})
+	return (
+		<header className={styles['page-header']}>
+			<h1>{curRoute.name}</h1>
+		</header>
+	)
+})

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

@@ -2,6 +2,7 @@
 	display: flex;
 	align-items: center;
 	cursor: pointer;
+	opacity: 0.8;
 
 	> h2 {
 		margin: $font-16 $font-10;

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

@@ -6,13 +6,30 @@ import cx from 'classnames'
 
 export interface ModalProps {
 	visible?: boolean
+	/**
+	 * 无children容器
+	 */
 	pure?: boolean
+	/**
+	 * 点击浮层onCancel
+	 */
+	closeOnOverlay?: boolean
 	title?: ReactNode
 	onCancel?: React.MouseEventHandler<HTMLDivElement>
 	onConfirm?: React.MouseEventHandler<HTMLDivElement>
+	containerClass?: string
 }
 
-export const Modal: FC<ModalProps> = ({ visible, pure, title, children, onConfirm, onCancel }) => {
+export const Modal: FC<ModalProps> = ({
+	visible,
+	pure,
+	title,
+	children,
+	onConfirm,
+	onCancel,
+	containerClass,
+	closeOnOverlay = true,
+}) => {
 	useEffect(() => {
 		const container = document.body
 		if (visible) {
@@ -31,17 +48,17 @@ export const Modal: FC<ModalProps> = ({ visible, pure, title, children, onConfir
 
 	return (
 		<PortalInner>
-			<div className="modal flex-center fade-in">
+			<div className="overlay flex-center fade-in" onClick={closeOnOverlay ? onCancel : undefined}>
 				{pure ? (
 					children
 				) : (
-					<div className={styles['modal-container']}>
+					<div onClick={(e) => e.stopPropagation()} className={cx(styles['modal-container'], containerClass)}>
 						{typeof title == 'string' ? (
 							<div className={styles['modal-title']}>{title}</div>
 						) : (
 							title
 						)}
-						
+
 						{children}
 
 						<div className={styles['modal-options']}>

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

@@ -6,10 +6,11 @@
 	background: $gray-01;
     padding: calc($btn-margin * 2);
 	border-radius: calc($btn-margin * 4);
+	box-sizing: border-box;
 
 	.modal-options {
 		display: flex;
-		justify-content: end;
+		justify-content: flex-end;
 		font-size: $font-18;
 		:global(.primary-button) {
 			height: calc($btn-size);

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

@@ -9,7 +9,7 @@
 	display: none;
 	transform: translateY(20px);
 	transition: 0.3s;
-	z-index: 99;
+	z-index: $z-index-modal;
 }
 
 .show {

packages/buitar/src/components/sequencer/sequencer.module.scss

@@ -104,7 +104,7 @@ $sound-height: 30;
 		@include flex-center(row);
 		margin: $sound-margin + px;
 		padding: 0 8px;
-		justify-content: start;
+		justify-content: flex-start;
 		width: fit-content;
 		.player-range-text {
 			font-size: $font-14;

packages/buitar/src/components/slide-menu/slide-item.component.tsx

@@ -68,7 +68,6 @@ export const SlideMenu = memo(() => {
 	))
 
 	const footer = [
-		<div style={{ marginTop: 'auto' }}></div>,
 		<div
 			key="clear"
 			className={cx(styles['slide-menu-nav-item'])}
@@ -90,6 +89,7 @@ export const SlideMenu = memo(() => {
 			</Modal>
 		</div>,
 		<a
+			key="github"
 			href="https://github.com/Barba828/buitar"
 			className={cx(styles['slide-menu-nav-item'])}
 			target="view_window"

packages/buitar/src/pages/chord-analyzer/chord-analyzer.tsx

@@ -11,7 +11,7 @@ import type { Point, Note, ToneSchema, ChordType } from '@buitar/to-guitar'
 import { transChordType } from '@buitar/to-guitar'
 import { AddTextInput } from '@/components/basic'
 import { VexChord } from '@/components/svg-chord'
-import { useConfigContext, PagesIntro, PagesMeta } from '@/components'
+import { useConfigContext, PagesMeta } from '@/components'
 import { useIsMobile } from '@/utils/hooks/use-device'
 import { getBoardChordName } from '@/components/guitar-board/board-controller/chord-card/utils'
 import cx from 'classnames'
@@ -46,7 +46,6 @@ export const ChordAnalyzer = () => {
 	return (
 		<>
 			<PagesMeta/>
-			<PagesIntro/>
 			{menus.board_setting && <BoardOptionsController extendItem={false} />}
 			<TapedGuitarBoard onChange={handleChangeTaps} />
 			{chordTypes && <TapedChordCard chordTypes={chordTypes} />}

packages/buitar/src/pages/chord-player/chord-player.tsx

@@ -10,7 +10,7 @@ import {
 import { transChordTaps } from '@buitar/to-guitar'
 import { PianoBoard } from '@/components/piano-board'
 import { VexChord } from '@/components/svg-chord'
-import { useConfigContext, PagesIntro, PagesMeta } from '@/components'
+import { useConfigContext, PagesMeta } from '@/components'
 import { useIsMobile } from '@/utils/hooks/use-device'
 import { getBoardChordName } from '@/components/guitar-board/board-controller/chord-card/utils'
 
@@ -46,7 +46,6 @@ export const ChordPlayer = () => {
 	return (
 		<>
 			<PagesMeta/>
-			<PagesIntro/>
 			<ChordController />
 			<ChordDetail />
 			<GuitarBoard />

packages/buitar/src/pages/chord-progressions/chord-progressions.tsx

@@ -10,7 +10,7 @@ import {
 import { Point, transChordTaps, DEGREE_TAG_LIST } from '@buitar/to-guitar'
 import { PlayerProvider, usePlayerContext } from '@/components/guitar-player'
 import { SoundBoard } from '@/components/sound-board'
-import { PagesIntro, PagesMeta } from '@/components'
+import { PagesMeta } from '@/components'
 import { useIsMobile } from '@/utils/hooks/use-device'
 
 import styles from './chord-progressions.module.scss'
@@ -19,7 +19,6 @@ export const ChordProgressions = () => {
 	return (
 		<PlayerProvider>
 			<PagesMeta/>
-			<PagesIntro/>
 			<DegreeController />
 			<ChordPicker />
 			<TapsViewer />

packages/buitar/src/pages/collections/collections.tsx

@@ -1,22 +1,18 @@
-import { RangeSlider, useBoardContext, PagesIntro, PagesMeta } from '@/components'
+import { RangeSlider, useBoardContext, PagesMeta } from '@/components'
 import { ChordList } from '@/components/chord-list'
 import { Tone, getTapsOnBoard, transToneOffset } from '@buitar/to-guitar'
 import { CagedBaseType, GuitarCagedBaseConfig } from './caged.config'
 import { FC, useCallback, useMemo, useState } from 'react'
 import { Outlet } from 'react-router-dom'
 import { Link } from 'react-router-dom'
-import { useRouteFind, useRouteMatch } from '@/utils/hooks/use-routers'
+import { useRouteFind } from '@/utils/hooks/use-routers'
 import cx from 'classnames'
 
 import styles from './collections.module.scss'
 
 export const Collections: FC = () => {
-	const CollectionsHomeRoute = useRouteFind('ChordCollections') // 工具菜单页路由
-	const curRoute = useRouteMatch() // 当前页面一级路由
-
 	return (
 		<>
-			{CollectionsHomeRoute === curRoute && <PagesIntro />}
 			<PagesMeta />
 			<Outlet />
 		</>

packages/buitar/src/pages/guitar-fingering/guitar-fingering.tsx

@@ -21,7 +21,6 @@ export const GuitarFingering: FC = () => {
 	return (
 		<>
 			<PagesMeta/>
-			<PagesIntro/>
 			<TabSwitch
 				className={cx(styles['fingering-tab'])}
 				values={tabList}