From 3402d263c15311530d7fa9e37d361ba77f402634 Mon Sep 17 00:00:00 2001
From: tone <3341154833@qq.com>
Date: Mon, 12 May 2025 21:50:53 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0resource=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resource/components/ResourceCard.tsx      | 25 +++++++++-------
 .../(with-header-footer)/resource/page.tsx    | 30 +++++++++----------
 tone-page-web/lib/api/index.ts                |  3 +-
 tone-page-web/lib/api/resource/index.ts       |  1 +
 tone-page-web/lib/api/resource/list.ts        |  6 ++++
 5 files changed, 38 insertions(+), 27 deletions(-)
 create mode 100644 tone-page-web/lib/api/resource/index.ts
 create mode 100644 tone-page-web/lib/api/resource/list.ts

diff --git a/tone-page-web/app/(with-header-footer)/resource/components/ResourceCard.tsx b/tone-page-web/app/(with-header-footer)/resource/components/ResourceCard.tsx
index ac35311..36576f5 100644
--- a/tone-page-web/app/(with-header-footer)/resource/components/ResourceCard.tsx
+++ b/tone-page-web/app/(with-header-footer)/resource/components/ResourceCard.tsx
@@ -2,35 +2,38 @@ 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 {
-    resource: Resource;
-    key: string;
+interface ResourceCardProps extends React.HTMLProps<HTMLAnchorElement> {
+    r: Resource;
 }
 
-export function ResourceCard({ resource, key }: ResourceCardProps) {
+export function ResourceCard({ r, ...props }: ResourceCardProps) {
+    const [imageError, setImageError] = React.useState(false);
+
     return (
-        <a href={resource.link} target="_blank" key={key}>
+        <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>
-                            <Image
-                                src={resource.imageUrl}
+                            {!imageError && <Image
+                                src={r.imageUrl}
                                 alt="资源图片"
                                 width={90}
                                 height={90}
                                 className="rounded-md shadow"
                                 priority
                                 quality={100}
-                            />
+                                onError={() => setImageError(true)}
+                            />}
                         </div>
                         <div className="flex-1 overflow-x-hidden">
-                            <div className="font-bold text-2xl">{resource.title}</div>
-                            <div className="font-medium text-sm text-zinc-400 mt-1">{resource.description}</div>
+                            <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">
                                 {
-                                    resource.tags.map((tag) => (
+                                    r.tags.map((tag) => (
                                         <ResourceBadge tag={tag} />
                                     ))
                                 }
diff --git a/tone-page-web/app/(with-header-footer)/resource/page.tsx b/tone-page-web/app/(with-header-footer)/resource/page.tsx
index a923c30..bc3b2db 100644
--- a/tone-page-web/app/(with-header-footer)/resource/page.tsx
+++ b/tone-page-web/app/(with-header-footer)/resource/page.tsx
@@ -1,6 +1,15 @@
+"use client";
+
+import useSWR from "swr";
 import { ResourceCard } from "./components/ResourceCard";
+import { ResourceApi } from "@/lib/api";
 
 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-600 text-center duration-300">精心挑选并收藏的资源</h1>
@@ -9,21 +18,12 @@ export default function Resources() {
                 ，继续使用或浏览表示您接受协议条款。</p>
 
             <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">
-                <ResourceCard
-                    key="1"
-                    resource={{
-                        id: Math.random().toString(),
-                        title: "Adobe全家桶",
-                        description: "包含了macOS、Windows操作系统的Adobe全系列软件",
-                        imageUrl: "",
-                        link: "https://bing.com",
-                        tags: [
-                            { id: "1", name: "第三方来源", color: "" },
-                            { id: "2", name: "macOS", color: "#dbedfd" },
-                            { id: "3", name: "Windows", color: "#dbedfd" },
-                        ],
-                    }}
-                />
+                {data && data.map((resource) => (
+                    <ResourceCard
+                        key={resource.id}
+                        r={resource}
+                    />
+                ))}
             </div>
         </div>
     )
diff --git a/tone-page-web/lib/api/index.ts b/tone-page-web/lib/api/index.ts
index 78abf48..16872be 100644
--- a/tone-page-web/lib/api/index.ts
+++ b/tone-page-web/lib/api/index.ts
@@ -1,3 +1,4 @@
 export * as authApi from './auth/index';
 export * as verificationApi from './verification/index';
-export * as AdminApi from './admin/index';
\ No newline at end of file
+export * as AdminApi from './admin/index';
+export * as ResourceApi from './resource/index';
\ No newline at end of file
diff --git a/tone-page-web/lib/api/resource/index.ts b/tone-page-web/lib/api/resource/index.ts
new file mode 100644
index 0000000..fd7991d
--- /dev/null
+++ b/tone-page-web/lib/api/resource/index.ts
@@ -0,0 +1 @@
+export * from './list';
\ No newline at end of file
diff --git a/tone-page-web/lib/api/resource/list.ts b/tone-page-web/lib/api/resource/list.ts
new file mode 100644
index 0000000..848a539
--- /dev/null
+++ b/tone-page-web/lib/api/resource/list.ts
@@ -0,0 +1,6 @@
+import { Resource } from "@/lib/types/resource";
+import fetcher from "../fetcher";
+
+export async function list() {
+    return fetcher<Resource[]>('/api/resource');
+}
\ No newline at end of file