44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
import {ScrollShadow} from "@heroui/react";
|
|
import { useEffect, useState } from "react";
|
|
|
|
export default function Card() {
|
|
// Data
|
|
const [data, setData] = useState(null)
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
// Load Data
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const response = await fetch('http://localhost:8080/agent/card/你好')
|
|
if (!response.ok) {
|
|
throw new Error('API Error');
|
|
}
|
|
const result = await response.json();
|
|
setData(result);
|
|
} catch (error) {
|
|
console.error("Failed to fetch data: ", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
fetchData();
|
|
}, []);
|
|
|
|
|
|
return (
|
|
<div className="w-full p-0 sm:max-w-sm">
|
|
<ScrollShadow className="max-h-[500px] p-10">
|
|
<div className="space-y-4">
|
|
{loading ? (
|
|
// 3. 加载状态显示 Loading...
|
|
<p className="text-center text-gray-500">Loading data...</p>
|
|
) : (
|
|
// 4. 渲染从 API 获取的数据
|
|
<pre>{data?.message}</pre>
|
|
)}
|
|
</div>
|
|
</ScrollShadow>
|
|
</div>
|
|
);
|
|
} |