diff --git a/.umirc.ts b/.umirc.ts index ec1e3de..5bf9e61 100644 --- a/.umirc.ts +++ b/.umirc.ts @@ -18,16 +18,23 @@ export default defineConfig({ { name: 'description', content: '全网最好用的李志(逼哥)音乐作品专属播放器', - } + }, ], analytics: { baidu: '023e4ef604935de6708edb9e61f17191', }, headScripts: [ 'https://cdn.tailwindcss.com', + ` + tailwind.config = { + corePlugins: { + preflight: false, + } + } + `, + ], + scripts: [ 'https://cdn.jsdelivr.net/gh/nj-lizhi/song@main/audio/list.js', - 'https://gcore.jsdelivr.net/npm/hls.js@0.14.4/dist/hls.min.js', - 'https://gcore.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.js', ` const groupBy = (arr, fn) => arr @@ -43,14 +50,8 @@ export default defineConfig({ cover: obj[a][1]['cover'] })); `, - // ` - // tailwind.config = { - // corePlugins: { - // preflight: false, - // } - // } - //` + 'https://gcore.jsdelivr.net/npm/hls.js@0.14.4/dist/hls.min.js', + 'https://gcore.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.js', ], - scripts: [], fastRefresh: {}, }); diff --git a/package.json b/package.json index c5b3bc2..00eb409 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "dependencies": { "@ant-design/pro-layout": "^6.5.0", "react": "17.x", + "react-cmdk": "^1.3.6", "react-dom": "17.x", "react-jinke-music-player": "^4.24.2", "umi": "^3.5.21" diff --git a/src/layouts/index.css b/src/layouts/index.css index 413a93b..ef62746 100644 --- a/src/layouts/index.css +++ b/src/layouts/index.css @@ -19,10 +19,12 @@ body ::-webkit-scrollbar, box-shadow: none; left: 256px; width: calc(100% - 256px); + z-index: 0; } .audio-lists-panel{ border: 2px solid rgba(255, 255, 255, 0.2); + z-index: 0; } .audio-lists-panel-content .audio-item:active, .audio-lists-panel-content .audio-item:hover { diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 433d49a..6cd83d6 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -1,8 +1,14 @@ import { useEffect, useState } from 'react'; import ReactJkMusicPlayer from 'react-jinke-music-player'; +import CommandPalette, { + filterItems, + getItemIndex, + useHandleOpenCommandPalette, +} from 'react-cmdk'; import { Link } from 'umi'; import 'react-jinke-music-player/assets/index.css'; import './index.css'; +import 'react-cmdk/dist/cmdk.css'; const audioLists = window.list?.map((v) => { return { @@ -27,6 +33,12 @@ const options = { export default function Layout({ children, location }) { const [active, setActive] = useState('all'); + const [page, setPage] = useState<'root' | 'albums'>('root'); + const [open, setOpen] = useState(false); + const [search, setSearch] = useState(''); + + useHandleOpenCommandPalette(setOpen); + useEffect(() => { document .querySelector('.music-player-panel') @@ -36,7 +48,57 @@ export default function Layout({ children, location }) { .classList.add('backdrop-blur-md'); }, []); - debugger; + const filteredItems = filterItems( + [ + { + heading: 'Home', + id: 'home', + items: [ + { + id: 'home', + children: '首页', + icon: 'HomeIcon', + href: '/', + }, + { + id: 'live', + children: '现场', + icon: 'SupportIcon', + href: '/#/video', + }, + { + id: 'albums', + children: '专辑', + icon: 'CollectionIcon', + closeOnSelect: false, + onClick: () => { + setPage('albums'); + }, + }, + ], + }, + { + heading: 'Other', + id: 'advanced', + items: [ + { + id: 'developer', + children: '参与贡献', + icon: 'CodeIcon', + target: '_blank', + href: 'https://github.com/turkyden/lizhi-app', + }, + { + id: 'star', + children: '赞助我们', + icon: 'StarIcon', + href: '/#/star', + }, + ], + }, + ], + search, + ); return (
@@ -44,11 +106,11 @@ export default function Layout({ children, location }) {

李志

-
- +

所有作品

- +

友情赞助

- + + + + + {filteredItems.length ? ( + filteredItems.map((list) => ( + + {list.items.map(({ id, ...rest }) => ( + + ))} + + )) + ) : ( + + )} + + + + {/* Projects page */} + + + ); } diff --git a/src/pages/album/[id].tsx b/src/pages/album/[id].tsx index d91a39c..dfc1d0e 100644 --- a/src/pages/album/[id].tsx +++ b/src/pages/album/[id].tsx @@ -1,4 +1,5 @@ import { Link } from 'umi'; +import { message } from 'antd'; const ALBUM = [ { @@ -61,7 +62,7 @@ export default function (props) { return ( <>
-
+
onClick(albumList[0].name)} + className="transition hover:text-white text-center tracking-widest py-2 px-6 rounded-full bg-gradient-to-r from-green-500 to-green-400 text-white cursor-pointer hover:opacity-90 transition shadow-lg shadow-green-500/50 flex items-center" + > 播放全部
-
+
message.info('开发中！')} + className="hover:text-white text-center tracking-widest py-2 px-6 rounded-full border border-solid border-gray-500 hover:bg-gray-800 cursor-pointer flex items-center" + > 歌曲 {ALBUM.length}
-
专辑信息
-
评论
+
message.info('开发中！')} + > + 专辑信息 +
+
message.info('开发中！')} + > + 评论 +
diff --git a/src/pages/index.tsx b/src/pages/index.tsx index b25c46a..a2046c1 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -46,7 +46,7 @@ export default function IndexPage() {
{/*
{LIVE.map((v, i) => ( @@ -83,7 +83,7 @@ export default function IndexPage() {
{(window.album as IAlbumList).map((v, i) => ( diff --git a/src/pages/star.tsx b/src/pages/star.tsx index c6a0023..f1e0c37 100644 --- a/src/pages/star.tsx +++ b/src/pages/star.tsx @@ -5,11 +5,14 @@ function Star() {
qrcode
- 感谢支持！打赏仅用于网站维护，并非购买音乐费用，版权归【李志先生】所有。 + 感谢支持！打赏仅用于网站开发与维护，并非购买音乐资源，版权归【李志先生】所有。
- + stars diff --git a/src/pages/video.tsx b/src/pages/video.tsx index 5dda506..3ca1f9d 100644 --- a/src/pages/video.tsx +++ b/src/pages/video.tsx @@ -50,7 +50,7 @@ function Video() { return ( <>