From e9f333fc079ba1fce286f8c5db00ec4d0dcea604 Mon Sep 17 00:00:00 2001
From: tone <3341154833@qq.com>
Date: Fri, 16 May 2025 17:33:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=B5=84=E6=BA=90=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E5=8A=A0=E8=BD=BD=E6=80=81=E5=92=8C=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(with-header-footer)/resource/page.tsx    | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

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 b3df746..4653091 100644
--- a/tone-page-web/app/(with-header-footer)/resource/page.tsx
+++ b/tone-page-web/app/(with-header-footer)/resource/page.tsx
@@ -3,6 +3,13 @@
 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(
@@ -16,8 +23,27 @@ export default function Resources() {
             <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}