feat: 🎸 文件夹 iPad Mobile 展示

✅ Closes: #270
meetqy · Jun 21, 2023 · 9a6d1f3 · 9a6d1f3
1 parent b9330fe
commit 9a6d1f3
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 11 deletions.
diff --git a/apps/nextjs/src/components/Layout.tsx b/apps/nextjs/src/components/Layout.tsx
@@ -6,6 +6,7 @@ import Menu from "./Menu";
 import Navbar from "./Navbar";
 
 interface Props {
+  navbar?: JSX.Element | null;
   children?: JSX.Element;
   loadMore?: () => void;
   loadMoreContent: JSX.Element | string;
@@ -15,6 +16,7 @@ interface Props {
 const defaultProps: Props = {
   loadMoreContent: "加载中...",
   href: "/",
+  navbar: <Navbar />,
 };
 
 const Layout = (props: Props) => {
@@ -33,9 +35,9 @@ const Layout = (props: Props) => {
 
   return (
     <div className="drawer drawer-mobile">
-      <input id="my-drawer-2" type="checkbox" className="drawer-toggle" />
+      <input id="my-drawer" type="checkbox" className="drawer-toggle" />
       <div className="drawer-content bg-base-100">
-        <Navbar />
+        {props.navbar}
 
         {/* children */}
         <div>
@@ -46,7 +48,7 @@ const Layout = (props: Props) => {
         </div>
       </div>
       <div className="drawer-side">
-        <label htmlFor="my-drawer-2" className="drawer-overlay"></label>
+        <label htmlFor="my-drawer" className="drawer-overlay"></label>
 
         <Menu library={library} href={props.href} />
       </div>

diff --git a/apps/nextjs/src/components/Menu.tsx b/apps/nextjs/src/components/Menu.tsx
@@ -54,7 +54,7 @@ const Menu = ({ library, href }: MenuProps) => {
             标签
           </Link>
         </li>
-        <li className="hidden lg:block">
+        <li>
           <Link href={`/${library}/folders`} className={href === "/folders" ? "active" : ""}>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
               <path d="M19.5 21a3 3 0 003-3v-4.5a3 3 0 00-3-3h-15a3 3 0 00-3 3V18a3 3 0 003 3h15zM1.5 10.146V6a3 3 0 013-3h5.379a2.25 2.25 0 011.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 013 3v1.146A4.483 4.483 0 0019.5 9h-15a4.483 4.483 0 00-3 1.146z" />

diff --git a/apps/nextjs/src/components/Navbar.tsx b/apps/nextjs/src/components/Navbar.tsx
@@ -77,7 +77,7 @@ const Navbar = () => {
   return (
     <header className="w-full sticky top-0 left-0 z-20 xl:px-4 bg-base-100/90 backdrop-blur">
       <nav className="navbar w-full">
-        <Logo className="lg:hidden" htmlFor="my-drawer-2" />
+        <Logo className="lg:hidden" htmlFor="my-drawer" />
 
         <div className="flex-1">
           <Search value={searchValue} onInput={setSearchValue} className="lg:flex hidden w-1/2" inputClassName="w-full" />

diff --git a/apps/nextjs/src/pages/[library]/folders.tsx b/apps/nextjs/src/pages/[library]/folders.tsx
@@ -18,14 +18,38 @@ const Page: NextPage = () => {
     library: librarryName,
   });
 
+  const Header = () => {
+    return (
+      <header className="w-full sticky top-0 left-0 z-20 xl:px-4 bg-base-100/90 backdrop-blur">
+        <nav className="navbar lg:px-0 px-4">
+          <div className="flex-1">
+            <label htmlFor="my-drawer" className="btn btn-ghost btn-circle lg:hidden">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="w-6 h-6 mr-2">
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
+                />
+              </svg>
+            </label>
+            <a className="btn btn-ghost normal-case p-0 hover:bg-transparent text-xl">
+              文件夹
+              {data && <span className="badge ml-2">{data.length}</span>}
+            </a>
+          </div>
+        </nav>
+      </header>
+    );
+  };
+
   return (
-    <Layout href="/folders" loadMoreContent={<span className="text-base-300 text-sm">{"已经到底了~~"}</span>}>
+    <Layout navbar={<Header />} href="/folders" loadMoreContent={<span className="text-base-300 text-sm">{"已经到底了~~"}</span>}>
       <>
         {assetsUrl && (
-          <div className="p-4 grid gap-4 grid-cols-8">
+          <div className="p-4 grid gap-4 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8">
             {data?.map((item) =>
               item._count.images ? (
-                <Link href={`/${librarryName}?folder=${item.name}`} key={item.id} className="card overflow-hidden bg-base-100 shadow-xl relative">
+                <Link href={`/${librarryName}?folder=${item.name}`} key={item.id} className="card glass overflow-hidden shadow-xl relative">
                   <div className="aspect-square flex justify-center items-center bg-neutral text-neutral-content">
                     {item.images[0] ? (
                       <img src={getImgUrl(assetsUrl, item.images[0])} className="object-top object-cover aspect-square" />
@@ -35,10 +59,10 @@ const Page: NextPage = () => {
                       </svg>
                     )}
                   </div>
-                  <div className="card-body p-4">
-                    <p>{item.name}</p>
+                  <div className="card-body p-4 absolute bottom-0 bg-base-100/60 text-base-content w-full backdrop-blur-sm">
+                    <h2 className="card-title justify-center w-full">{item.name}</h2>
                   </div>
-                  <button className="btn btn-square absolute left-1 top-1 btn-sm font-mono btn-circle backdrop-blur bg-primary/30 text-primary-content font-normal border-none">
+                  <button className="btn btn-square absolute z-10 left-1 top-1 btn-sm font-mono btn-circle backdrop-blur bg-primary/30 text-primary-content font-normal border-none">
                     {item._count.images}
                   </button>
                 </Link>