✨Feat: 完成前端知识卡片

backend/agent/basicAgent.go

@@ -7,8 +7,8 @@ import (
 	"os"
 
 	"github.com/tmc/langchaingo/llms"
-	"github.com/tmc/langchaingo/prompts"
 	"github.com/tmc/langchaingo/outputparser"
+	"github.com/tmc/langchaingo/prompts"
 )
 
 func Call(llm llms.Model, ctx context.Context) (response string) {
@@ -96,7 +96,7 @@ func CallWithAgentDefined[T any](llm llms.Model, ctx context.Context, topic stri
 	responseString, err := llms.GenerateFromSinglePrompt(
 		ctx,
 		llm,
-		"用户正在学习Go语言，你是用户的助手。\n"+prompt,
+		"用户正在学习Go语言和React框架，你是用户的助手。\n"+prompt,
 	)
 	if err != nil {
 		log.Fatal(err)

frontend/src/App.tsx

@@ -8,7 +8,7 @@ function App() {
         className="flex min-w-[320px] flex-col gap-3 rounded-3xl p-6"
         variant="default"
       >
-        <Card />
+        <Card topic="React Hooks" />
       </Surface>
     </>
   );

frontend/src/components/Card.tsx

@@ -1,141 +1,235 @@
 import { Card } from "@heroui/react";
-// import { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
-export default function Default() {
-  // Data
-  // const [data, setData] = useState(null);
-  // const [loading, setLoading] = useState(true);
+interface KeyPointItem {
+  point: string;
+  description: string;
+}
 
-  // 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();
-  // }, []);
+interface MisconceptionItem {
+  id: string;
+  title: string;
+  detail: string;
+  fix: string;
+}
+
+interface PracticeItem {
+  id: string;
+  title: string;
+  detail: string;
+  correct_example?: string;
+  incorrect_example?: string;
+}
+
+interface KeyPoints {
+  header: string;
+  items: KeyPointItem[];
+}
+
+interface CommonMisconceptions {
+  header: string;
+  items: MisconceptionItem[];
+}
+
+interface BestPractices {
+  header: string;
+  items: PracticeItem[];
+}
+
+interface Mnemonic {
+  header: string;
+  content: string;
+}
+
+interface CardData {
+  summary: string;
+  key_points: KeyPoints;
+  common_misconceptions: CommonMisconceptions;
+  best_practices: BestPractices;
+  mnemonic: Mnemonic;
+}
+
+interface Props {
+  topic: string;
+}
+
+export default function Default({ topic }: Props) {
+  const [data, setData] = useState<CardData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch(
+          `http://localhost:8080/card/${encodeURIComponent(topic)}`,
+        );
+        if (!response.ok) {
+          throw new Error("API Error");
+        }
+        const result = await response.json();
+        setData(result.message);
+        setError(null);
+      } catch (error) {
+        console.error("Failed to fetch data: ", error);
+        setError("Failed to load data. Please try again.");
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, [topic]);
+
+  if (loading) {
+    return (
+      <div className="w-full p-4 sm:p-6 md:max-w-2xl lg:max-w-4xl mx-auto">
+        <Card className="relative w-full max-w-2xl mx-auto bg-white shadow-xl rounded-2xl overflow-hidden border border-gray-100 p-8">
+          <div className="text-center text-gray-600">Loading...</div>
+        </Card>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="w-full p-4 sm:p-6 md:max-w-2xl lg:max-w-4xl mx-auto">
+        <Card className="relative w-full max-w-2xl mx-auto bg-white shadow-xl rounded-2xl overflow-hidden border border-gray-100 p-8">
+          <div className="text-center text-red-600">{error}</div>
+        </Card>
+      </div>
+    );
+  }
 
   return (
     <div className="w-full p-4 sm:p-6 md:max-w-2xl lg:max-w-4xl mx-auto">
       <Card className="relative w-full max-w-2xl mx-auto bg-white shadow-xl rounded-2xl overflow-hidden border border-gray-100">
-        {/* 背景表情符号 - 放大、虚化、右下角 */}
         <div className="absolute upper-0 right-0 -mr-2 -mb-2 pointer-events-none select-none">
           <span className="text-[10rem] opacity-80 blur-none">🧐</span>
         </div>
 
-        {/* 内容区域 - 确保在背景之上 */}
         <div className="relative z-5">
-          {/* 标题区域 */}
           <div className="px-6 pt-6 pb-4">
             <Card.Title className="text-2xl font-bold text-gray-800 mb-2">
-              主题 xxx
+              {topic}
             </Card.Title>
             <div className="h-1 w-20 bg-gradient-to-r from-blue-500 to-indigo-500 rounded"></div>
+            {data!.summary && (
+              <p className="mt-3 text-gray-600">{data!.summary}</p>
+            )}
           </div>
 
-          {/* 内容区域 */}
           <Card.Description className="px-6 pb-6 space-y-6">
-            {/* 关键要点 */}
             <div>
               <h3 className="flex items-center text-lg font-semibold text-gray-700 mb-3">
-                <span className="mr-2">🔑</span>
-                关键要点
+                <span className="mr-2"></span>
+                {data!.key_points.header}
               </h3>
               <ul className="space-y-2 ml-7">
-                {[
-                  "要点1（具体说明，20字以内）",
-                  "要点2（具体说明，20字以内）",
-                  "要点3（具体说明，20字以内）",
-                  "要点4（具体说明，20字以内）",
-                ].map((item, index) => (
+                {data!.key_points.items.map((item, index) => (
                   <li key={index} className="flex items-start">
                     <span className="inline-flex items-center justify-center w-6 h-6 bg-blue-100 text-blue-600 rounded-full text-sm font-medium mr-2.5 mt-0.5 flex-shrink-0 min-w-[1.5rem]">
                       {index + 1}
                     </span>
-                    <span className="text-gray-600 pt-0.5">{item}</span>
+                    <span className="text-gray-600 pt-0.5">
+                      <span className="font-medium text-gray-800">
+                        {item.point}
+                      </span>
+                      {item.description && (
+                        <span className="ml-1">({item.description})</span>
+                      )}
+                    </span>
                   </li>
                 ))}
               </ul>
             </div>
 
-            {/* 常见误区 */}
             <div>
               <h3 className="flex items-center text-lg font-semibold text-gray-700 mb-3">
-                <span className="mr-2">⚠️</span>
-                常见误区
+                <span className="mr-2"></span>
+                {data!.common_misconceptions.header}
               </h3>
-              <ul className="space-y-2 ml-7">
-                <li className="flex items-start">
+              <ul className="space-y-3 ml-7">
+                {data!.common_misconceptions.items.map((item, index) => (
+                  <li key={item.id || index} className="flex flex-start">
                     <span className="text-red-500 mr-2.5 mt-0.5 flex-shrink-0">
                       ✗
                     </span>
-                  <span className="text-gray-600 pt-0.5">
-                    误区1：
-                    <span className="text-red-600 font-medium">[说明]</span>
-                  </span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-red-500 mr-2.5 mt-0.5 flex-shrink-0">
-                    ✗
-                  </span>
-                  <span className="text-gray-600 pt-0.5">
-                    误区2：
-                    <span className="text-red-600 font-medium">[说明]</span>
+                    <div className="flex-1">
+                      <span className="text-gray-700 font-medium">
+                        {item.title}
                       </span>
+                      <p className="text-gray-600 text-sm mt-1">
+                        {item.detail}
+                      </p>
+                      {item.fix && (
+                        <div className="mt-2 flex items-start text-sm">
+                          <span className="text-green-600 mr-1.5 mt-0.5"></span>
+                          <span className="text-gray-600">
+                            建议：{item.fix}
+                          </span>
+                        </div>
+                      )}
+                    </div>
                   </li>
+                ))}
               </ul>
             </div>
 
-            {/* 最佳实践 */}
             <div>
               <h3 className="flex items-center text-lg font-semibold text-gray-700 mb-3">
-                <span className="mr-2">✅</span>
-                最佳实践
+                <span className="mr-2"></span>
+                {data!.best_practices.header}
               </h3>
-              <ul className="space-y-2 ml-7">
-                <li className="flex items-start">
+              <ul className="space-y-3 ml-7">
+                {data!.best_practices.items.map((item, index) => (
+                  <li key={item.id || index} className="flex flex-start">
                     <span className="text-green-500 mr-2.5 mt-0.5 flex-shrink-0">
                       ✓
                     </span>
-                  <span className="text-gray-600 pt-0.5">
-                    实践1：
-                    <span className="text-green-600 font-medium">
-                      [具体建议]
-                    </span>
-                  </span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2.5 mt-0.5 flex-shrink-0">
-                    ✓
-                  </span>
-                  <span className="text-gray-600 pt-0.5">
-                    实践2：
-                    <span className="text-green-600 font-medium">
-                      [具体建议]
+                    <div className="flex-1">
+                      <span className="text-gray-700 font-medium">
+                        {item.title}
                       </span>
+                      <p className="text-gray-600 text-sm mt-1">
+                        {item.detail}
+                      </p>
+                      {(item.correct_example || item.incorrect_example) && (
+                        <div className="mt-2 space-y-1">
+                          {item.incorrect_example && (
+                            <div className="flex items-start text-sm bg-red-50 px-2 py-1.5 rounded border border-red-100">
+                              <span className="text-red-500 mr-1.5 flex-shrink-0">
+                                ❌
                               </span>
+                              <span className="text-gray-700">
+                                {item.incorrect_example}
+                              </span>
+                            </div>
+                          )}
+                          {item.correct_example && (
+                            <div className="flex items-start text-sm bg-green-50 px-2 py-1.5 rounded border border-green-100">
+                              <span className="text-green-500 mr-1.5 flex-shrink-0">
+                                ✅
+                              </span>
+                              <span className="text-gray-700">
+                                {item.correct_example}
+                              </span>
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </div>
                   </li>
+                ))}
               </ul>
             </div>
 
-            {/* 记忆口诀 */}
             <div className="mt-6 p-4 bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl border border-purple-100">
               <h3 className="flex items-center text-lg font-semibold text-purple-700 mb-2">
-                <span className="mr-2">🎯</span>
-                记忆口诀
+                <span className="mr-2"></span>
+                {data!.mnemonic.header}
               </h3>
               <p className="text-gray-700 italic bg-white px-4 py-3 rounded-lg shadow-sm">
-                [朗朗上口的口诀，帮助记忆]
+                {data!.mnemonic.content}
               </p>
             </div>
           </Card.Description>