♻️Refactor: 修改Card组件前端样式

frontend/src/components/Card.tsx

@@ -1,44 +1,50 @@
-import {ScrollShadow} from "@heroui/react";
+import { Card } from "@heroui/react";
-import { useEffect, useState } from "react";
+// import { useEffect, useState } from "react";
 
-export default function Card() {
+export default function Default() {
   // Data
-  const [data, setData] = useState(null)
+  // const [data, setData] = useState(null);
-  const [loading, setLoading] = useState(true)
+  // const [loading, setLoading] = useState(true);
 
   // Load Data
-  useEffect(() => {
+  // useEffect(() => {
-    const fetchData = async () => {
+  //   const fetchData = async () => {
-      try {
+  //     try {
-        const response = await fetch('http://localhost:8080/agent/card/你好')
+  //       const response = await fetch("http://localhost:8080/agent/card/你好");
-        if (!response.ok) {
+  //       if (!response.ok) {
-          throw new Error('API Error');
+  //         throw new Error("API Error");
-        }
+  //       }
-        const result = await response.json();
+  //       const result = await response.json();
-        setData(result);
+  //       setData(result);
-      } catch (error) {
+  //     } catch (error) {
-        console.error("Failed to fetch data: ", error);
+  //       console.error("Failed to fetch data: ", error);
-      } finally {
+  //     } finally {
-        setLoading(false);
+  //       setLoading(false);
-      }
+  //     }
-    };
+  //   };
-    fetchData();
+  //   fetchData();
-  }, []);
+  // }, []);
-
 
   return (
     <div className="w-full p-0 sm:max-w-sm">
-      <ScrollShadow className="max-h-[500px] p-10">
+      <Card className="w-[500px]">
-        <div className="space-y-4">
+        🧐
-{loading ? (
+        <Card.Title>主题 xxx</Card.Title>
-            // 3. 加载状态显示 Loading...
+        <Card.Description>
-            <p className="text-center text-gray-500">Loading data...</p>
+          🔑 关键要点： <br />- 要点1（具体说明，20字以内） <br />-
-          ) : (
+          要点2（具体说明，20字以内） <br />- 要点3（具体说明，20字以内） <br />
-            // 4. 渲染从 API 获取的数据
+          - 要点4（具体说明，20字以内）
-            <pre>{data?.message}</pre>
+          <br />
-          )}
+          <br />
-        </div>
+          ⚠️ 常见误区： <br />- 误区1：[说明] <br />- 误区2：[说明]
-      </ScrollShadow>
+          <br />
+          <br />✅ 最佳实践： <br />- 实践1：[具体建议] <br />-
+          实践2：[具体建议]
+          <br />
+          <br />
+          🎯 记忆口诀：[朗朗上口的口诀，帮助记忆]
+        </Card.Description>
+      </Card>
     </div>
   );
 }