改为随机30张

src/app/[lang]/components/menu/content.tsx

@@ -100,7 +100,7 @@ export function Content({
             icon: Quote,
             label: <span className="font-mono">{cardCount}</span>,
             variant: /^(\/quota)/.test(pathname) ? "default" : "ghost",
-            href: `/${lang}/quota/1`,
+            href: `/${lang}/quota`,
           },
         ]}
       />

src/app/[lang]/components/search.tsx

@@ -68,7 +68,7 @@ export default function SearchDialog({
           <Button
             size={"sm"}
             variant={"outline"}
-            className="h-8 w-8 bg-transparent p-0 lg:hidden"
+            className="h-8 w-8 p-0 lg:hidden"
             onClick={() => setOpen(true)}
           >
             <Search className="h-4 w-4" />

src/app/[lang]/quota/page.tsx

@@ -0,0 +1,59 @@
+import Image from "next/image";
+import { type Locale } from "~/dictionaries";
+import { api } from "~/trpc/server";
+import { R2Host } from "~/utils";
+import Loading from "../loading";
+import Link from "next/link";
+import { HeaderMain } from "~/components/ui/header";
+import { Button } from "~/components/ui/button";
+import { ShuffleIcon } from "lucide-react";
+
+export default async function Page({
+  params,
+}: {
+  params: { lang: Locale; page: string };
+}) {
+  const data = await api.card.random.query();
+
+  if (!data) return <Loading />;
+
+  return (
+    <>
+      <HeaderMain>
+        <div className="flex items-center px-4">
+          随机诗词片段
+          <Button
+            asChild
+            variant={"outline"}
+            size={"sm"}
+            className="ml-4 h-8 w-8 p-0"
+          >
+            <Link href={`/${params.lang}/quota?t=${Date.now()}`}>
+              <ShuffleIcon className="h-4 w-4" />
+            </Link>
+          </Button>
+        </div>
+      </HeaderMain>
+      <div className="py-4">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
+          {data.map((item) => (
+            <Link
+              href={`/${params.lang}/poem/${item.poemId}`}
+              key={item.id}
+              title={item.content || "诗词片段摘抄"}
+              className="relative block aspect-[3/4] cursor-pointer overflow-hidden rounded-md shadow-md"
+            >
+              <Image
+                key={item.id}
+                alt={item.content || "诗词片段摘抄"}
+                src={`${R2Host}/aspoem/${item.url}_md.webp`}
+                fill
+                priority
+              />
+            </Link>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}

src/components/mode-toggle.tsx

@@ -18,11 +18,7 @@ export default function ModeToggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button
-          variant="outline"
-          size="icon"
-          className="h-8 w-8 bg-transparent"
-        >
+        <Button variant="outline" size="icon" className="h-8 w-8">
           <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>

src/server/api/routers/card.ts

@@ -110,6 +110,19 @@ export const cardRouter = createTRPCRouter({
       };
     }),
 
+  random: publicProcedure.query(async ({ ctx }) => {
+    const count = await ctx.db.card.count();
+    const skip = Math.floor(Math.random() * count);
+
+    return ctx.db.card.findMany({
+      take: 30,
+      skip: skip,
+      orderBy: {
+        id: "desc",
+      },
+    });
+  }),
+
   count: publicProcedure.query(async ({ ctx }) => {
     return ctx.db.card.count();
   }),