feat: 优化项目目录结构

apps/frontend/app/(with-header-footer)/resource/components/ResourceCard.tsx

@@ -0,0 +1,47 @@
+import { ResourceBadge } from "@/components/resource";
+import { Card, CardContent } from "@/components/ui/card";
+import { Resource } from "@/lib/types/resource";
+import Image from "next/image";
+import React from "react";
+
+interface ResourceCardProps extends React.HTMLProps<HTMLAnchorElement> {
+    r: Resource;
+}
+
+export function ResourceCard({ r, ...props }: ResourceCardProps) {
+    const [imageError, setImageError] = React.useState(false);
+
+    return (
+        <a href={r.link} target="_blank" {...props}>
+            <Card className="w-full md:w-92 lg:w-100 md:rounded-xl rounded-none duration-300">
+                <CardContent>
+                    <div className="flex gap-6">
+                        <div>
+                            {!imageError && <Image
+                                src={r.imageUrl}
+                                alt="资源图片"
+                                width={90}
+                                height={90}
+                                className="rounded-md shadow"
+                                priority
+                                quality={80}
+                                onError={() => setImageError(true)}
+                            />}
+                        </div>
+                        <div className="flex-1 overflow-x-hidden">
+                            <div className="font-bold text-2xl">{r.title}</div>
+                            <div className="font-medium text-sm text-zinc-400 mt-1">{r.description}</div>
+                            <div className="flex gap-2 flex-wrap mt-4">
+                                {
+                                    r.tags.map((tag) => (
+                                        <ResourceBadge key={tag.name} tag={tag} />
+                                    ))
+                                }
+                            </div>
+                        </div>
+                    </div>
+                </CardContent>
+            </Card>
+        </a>
+    )
+}

apps/frontend/app/(with-header-footer)/resource/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import useSWR from "swr";
+import { ResourceCard } from "./components/ResourceCard";
+import { ResourceApi } from "@/lib/api";
+import {
+    Alert,
+    AlertDescription,
+    AlertTitle,
+} from "@/components/ui/alert"
+import { AlertCircle } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function Resources() {
+    const { data, isLoading, error } = useSWR(
+        '/api/resource',
+        () => ResourceApi.list(),
+    );
+
+    return (
+        <div className="flex-1 flex flex-col items-center">
+            <h1 className="mt-6 md:mt-20 text-2xl md:text-5xl font-medium text-zinc-800 text-center duration-300">精心挑选并收藏的资源</h1>
+            <p className="mt-4 md:mt-8 mx-3 text-zinc-400 text-sm text-center duration-300">请在浏览此部分内容前阅读并同意
+                <a className="text-zinc-600">《使用条款和隐私政策》</a>
+                ，继续使用或浏览表示您接受协议条款。</p>
+            {
+                error && (
+                    <div className="mt-10 mx-5">
+                        <Alert variant="destructive">
+                            <AlertCircle className="h-4 w-4" />
+                            <AlertTitle>出错了</AlertTitle>
+                            <AlertDescription>
+                                {error.message}
+                            </AlertDescription>
+                        </Alert>
+                    </div>
+                )
+            }
+
+            <div className="mt-6 sm:mt-10 md:mt-15 w-full flex flex-col md:w-auto md:mx-auto md:grid grid-cols-2 2xl:gap-x-35 lg:gap-x-20 gap-x-10 lg:gap-y-10 gap-y-5 sm:mb-10 duration-300">
+                {isLoading && (
+                    [...Array(3).map((_, i) => (
+                        <Skeleton key={i} className="h-35 w-full md:w-92 lg:w-100 md:rounded-xl rounded-none duration-300" />
+                    ))]
+                )}
+
+                {data && data.map((resource) => (
+                    <ResourceCard
+                        key={resource.id}
+                        r={resource}
+                    />
+                ))}
+            </div>
+        </div>
+    )
+}