feat: 新增快速搜索

turkyden · Sep 23, 2022 · c786dca · c786dca · vercel · Sep 23, 2022
1 parent 1c83635
commit c786dca
Show file tree

Hide file tree

Showing 8 changed files with 155 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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<boolean>(false);
+  const [search, setSearch] = useState('');
+
+  useHandleOpenCommandPalette(setOpen);
+
   useEffect(() => {
     document
       .querySelector('.music-player-panel')
@@ -36,19 +48,69 @@ 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 (
     <div className="w-screen h-screen bg-black text-white pl-64">
       <div className="fixed top-0 left-0 w-64 h-screen p-10 pb-0 flex flex-col justify-between">
         <div>
           <h2 className="text-white text-3xl mb-4 font-bold">李志</h2>
 
-          <div className="bg-gray-900 relative pointer-events-auto">
-            <button
-              type="button"
-              className="w-full flex items-center text-sm leading-6 text-gray-400 rounded-md ring-1 ring-gray-900/10 shadow-sm py-1.5 pl-2 pr-3 hover:ring-gray-600 bg-gray-800 highlight-white/5 hover:bg-gray-700"
-            >
+          <div
+            onClick={() => setOpen(true)}
+            className="bg-gray-900 relative pointer-events-auto cursor-pointer"
+          >
+            <div className="w-full flex items-center text-sm leading-6 text-gray-400 rounded-md ring-1 ring-gray-900/10 shadow-sm py-1.5 pl-2 pr-3 hover:ring-gray-600 bg-gray-800 highlight-white/5 hover:bg-gray-700">
               <svg
                 width="24"
                 height="24"
@@ -77,14 +139,14 @@ export default function Layout({ children, location }) {
               <span className="ml-auto pl-3 flex-none text-xs font-semibold">
                 ⌘K
               </span>
-            </button>
+            </div>
           </div>
 
           <h3 className="text-gray-500 text-sm mt-8 mb-4">所有作品</h3>
-          <ul className="space-y-2">
+          <div className="space-y-2">
             <Link
               to="/"
-              className={`block hover:text-white transition py-1 px-4 rounded hover:bg-gray-500 cursor-pointer ${
+              className={`block text-white hover:text-white transition py-1 px-4 rounded hover:bg-gray-500 cursor-pointer ${
                 location.pathname === '/' &&
                 'bg-gradient-to-t from-green-700 to-green-500 shadow shadow-green-500/50'
               }`}
@@ -93,7 +155,7 @@ export default function Layout({ children, location }) {
             </Link>
             <Link
               to="/album/专辑-梵高先生"
-              className={`block hover:text-white transition py-1 px-4 rounded hover:bg-gray-500 cursor-pointer ${
+              className={`block text-white hover:text-white transition py-1 px-4 rounded hover:bg-gray-500 cursor-pointer ${
                 location.pathname.startsWith('/album') &&
                 'bg-gradient-to-t from-green-700 to-green-500 shadow shadow-green-500/50'
               }`}
@@ -102,30 +164,30 @@ export default function Layout({ children, location }) {
             </Link>
             <Link
               to="/video"
-              className={`block hover:text-white transition py-1 px-4 rounded hover:bg-gray-500 cursor-pointer ${
+              className={`block text-white hover:text-white transition py-1 px-4 rounded hover:bg-gray-500 cursor-pointer ${
                 location.pathname.startsWith('/video') &&
                 'bg-gradient-to-t from-green-700 to-green-500 shadow shadow-green-500/50'
               }`}
             >
               ⚡<span className="pl-4">Live</span>
             </Link>
-          </ul>
+          </div>
 
           <br />
 
           <h3 className="text-gray-500 text-sm mt-8 mb-4">友情赞助</h3>
-          <ul className="space-y-2">
+          <div className="space-y-2">
             <Link
               to="/star"
-              className={`block hover:text-white transition py-1 px-4 rounded hover:bg-gray-500 cursor-pointer ${
+              className={`block text-white hover:text-white transition py-1 px-4 rounded hover:bg-gray-500 cursor-pointer ${
                 location.pathname.startsWith('/star') &&
                 'bg-gradient-to-t from-green-700 to-green-500 shadow shadow-green-500/50'
               }`}
               onClick={() => setActive('star')}
             >
               🧡<span className="pl-4">打赏</span>
             </Link>
-          </ul>
+          </div>
         </div>
 
         <img
@@ -166,6 +228,37 @@ export default function Layout({ children, location }) {
           ></path>
         </svg>
       </a>
+
+      <CommandPalette
+        onChangeSearch={setSearch}
+        onChangeOpen={setOpen}
+        search={search}
+        isOpen={open}
+        page={page}
+      >
+        <CommandPalette.Page id="root">
+          {filteredItems.length ? (
+            filteredItems.map((list) => (
+              <CommandPalette.List key={list.id} heading={list.heading}>
+                {list.items.map(({ id, ...rest }) => (
+                  <CommandPalette.ListItem
+                    key={id}
+                    index={getItemIndex(filteredItems, id)}
+                    {...rest}
+                  />
+                ))}
+              </CommandPalette.List>
+            ))
+          ) : (
+            <CommandPalette.FreeSearchAction />
+          )}
+        </CommandPalette.Page>
+
+        <CommandPalette.Page id="albums">
+          {/* Projects page */}
+          <CommandPalette.FreeSearchAction />
+        </CommandPalette.Page>
+      </CommandPalette>
     </div>
   );
 }
diff --git 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 (
     <>
       <Link
-        className="flex items-center mb-8 group hover:text-white cursor-pointer"
+        className="flex items-center mb-8 group text-white hover:text-white cursor-pointer"
         to="/"
       >
         <svg
@@ -96,7 +97,10 @@ export default function (props) {
           </div>
 
           <div className="flex space-x-4 pt-10">
-            <div className="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">
+            <div
+              onClick={() => 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"
+            >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 className="h-4 w-4"
@@ -111,7 +115,10 @@ export default function (props) {
               </svg>
               <span className="pl-2">播放全部</span>
             </div>
-            <div 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">
+            <div
+              onClick={() => 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"
+            >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 className="h-4 w-4"
@@ -136,8 +143,18 @@ export default function (props) {
         <div className="pb-2 cursor-pointer hover:text-green-500 text-green-500 border-0 border-solid border-b-2 border-green-500">
           歌曲 {ALBUM.length}
         </div>
-        <div className="pb-2 cursor-pointer hover:text-green-500">专辑信息</div>
-        <div className="pb-2 cursor-pointer hover:text-green-500">评论</div>
+        <div
+          className="pb-2 cursor-pointer hover:text-green-500"
+          onClick={() => message.info('开发中！')}
+        >
+          专辑信息
+        </div>
+        <div
+          className="pb-2 cursor-pointer hover:text-green-500"
+          onClick={() => message.info('开发中！')}
+        >
+          评论
+        </div>
       </div>
 
       <div className="pt-8">

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -46,7 +46,7 @@ export default function IndexPage() {
       <div className="flex">
         <div className="mr-6">
           <Link
-            className="block w-[410px] h-48 rounded-xl overflow-hidden"
+            className="block text-white w-[410px] h-48 rounded-xl overflow-hidden"
             to="/video"
           >
             {/* <video className='w-full' poster='https://www.lizhi334.com/wp-content/uploads/2022/08/lizhi-20-scaled.jpeg' loop muted autoPlay>
@@ -62,7 +62,7 @@ export default function IndexPage() {
         </div>
         {LIVE.map((v, i) => (
           <Link
-            className="mr-6 mb-8 hover:text-white"
+            className="mr-6 mb-8 hover:text-white text-white"
             key={v.title}
             to="/video"
           >
@@ -83,7 +83,7 @@ export default function IndexPage() {
       <div className="flex flex-wrap">
         {(window.album as IAlbumList).map((v, i) => (
           <Link
-            className="mr-6 mb-8 hover:text-white"
+            className="mr-6 mb-8 hover:text-white text-white"
             key={v.id}
             to={`/album/${v.id}`}
           >

diff --git a/src/pages/star.tsx b/src/pages/star.tsx
@@ -5,11 +5,14 @@ function Star() {
     <div className="w-full h-full flex flex-col justify-center items-center">
       <img className="w-72" src="/qrcode/weixin.jpg" alt="qrcode" />
       <div className="py-10">
-        感谢支持！打赏仅用于网站维护，并非购买音乐费用，版权归【李志先生】所有。
+        感谢支持！打赏仅用于网站开发与维护，并非购买音乐资源，版权归【李志先生】所有。
       </div>
-      <a href="https://reporoster.com/stars/turkyden/lizhi-app" target="_blank">
+      <a
+        href="https://github.com/turkyden/lizhi-app/stargazers"
+        target="_blank"
+      >
         <img
-          src="https://github.com/turkyden/lizhi-app/stargazers"
+          src="https://reporoster.com/stars/turkyden/lizhi-app"
           alt="stars"
         />
       </a>

diff --git a/src/pages/video.tsx b/src/pages/video.tsx
@@ -50,7 +50,7 @@ function Video() {
   return (
     <>
       <Link
-        className="fixed flex items-center group hover:text-white cursor-pointer"
+        className="fixed flex items-center group hover:text-white cursor-pointer text-white"
         to="/"
       >
         <svg