Feat: Gallery List Page

相册页面，包括页尾组件

.env.default

@@ -0,0 +1,3 @@
+APP_SITENAME=萝心花园
+APP_APIURL=https://paul.ren
+APP_FOOTER_EXTRA=

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;

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 />

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>
+  );
+}

app/routes/gallery.$/styles.module.less

@@ -0,0 +1,3 @@
+.image {
+  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 75%);
+}

app/types/api.d.ts

@@ -4,4 +4,8 @@ declare namespace API {
     msg: string;
     data: D;
   }
+
+  interface PageResponse<D> extends Response<D> {
+    count: number;
+  }
 }

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
+    }
+  }
+}

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
+    }
+  }
+}