feat: 更新meta信息

packages/buitar/package.json

@@ -14,9 +14,9 @@
 	"author": "[email protected]",
 	"license": "MIT",
 	"devDependencies": {
+		"@types/react-beautiful-dnd": "^13.1.7",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.0.0",
-		"@types/react-beautiful-dnd": "^13.1.7",
 		"@vite-pwa/assets-generator": "^0.0.7",
 		"@vitejs/plugin-react": "^4.0.3",
 		"classnames": "^2.3.1",
@@ -34,6 +34,7 @@
 		"@buitar/to-guitar": "workspace:*",
 		"@buitar/tone-player": "workspace:*",
 		"react-beautiful-dnd": "^13.1.1",
+		"react-helmet-async": "^2.0.4",
 		"vexflow": "^4.2.3"
 	}
 }

packages/buitar/src/app.tsx

@@ -2,16 +2,19 @@ import { BrowserRouter, useRoutes } from 'react-router-dom'
 import { ConfigProvider, SlideMenu, AudioBtn, BoardProvider } from '@/components'
 import { routeConfig } from '@/pages/router'
 import { Suspense } from 'react'
+import { HelmetProvider } from 'react-helmet-async';
 import { DrumProvider } from './components/drum-board/drum-provider'
 import './app.scss'
 
 export const App = () => {
 	return (
 		<BrowserRouter>
 			<ConfigProvider>
+				<HelmetProvider>
 				<SlideMenu />
 				<Board />
 				<AudioBtn />
+				</HelmetProvider>
 			</ConfigProvider>
 		</BrowserRouter>
 	)

packages/buitar/src/components/pages-intro/index.tsx

@@ -1,10 +1,10 @@
 import { FC } from 'react'
-import { PageIntroType, pagesIntroConfig } from '@/pages/pages.config'
+import { pagesIntroConfig } from '@/pages/pages.config'
 import { useTopRoute } from '@/utils/hooks/use-routers'
 
 import styles from './pages-intro.module.scss'
 
-export const usePagesIntro = () => {
+export const PagesIntro: FC = () => {
 	const curTopRoute = useTopRoute()
 	if (!curTopRoute?.id) {
 		return null
@@ -16,10 +16,8 @@ export const usePagesIntro = () => {
 		return null
 	}
 
-	return <PagesIntro {...pageInfo} />
-}
+	const { title, content } = pageInfo
 
-export const PagesIntro: FC<PageIntroType> = ({ title, content }) => {
 	return (
 		<div className={styles['pages-intro']}>
 			<h2>{title}</h2>
@@ -29,3 +27,5 @@ export const PagesIntro: FC<PageIntroType> = ({ title, content }) => {
 		</div>
 	)
 }
+
+export { PagesMeta } from './pages-meta'

packages/buitar/src/components/pages-intro/pages-meta.tsx

@@ -0,0 +1,35 @@
+import { FC } from 'react'
+import { Helmet } from 'react-helmet-async'
+import { pagesIntroConfig } from '@/pages/pages.config'
+import { useTopRoute, useRouteMatch } from '@/utils/hooks/use-routers'
+
+export const PagesMeta: FC<{ title?: string; decsription?: string }> = ({
+	title,
+	decsription = '',
+}) => {
+	const curTopRoute = useTopRoute() // 一级路由
+	const curRoute = useRouteMatch()
+	if (!curTopRoute?.id) {
+		return null
+	}
+
+	const pageInfo = pagesIntroConfig.get(curTopRoute.id)
+
+	if (!pageInfo) {
+		return null
+	}
+	const ogTitle = `${title || curRoute.name ||curTopRoute.name || pageInfo.title} - Buitar`
+	const ogDescription =
+		(decsription || `${pageInfo.title} - ${pageInfo.content.join(',') || 'Buitar'}`).slice(0, 150)
+	const ogImage = 'https://i1.wp.com/img.erpweb.eu.org/imgs/2024/01/63842433f6b0627a.png' // https://img.erpweb.eu.org/imgs/2024/01/63842433f6b0627a.png
+	return (
+		<Helmet>
+			<title>{ogTitle}</title>
+			<meta name="description" content={ogDescription} />
+			<meta property="og:title" content={ogTitle} />
+			<meta property="og:description" content={ogDescription} />
+			<meta property="og:image" content={ogImage} />
+			<link rel="canonical" href={location.href} />
+		</Helmet>
+	)
+}

packages/buitar/src/components/svg-chord/vex-chord.tsx

@@ -1,11 +1,9 @@
 import { useIsMobile } from '@/utils/hooks/use-device'
 import { Point } from '@buitar/to-guitar'
 import { FC, memo, useEffect, useRef } from 'react'
-import { Voice, StaveNote, Formatter, Flow } from 'vexflow/core'
 import cx from 'classnames'
 import styles from './vex-chord.module.scss'
 
-const { Renderer, Stave } = Flow
 export const VexChord: FC<{ taps: Point[]; className?: string }> = memo(({ taps, className }) => {
 	const divRef = useRef<HTMLDivElement>()
 	const isMobile = useIsMobile()
@@ -17,44 +15,56 @@ export const VexChord: FC<{ taps: Point[]; className?: string }> = memo(({ taps,
 	}
 
 	useEffect(() => {
-		if (!divRef.current) {
-			return
-		}
 		if (!taps.length) {
 			return
 		}
 
-		divRef.current.innerHTML = ''
-
-		// 定义谱线
-		const renderer = new Renderer(divRef.current, Renderer.Backends.SVG)
-		renderer.resize(chordWidth, chordHeight)
-		// 画板ctx
-		const context = renderer.getContext()
-		context.setFillStyle('#FF00FF')
-		context.setStrokeStyle('#FFFF00')
-		const stave = new Stave(5, 20, chordWidth - 10, { space_above_staff_ln: 3 })
-		// 渲染高音谱
-		stave.addClef('treble')
-		stave.setContext(context).draw()
-
-		// 生成音符
-		const notes = taps
-			.sort((tapA, tapB) => tapA.string - tapB.string)
-			.map((tap) => {
-				const key = `${tap.toneSchema.note}/${Number(tap.toneSchema.level) + 1}`
-				return new StaveNote({ keys: [key], duration: 'q' })
-			})
-
-		// 音符拍号
-		const voice = new Voice({ num_beats: notes.length, beat_value: 4 })
-		voice.addTickables(notes)
-
-		// 音符整理对齐
-		new Formatter().joinVoices([voice]).format([voice], chordWidth * 0.6)
-		// 渲染音符
-		voice.draw(context, stave)
+		// 异步引入，无需在 manualChunks 中进行拆包
+		Promise.all([import('vexflow/bravura'), import('vexflow/core')]).then(
+			([_, { Voice, StaveNote, Formatter, Flow }]) => {
+				const { Renderer, Stave } = Flow
+
+				if (!divRef.current) {
+					return
+				}
+
+				divRef.current.innerHTML = ''
+				// 定义谱线
+				const renderer = new Renderer(divRef.current, Renderer.Backends.SVG)
+				renderer.resize(chordWidth, chordHeight)
+				// 画板ctx
+				const context = renderer.getContext()
+				context.setFillStyle('#FF00FF')
+				context.setStrokeStyle('#FFFF00')
+				const stave = new Stave(5, 20, chordWidth - 10, { space_above_staff_ln: 3 })
+				// 渲染高音谱
+				stave.addClef('treble')
+				stave.setContext(context).draw()
+
+				// 生成音符
+				const notes = taps
+					.sort((tapA, tapB) => tapA.string - tapB.string)
+					.map((tap) => {
+						const key = `${tap.toneSchema.note}/${Number(tap.toneSchema.level) + 1}`
+						return new StaveNote({ keys: [key], duration: 'q' })
+					})
+
+				// 音符拍号
+				const voice = new Voice({ num_beats: notes.length, beat_value: 4 })
+				voice.addTickables(notes)
+
+				// 音符整理对齐
+				new Formatter().joinVoices([voice]).format([voice], chordWidth * 0.6)
+				// 渲染音符
+				voice.draw(context, stave)
+			}
+		)
 	}, [divRef.current, taps])
 
-	return <div className={cx(styles['vex-chord'] ,className, 'primary-button', 'flex-center')} ref={divRef as any} />
+	return (
+		<div
+			className={cx(styles['vex-chord'], className, 'primary-button', 'flex-center')}
+			ref={divRef as any}
+		/>
+	)
 })

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, usePagesIntro } from '@/components'
+import { useConfigContext, PagesIntro, 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'
@@ -20,7 +20,6 @@ import styles from './chord-analyzer.module.scss'
 import { useLocation } from 'react-router-dom'
 
 export const ChordAnalyzer = () => {
-	const intro = usePagesIntro()
 	const [chordTypes, setChordTypes] = useState<ChordType[]>([])
 	const { menus } = useConfigContext()
 	const { clearTaps, setTaps } = useBoardContext()
@@ -46,7 +45,8 @@ export const ChordAnalyzer = () => {
 
 	return (
 		<>
-			{intro}
+			<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,12 +10,11 @@ import {
 import { transChordTaps } from '@buitar/to-guitar'
 import { PianoBoard } from '@/components/piano-board'
 import { VexChord } from '@/components/svg-chord'
-import { useConfigContext, usePagesIntro } from '@/components'
+import { useConfigContext, PagesIntro, PagesMeta } from '@/components'
 import { useIsMobile } from '@/utils/hooks/use-device'
 import { getBoardChordName } from '@/components/guitar-board/board-controller/chord-card/utils'
 
 export const ChordPlayer = () => {
-	const intro = usePagesIntro()
 	const { chord, chordTap, chordTaps, guitarBoardOption, setChordTaps, setTaps, clearTaps } =
 		useBoardContext()
 	const { menus } = useConfigContext()
@@ -46,7 +45,8 @@ export const ChordPlayer = () => {
 
 	return (
 		<>
-			{intro}
+			<PagesMeta/>
+			<PagesIntro/>
 			<ChordController />
 			<ChordDetail />
 			<GuitarBoard />

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

@@ -10,16 +10,16 @@ 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 { usePagesIntro } from '@/components'
+import { PagesIntro, PagesMeta } from '@/components'
 import { useIsMobile } from '@/utils/hooks/use-device'
 
 import styles from './chord-progressions.module.scss'
 
 export const ChordProgressions = () => {
-	const intro = usePagesIntro()
 	return (
 		<PlayerProvider>
-			{intro}
+			<PagesMeta/>
+			<PagesIntro/>
 			<DegreeController />
 			<ChordPicker />
 			<TapsViewer />

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

@@ -1,4 +1,4 @@
-import { RangeSlider, useBoardContext, usePagesIntro } from '@/components'
+import { RangeSlider, useBoardContext, PagesIntro, PagesMeta } from '@/components'
 import { ChordList } from '@/components/chord-list'
 import { Tone, getTapsOnBoard, transToneOffset } from '@buitar/to-guitar'
 import { CagedBaseType, GuitarCagedBaseConfig } from './caged.config'
@@ -11,13 +11,13 @@ import cx from 'classnames'
 import styles from './collections.module.scss'
 
 export const Collections: FC = () => {
-	const intro = usePagesIntro()
 	const CollectionsHomeRoute = useRouteFind('ChordCollections') // 工具菜单页路由
 	const curRoute = useRouteMatch() // 当前页面一级路由
 
 	return (
 		<>
-			{CollectionsHomeRoute === curRoute && intro}
+			{CollectionsHomeRoute === curRoute && <PagesIntro />}
+			<PagesMeta />
 			<Outlet />
 		</>
 	)

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

@@ -1,13 +1,12 @@
 import { FC, useEffect, useMemo } from 'react'
 import { useBoardContext } from '@/components/guitar-board'
-import { TabSwitch, usePagesIntro } from '@/components'
+import { TabSwitch, PagesIntro, PagesMeta } from '@/components'
 import { Link, Outlet } from 'react-router-dom'
 import { useRouteFind, useRouteMatch } from '@/utils/hooks/use-routers'
 import cx from 'classnames'
 import styles from './guitar-fingering.module.scss'
 
 export const GuitarFingering: FC = () => {
-	const intro = usePagesIntro()
 	const { clearTaps } = useBoardContext()
 	const { children = [] } = useRouteFind('GuitarFingering')
 	const { path } = useRouteMatch()
@@ -21,7 +20,8 @@ export const GuitarFingering: FC = () => {
 
 	return (
 		<>
-			{intro}
+			<PagesMeta/>
+			<PagesIntro/>
 			<TabSwitch
 				className={cx(styles['fingering-tab'])}
 				values={tabList}

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

@@ -4,26 +4,27 @@ import {
 	GuitarBoard,
 	PianoBoard,
 	DrumBoard,
+	PagesIntro,
+	PagesMeta,
 	useBoardContext,
 	useConfigContext,
-	usePagesIntro,
 	DrumInstrumentController,
 	KeyBoardInstrument,
 } from '@/components'
 import { useDrumBoardContext } from '@/components/drum-board/drum-provider'
 
 export const InstrumentPlayer = () => {
-	const intro = usePagesIntro()
 	const { menus } = useConfigContext()
 	const { player } = useBoardContext()
 	const { player: drumPlayer, instrument: drumInstrument } = useDrumBoardContext()
-	
+
 	const [part, setPart] = useState(false)
 	const [level, setPianoPart] = useState(false)
 
 	return (
 		<>
-			{intro}
+			<PagesMeta />
+			<PagesIntro />
 			{menus.board_setting && <BoardOptionsController extendItem={false} />}
 			<KeyBoardInstrument extendItem={false} />
 			<DrumInstrumentController extendItem={false} />

packages/buitar/src/pages/play-tools/play-tools.tsx

@@ -2,20 +2,20 @@ import { FC } from 'react'
 import { Link, Outlet } from 'react-router-dom'
 import { ControllerList } from '@/components/controller'
 import { useRouteFind, useRouteMatch } from '@/utils/hooks/use-routers'
-import { usePagesIntro } from '@/components'
+import { PagesIntro, PagesMeta } from '@/components'
 
 import styles from './play-tools.module.scss'
 
 export const PlayToolsHome: FC = () => {
-	const intro = usePagesIntro()
 	const toolsRoute = useRouteFind('PlayTools') // 工具菜单页路由
-	const curRoute = useRouteMatch() // 当前页面一级路由
+	const curRoute = useRouteMatch() // 当前页面路由
 
 	const isToolsHome = toolsRoute === curRoute // 当前在菜单主页
 
 	return isToolsHome ? (
 		<>
-			{intro}
+			<PagesMeta />
+			<PagesIntro />
 			<ControllerList
 				size="large"
 				list={toolsRoute.children || []}
@@ -28,6 +28,9 @@ export const PlayToolsHome: FC = () => {
 			/>
 		</>
 	) : (
-		<Outlet></Outlet>
+		<>
+			<PagesMeta />
+			<Outlet></Outlet>
+		</>
 	)
 }