From 541ca96fc69b448e27b443c665ba3289e08d5229 Mon Sep 17 00:00:00 2001 From: wonder Date: Fri, 27 Mar 2026 20:01:56 +0800 Subject: [PATCH] =?UTF-8?q?=20=E2=9C=A8Feat:=20=E5=AE=8C=E6=88=90=E5=89=8D?= =?UTF-8?q?=E7=AB=AF=E7=9F=A5=E8=AF=86=E5=8D=A1=E7=89=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/agent/basicAgent.go | 4 +- frontend/src/App.tsx | 2 +- frontend/src/components/Card.tsx | 272 +++++++++++++++++++++---------- 3 files changed, 186 insertions(+), 92 deletions(-) diff --git a/backend/agent/basicAgent.go b/backend/agent/basicAgent.go index 1846506..d3ed2f6 100644 --- a/backend/agent/basicAgent.go +++ b/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) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index c7cc53a..42d48da 100644 --- a/frontend/src/App.tsx +++ b/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" > - + ); diff --git a/frontend/src/components/Card.tsx b/frontend/src/components/Card.tsx index cd0c534..8e1b415 100644 --- a/frontend/src/components/Card.tsx +++ b/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(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(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 ( +
+ +
Loading...
+ +
+ ); + } + + if (error) { + return ( +
+ +
{error}
+ +
+ ); + } return (
- {/* 背景表情符号 - 放大、虚化、右下角 */}
🧐
- {/* 内容区域 - 确保在背景之上 */}
- {/* 标题区域 */}
- 主题 xxx + {topic}
+ {data!.summary && ( +

{data!.summary}

+ )}
- {/* 内容区域 */} - {/* 关键要点 */}

- 🔑 - 关键要点 + + {data!.key_points.header}

    - {[ - "要点1（具体说明，20字以内）", - "要点2（具体说明，20字以内）", - "要点3（具体说明，20字以内）", - "要点4（具体说明，20字以内）", - ].map((item, index) => ( + {data!.key_points.items.map((item, index) => (
  • {index + 1} - {item} + + + {item.point} + + {item.description && ( + ({item.description}) + )} +
    • ))}
- {/* 常见误区 */}

- ⚠️ - 常见误区 + + {data!.common_misconceptions.header}

-
    -
  • - - ✗ - - - 误区1： - [说明] - -
    • -
  • - - ✗ - - - 误区2： - [说明] - -
    • +
      + {data!.common_misconceptions.items.map((item, index) => ( +
    • + + ✗ + +
      + + {item.title} + +

      + {item.detail} +

      + {item.fix && ( +
      + + + 建议：{item.fix} + +
      + )} +
      +
      • + ))}
- {/* 最佳实践 */}

- ✅ - 最佳实践 + + {data!.best_practices.header}

-
    -
  • - - ✓ - - - 实践1： - - [具体建议] +
      + {data!.best_practices.items.map((item, index) => ( +
    • + + ✓ - -
      • -
    • - - ✓ - - - 实践2： - - [具体建议] - - -
      • +
      + + {item.title} + +

      + {item.detail} +

      + {(item.correct_example || item.incorrect_example) && ( +
      + {item.incorrect_example && ( +
      + + ❌ + + + {item.incorrect_example} + +
      + )} + {item.correct_example && ( +
      + + ✅ + + + {item.correct_example} + +
      + )} +
      + )} +
      + + ))}
- {/* 记忆口诀 */}

- 🎯 - 记忆口诀 + + {data!.mnemonic.header}

- [朗朗上口的口诀，帮助记忆] + {data!.mnemonic.content}