From 073acf62d68892bb3f83734617107fd0312fc604 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=87=E8=B6=A3=E4=BF=9D=E7=BD=97?=
 <dreamer_paul@126.com>
Date: Sat, 11 Nov 2023 22:44:52 +0800
Subject: [PATCH] Feat: Gallery List Page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

相册页面，包括页尾组件
---
 .env.default                            |  3 ++
 app/components/layout/footer.tsx        | 14 +++++
 app/root.tsx                            |  2 +
 app/routes/gallery.$/route.tsx          | 71 +++++++++++++++++++++++++
 app/routes/gallery.$/styles.module.less |  3 ++
 app/types/api.d.ts                      |  4 ++
 app/types/api.gallery.d.ts              | 12 +++++
 app/types/api.media.d.ts                | 37 +++++++++++++
 8 files changed, 146 insertions(+)
 create mode 100644 .env.default
 create mode 100644 app/components/layout/footer.tsx
 create mode 100644 app/routes/gallery.$/route.tsx
 create mode 100644 app/routes/gallery.$/styles.module.less
 create mode 100644 app/types/api.gallery.d.ts
 create mode 100644 app/types/api.media.d.ts

diff --git a/.env.default b/.env.default
new file mode 100644
index 0000000..de2ebe5
--- /dev/null
+++ b/.env.default
@@ -0,0 +1,3 @@
+APP_SITENAME=萝心花园
+APP_APIURL=https://paul.ren
+APP_FOOTER_EXTRA=
diff --git a/app/components/layout/footer.tsx b/app/components/layout/footer.tsx
new file mode 100644
index 0000000..b506241
--- /dev/null
+++ b/app/components/layout/footer.tsx
@@ -0,0 +1,14 @@
+const { APP_SITENAME, APP_FOOTER_EXTRA } = import.meta.env; 
+
+function Footer() {
+  return (
+    <footer className="pb-12">
+      <div className="grid grid-cols-2 px-2 max-w-3xl mx-auto text-sm opacity-60">
+        <p>{`© ${new Date().getFullYear()} ${APP_SITENAME}`}</p>
+        {APP_FOOTER_EXTRA && <p className="text-right" dangerouslySetInnerHTML={{ __html: APP_FOOTER_EXTRA }} />}
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;
diff --git a/app/root.tsx b/app/root.tsx
index 3f5f33c..3826963 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -12,6 +12,7 @@ import Header from "./components/layout/header";
 import Spinner from "./components/common/spinner";
 
 import "./index.css";
+import Footer from "./components/layout/footer";
 
 export const links: LinksFunction = () => [
   ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
@@ -31,6 +32,7 @@ export default function App() {
         <Spinner />
         <Header />
         <Outlet />
+        <Footer />
         <ScrollRestoration />
         <LiveReload />
         <Scripts />
diff --git a/app/routes/gallery.$/route.tsx b/app/routes/gallery.$/route.tsx
new file mode 100644
index 0000000..9ae6d64
--- /dev/null
+++ b/app/routes/gallery.$/route.tsx
@@ -0,0 +1,71 @@
+import { NavLink, useLoaderData } from "@remix-run/react";
+import { json, LoaderFunctionArgs, type MetaFunction } from "@remix-run/node";
+import { clsn, siteTitle } from "~/utils";
+
+import styles from "./styles.module.less";
+
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  return [
+    { title: siteTitle(data?.currentCategory?.name || "相册") },
+    { name: "description", content: "奇趣保罗的日常笔记" },
+  ];
+};
+
+export async function loader({ request, params }: LoaderFunctionArgs) {
+  const url = new URL(request.url);
+  const page = url.searchParams.get("page") || "1";
+
+  const searchParams = new URLSearchParams();
+  searchParams.append("page", page);
+
+  const category = await fetch(`https://paul.ren/api/gallery`).then((res) => res.json()) as unknown as API.PageResponse<API.Gallery.ICateData[]>;
+  let cateIndex = -1;
+
+  if (params["*"]) {
+    cateIndex = category.data.findIndex((item) => item.slug === params["*"]);
+
+    if (cateIndex === -1) {
+      throw json("Not Found", { status: 404 });
+    }
+
+    searchParams.append("cate", String(category.data[cateIndex].id));
+  }
+
+  const media = await fetch(`https://paul.ren/api/media/?${searchParams.toString()}`).then((res) => res.json()) as unknown as API.PageResponse<API.Media.IMediaData[]>;
+  const currentCategory = cateIndex > -1 ? category.data[cateIndex]: undefined;
+
+  return json({ media, category, currentCategory });
+}
+
+export default function Gallery() {
+  const { media, category } = useLoaderData<typeof loader>();
+
+  return (
+    <main className="px-2 py-24 max-w-screen-2xl mx-auto">
+      <section className="mb-12">
+        <h1 className="text-center text-5xl/tight md:text-7xl/tight mb-12">相册</h1>
+        <div className="flex overflow-auto whitespace-nowrap">
+          <NavLink to="/gallery" end className={({ isActive }) => clsn("inline-block px-3 py-1 ml-auto mr-3", isActive && "text-pink-400 font-bold")}>
+            所有
+          </NavLink>
+          {category.data.map((item) => (
+            <NavLink to={`/gallery/${item.slug}`} className={({ isActive }) => clsn("inline-block px-3 py-1 mr-3 last:mr-auto", isActive && "text-pink-400 font-bold")}>
+              {item.name}
+            </NavLink>
+          ))}
+        </div>
+      </section>
+      <section className="grid gap-8 grid-cols-2 sm:grid-cols-[repeat(auto-fill,minmax(18em,_1fr))]">
+        {media.data.map((item) => (
+          <div className="bg-white rounded-xl overflow-hidden border-4 border-transparent hover:border-pink-400 transition-colors border-b-4 border-b-cyan-200">
+            <img className={styles.image} src={item.thumb_url} alt={item.title} />
+            <div className="relative p-4 sm:p-6 -mt-6 sm:-mt-12">
+              <span className="block text-sm mb-4 opacity-60">{item.take_time.substring(0, 10)}</span>
+              <h1 className="text-pink-400 text-xl sm:text-2xl font-bold text-ellipsis overflow-hidden">{item.title}</h1>
+            </div>
+          </div>
+        ))}
+      </section>
+    </main>
+  );
+}
diff --git a/app/routes/gallery.$/styles.module.less b/app/routes/gallery.$/styles.module.less
new file mode 100644
index 0000000..ca03899
--- /dev/null
+++ b/app/routes/gallery.$/styles.module.less
@@ -0,0 +1,3 @@
+.image {
+  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 75%);
+}
diff --git a/app/types/api.d.ts b/app/types/api.d.ts
index 882a18f..739da96 100644
--- a/app/types/api.d.ts
+++ b/app/types/api.d.ts
@@ -4,4 +4,8 @@ declare namespace API {
     msg: string;
     data: D;
   }
+
+  interface PageResponse<D> extends Response<D> {
+    count: number;
+  }
 }
diff --git a/app/types/api.gallery.d.ts b/app/types/api.gallery.d.ts
new file mode 100644
index 0000000..d2c83e6
--- /dev/null
+++ b/app/types/api.gallery.d.ts
@@ -0,0 +1,12 @@
+declare namespace API {
+  namespace Gallery {
+    export interface ICateData {
+      id: number
+      name: string
+      slug: string
+      url: string
+      description: string
+      hidden: boolean
+    }
+  }
+}
diff --git a/app/types/api.media.d.ts b/app/types/api.media.d.ts
new file mode 100644
index 0000000..186f1bf
--- /dev/null
+++ b/app/types/api.media.d.ts
@@ -0,0 +1,37 @@
+declare namespace API {
+  namespace Media {
+    // 数据库本来的数据
+    export interface IMediaBaseData {
+      title: string
+      origin_name: string
+      content: string
+      cate: number
+      key: string
+      hidden: boolean
+      hidden_ref: boolean
+      is_sensitive: boolean
+      take_time: string
+      modified: number | string // 文件修改时间
+      photo?: File
+    }
+
+    // 后端加的数据
+    export interface IMediaExtraData extends IMediaBaseData {
+      file_name: string
+      type: string
+      meta: unknown
+      path: string
+
+      likes: number
+      created_at: string
+      updated_at: string
+
+      url: string
+      thumb_url: string
+    }
+
+    export interface IMediaData extends IMediaExtraData {
+      id: number
+    }
+  }
+}