✨Feat: 完成前端工程场景

.gitignore

@@ -25,3 +25,5 @@ go.work.sum
 # env file
 .env
 .vscode/
+
+.exe

backend/agent/basicAgent.go

@@ -5,8 +5,10 @@ import (
 	"fmt"
 	"log"
 	"os"
+	"strings"
 
 	"github.com/tmc/langchaingo/llms"
+	"github.com/tmc/langchaingo/outputparser"
 	"github.com/tmc/langchaingo/prompts"
 )
 
@@ -63,3 +65,63 @@ func CallWithAgent(llm llms.Model, ctx context.Context, topic string, promptPath
 	response = CallWithMessage(llm, ctx, prompt)
 	return response
 }
+
+func CallWithAgentDefined[T any](llm llms.Model, ctx context.Context, topic string, promptPath string, responseType T) (response T) {
+
+	parse, err := outputparser.NewDefined(responseType)
+	if err != nil {
+		fmt.Printf("CreateParse err: %v", err)
+		return
+	}
+
+	content, err := os.ReadFile(promptPath)
+	if err != nil {
+		fmt.Printf("File err: %v", err)
+		return
+	}
+
+	text := string(content)
+
+	textWithFormatInstruction := text + "\n" + parse.GetFormatInstructions()
+
+	template := prompts.NewPromptTemplate(textWithFormatInstruction, []string{".Knowledge"})
+	prompt, err := template.Format(map[string]any{
+		"Knowledge": topic,
+	})
+
+	fmt.Println("Me: ", prompt)
+	if err != nil {
+		fmt.Printf("Prompt err: %v", err)
+	}
+
+	responseString, err := llms.GenerateFromSinglePrompt(
+		ctx,
+		llm,
+		"用户正在学习Go语言和React框架，你是用户的助手。\n"+prompt,
+	)
+
+	fmt.Printf("Raw output: %v\n\n", responseString)
+
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	responseString = strings.TrimPrefix(responseString, "\n")
+	responseString = strings.TrimSuffix(responseString, "\n")
+
+	if !strings.Contains(responseString, "```json") {
+		responseString = "```json\n" + responseString + "\n```"
+	}
+
+	// fmt.Printf("AI: %s\n\n", responseString)
+
+	response, err = parse.Parse(responseString)
+	if err != nil {
+		fmt.Printf("Parse err: %v", err)
+		return
+	}
+
+	fmt.Printf("API:\n%v", response)
+
+	return response
+}

backend/agent/response_struct/card_test.go

@@ -1,18 +0,0 @@
-package agent
-
-import (
-	"testing"
-
-	"github.com/tmc/langchaingo/outputparser"
-)
-
-func TestCard(t *testing.T) {
-	definedCard, err := outputparser.NewDefined(Card{})
-
-	if err != nil {
-		t.Fatalf("%v", err)
-	}
-
-	output := definedCard.GetFormatInstructions()
-	t.Log(output)
-}

backend/handlers/agent.go

@@ -2,10 +2,8 @@ package handle
 
 import (
 	"agent/agent"
+	"agent/response_struct"
 	"context"
-	"fmt"
-
-	"sync"
 
 	"github.com/tmc/langchaingo/llms"
 )
@@ -13,76 +11,30 @@ import (
 var files = []string{
 	".\\prompt\\card.txt",
 	".\\prompt\\guodegang.txt",
-	".\\prompt\\mermaid.txt",
 	".\\prompt\\quiz.txt",
 	".\\prompt\\scenario.txt",
 }
 
-func GetCard(llm llms.Model, ctx context.Context, topic string) (response string) {
+func GetCard(llm llms.Model, ctx context.Context, topic string) (response response_struct.Card) {
 	file := files[0]
-	response = agent.CallWithAgent(llm, ctx, topic, file)
+	response = agent.CallWithAgentDefined(llm, ctx, topic, file, response_struct.Card{})
 	return
 }
 
-func GetGuodegang(llm llms.Model, ctx context.Context, topic string) (response string) {
+func GetGuodegang(llm llms.Model, ctx context.Context, topic string) (response response_struct.Guodegang) {
 	file := files[1]
-	response = agent.CallWithAgent(llm, ctx, topic, file)
+	response = agent.CallWithAgentDefined(llm, ctx, topic, file, response_struct.Guodegang{})
 	return
 }
 
-func GetMermaid(llm llms.Model, ctx context.Context, topic string) (response string) {
+func GetQuiz(llm llms.Model, ctx context.Context, topic string) (response response_struct.Quiz) {
 	file := files[2]
-	response = agent.CallWithAgent(llm, ctx, topic, file)
+	response = agent.CallWithAgentDefined(llm, ctx, topic, file, response_struct.Quiz{})
 	return
 }
 
-func GetQuiz(llm llms.Model, ctx context.Context, topic string) (response string) {
+func GetScenario(llm llms.Model, ctx context.Context, topic string) (response response_struct.ScenarioResponse) {
 	file := files[3]
-	response = agent.CallWithAgent(llm, ctx, topic, file)
+	response = agent.CallWithAgentDefined(llm, ctx, topic, file, response_struct.ScenarioResponse{})
 	return
 }
-
-func GetScenario(llm llms.Model, ctx context.Context, topic string) (response string) {
-	file := files[4]
-	response = agent.CallWithAgent(llm, ctx, topic, file)
-	return
-}
-
-func GetAll(llm llms.Model, ctx context.Context, topic string) (response map[string]string) {
-	response = make(map[string]string)
-
-	var wg sync.WaitGroup
-
-	wg.Add(len(files))
-
-	go func() {
-		defer wg.Done()
-		response["card"] = GetCard(llm, ctx, topic)
-	}()
-
-	go func() {
-		defer wg.Done()
-		response["guodegang"] = GetGuodegang(llm, ctx, topic)
-	}()
-
-	go func() {
-		defer wg.Done()
-		response["mermaid"] = GetMermaid(llm, ctx, topic)
-	}()
-
-	go func() {
-		defer wg.Done()
-		response["quiz"] = GetQuiz(llm, ctx, topic)
-	}()
-
-	go func() {
-		defer wg.Done()
-		response["scenario"] = GetScenario(llm, ctx, topic)
-	}()
-
-	wg.Wait()
-
-	fmt.Println("======== All responses received ========")
-
-	return response
-}

backend/main.go

@@ -19,7 +19,7 @@ import (
 var (
 	apiKey  string
 	baseUrl string
-	model   = "Pro/zai-org/GLM-4.7"
+	model   = "stepfun-ai/Step-3.5-Flash"
 	ctx     context.Context
 	llm     llms.Model
 )
@@ -55,50 +55,35 @@ func main() {
 			"message": "pong",
 		})
 	})
-	route.GET("/agent/card/:topic", func(c *gin.Context) {
+	route.GET("/card/:topic", func(c *gin.Context) {
 		topic := c.Param("topic")
 		message := handle.GetCard(llm, ctx, topic)
 		c.JSON(200, gin.H{
 			"message": message,
 		})
 	})
-	route.GET("/agent/guodegang/:topic", func(c *gin.Context) {
+	route.GET("/guodegang/:topic", func(c *gin.Context) {
 		topic := c.Param("topic")
 		message := handle.GetGuodegang(llm, ctx, topic)
 		c.JSON(200, gin.H{
 			"message": message,
 		})
 	})
-	route.GET("/agent/mermaid/:topic", func(c *gin.Context) {
-		topic := c.Param("topic")
-		message := handle.GetMermaid(llm, ctx, topic)
-		c.JSON(200, gin.H{
-			"message": message,
-		})
-	})
-	route.GET("/agent/quiz/:topic", func(c *gin.Context) {
+	route.GET("/quiz/:topic", func(c *gin.Context) {
 		topic := c.Param("topic")
 		message := handle.GetQuiz(llm, ctx, topic)
 		c.JSON(200, gin.H{
 			"message": message,
 		})
 	})
-	route.GET("/agent/scenario/:topic", func(c *gin.Context) {
+	route.GET("/scenario/:topic", func(c *gin.Context) {
 		topic := c.Param("topic")
 		message := handle.GetScenario(llm, ctx, topic)
 		c.JSON(200, gin.H{
 			"message": message,
 		})
 	})
-		route.GET("/agent/all/:topic", func(c *gin.Context) {
-		topic := c.Param("topic")
-		message := handle.GetAll(llm, ctx, topic)
-		c.JSON(200, gin.H{
-			"message": message,
-		})
-	})
 
 	route.Run()
 
-	
 }

backend/prompt/card.txt

@@ -1,23 +1,4 @@
 为"{{.Knowledge}}"制作知识记忆卡片，帮助用户快速掌握关键知识点，要求：
 1. 结构清晰，重点突出
 2. 使用emoji图标增强可读性
-3. 每个部分简洁明了，方便记忆
-
-输出格式：
-📌 核心概念：[精确的知识点定义，50字以内]
-
-🔑 关键要点：
-  - 要点1（具体说明，20字以内）
-  - 要点2（具体说明，20字以内）
-  - 要点3（具体说明，20字以内）
-  - 要点4（具体说明，20字以内）
-
-⚠️ 常见误区：
-  - 误区1：[说明]
-  - 误区2：[说明]
-
-✅ 最佳实践：
-  - 实践1：[具体建议]
-  - 实践2：[具体建议]
-
-🎯 记忆口诀：[朗朗上口的口诀，帮助记忆]
+3. 每个部分简洁明了，方便记忆

backend/prompt/guodegang.txt

@@ -4,7 +4,6 @@
 3. 语气轻松诙谐、接地气，但内容要准确专业
 4. 偶尔使用相声常用语，比如"您听好了"、"这就好比"、"想当年"、"您猜怎么着"
 5. 每讲完一个要点，可以用"这话怎么说呢？"来过渡
-6. 最后用"您记住了吗？下次要是有人问起来，您就把这么一通摆出来，准保让他对您刮目相看！"收尾
 
 注意：
 - 不要过度夸张，保持内容的准确性和专业性

backend/prompt/mermaid.txt

@@ -1,30 +0,0 @@
-请为"{{.Knowledge}}"生成一个Mermaid思维导图或流程图，要求：
-1. 零未定义节点：所有节点（A[文本]、B(文本)等）必须在关系语句前先定义。
-2. 严格缩进与换行：使用2个空格缩进，每条关系语句独立成行。
-3. 括号与引号成对：所有()、[]、<>、""必须严格配对，无多余空格。
-4. 箭头方向明确：使用标准箭头 -->、---、-.-> 等，禁止使用 ->（不完整）或 =>（错误）。
-5. 避免中文直接嵌入：若需中文，确保用双引号包裹（如 A["开始"]），或建议用户使用英文标签。
-
-严格按照Mermaid格式输出，禁止输出任何多余前缀。
-输出格式：
-
-graph TD
-    Knowledge[Knowledge]
-    Definition["定义"]
-    Type["类型"]
-    Application["应用"]
-    ML["机器学习"]
-    DL["深度学习"]
-    Supervised["监督学习"]
-    Unsupervised["无监督学习"]
-    CV["计算机视觉"]
-    NLP["自然语言处理"]
-    Knowledge --> Definition
-    Knowledge --> Type
-    Knowledge --> Application
-    Type --> ML
-    Type --> DL
-    ML --> Supervised
-    ML --> Unsupervised
-    Application --> CV
-

backend/prompt/quiz.txt

@@ -3,21 +3,4 @@
 2. 难度分布：5道基础题、5道中级题、5道进阶题
 3. 每道题都要提供详细的解析说明
 4. 选项之间要有明显的区别，避免模棱两可
-
-严格按照JSON格式输出，禁止输出任何多余前缀。
-输出格式：
-{
-  "questions": [
-    {
-      "question": "题目文字，准确描述问题",
-      "options": [
-        "A. 选项内容",
-        "B. 选项内容",
-        "C. 选项内容",
-        "D. 选项内容"
-      ],
-      "answer": "A",
-      "explanation": "详细解析为什么选这个答案，以及为什么其他选项不对"
-    }
-  ]
-}
+5. 输出选项不需要提供 ABCD 字母

backend/prompt/scenario.txt

@@ -3,37 +3,4 @@
 2. 包含完整的问题背景、解决方案、代码示例
 3. 代码使用伪代码或简化的实现，注重逻辑清晰
 4. 说明使用该知识点解决了什么核心问题
-5. 强调注意事项和最佳实践
-
-严格按照JSON格式输出，禁止输出任何多余前缀。
-输出格式：
-[
-  {
-    "name": "场景名称（例如：高并发缓存更新）",
-    "background": "描述实际业务场景和遇到的问题（例如：电商秒杀场景下，库存缓存频繁失效导致数据库压力骤增）",
-    "solution": "分步骤说明如何使用{{.Knowledge}}解决问题（例如：1. 采用缓存旁路策略；2. 使用分布式锁保证原子性；3. 异步更新缓存）",
-    "codeExample": "使用伪代码或简化代码展示实现方式（例如：\nfunction updateStock(productId) {\n  lock = acquireLock(productId);\n  if (lock) {\n    dbStock = queryDb(productId);\n    cache.set(productId, dbStock);\n    releaseLock(lock);\n  }\n}",
-    "coreProblemSolved": "说明使用该知识点解决了什么核心问题（例如：解决了高并发下缓存与数据库一致性，避免缓存击穿）",
-    "keyConsiderations": [
-      "关键点1（例如：锁粒度要细，避免性能瓶颈）",
-      "关键点2（例如：需设置缓存过期时间作为兜底）",
-      "关键点3（例如：监控缓存命中率，及时调整策略）"
-    ]
-  },
-  {
-    "name": "场景2名称",
-    "background": "...",
-    "solution": "...",
-    "codeExample": "...",
-    "coreProblemSolved": "...",
-    "keyConsiderations": ["...", "..."]
-  },
-  {
-    "name": "场景3名称",
-    "background": "...",
-    "solution": "...",
-    "codeExample": "...",
-    "coreProblemSolved": "...",
-    "keyConsiderations": ["...", "..."]
-  }
-]
+5. 强调注意事项和最佳实践

backend/response_struct/card.go

@@ -1,4 +1,4 @@
-package agent
+package response_struct
 
 // Card 是顶层结构体，包含所有关于 Go map 的笔记内容
 type Card struct {

backend/response_struct/guodegang.go

@@ -0,0 +1,6 @@
+package response_struct
+
+type Guodegang struct {
+	Name    string `json:"name"`
+	Content string `json:"content"`
+}

backend/response_struct/quiz.go

@@ -0,0 +1,12 @@
+package response_struct
+
+type Quiz struct {
+    Questions []Question `json:"questions"`
+}
+
+type Question struct {
+    Question    string   `json:"question"`
+    Options     []string `json:"options"`
+    Answer      string   `json:"answer"`
+    Explanation string   `json:"explanation"`
+}

backend/response_struct/response_test.go

@@ -0,0 +1,51 @@
+package response_struct
+
+import (
+	"testing"
+
+	"github.com/tmc/langchaingo/outputparser"
+)
+
+func TestCard(t *testing.T) {
+	definedCard, err := outputparser.NewDefined(Card{})
+
+	if err != nil {
+		t.Fatalf("%v", err)
+	}
+
+	output := definedCard.GetFormatInstructions()
+	t.Log(output)
+}
+
+func TestGuodegang(t *testing.T) {
+	definedGuodegang, err := outputparser.NewDefined(Guodegang{})
+
+	if err != nil {
+		t.Fatalf("%v", err)
+	}
+
+	output := definedGuodegang.GetFormatInstructions()
+	t.Log(output)
+}
+
+func TestQuiz(t *testing.T) {
+	definedQuiz, err := outputparser.NewDefined(Quiz{})
+
+	if err != nil {
+		t.Fatalf("%v", err)
+	}
+
+	output := definedQuiz.GetFormatInstructions()
+	t.Log(output)
+}
+
+func TestScenario(t *testing.T) {
+	definedScenario, err := outputparser.NewDefined(ScenarioResponse{})
+
+	if err != nil {
+		t.Fatalf("%v", err)
+	}
+
+	output := definedScenario.GetFormatInstructions()
+	t.Log(output)
+}

backend/response_struct/scenario.go

@@ -0,0 +1,14 @@
+package response_struct
+
+type ScenarioResponse struct {
+	Scenarios []Scenario `json:"scenarios"`
+}
+
+type Scenario struct {
+	Name              string   `json:"name"`
+	Background        string   `json:"background"`
+	Solution          string   `json:"solution"`
+	CodeExample       string   `json:"code_example"`
+	CoreProblemSolved string   `json:"core_problem_solved"`
+	KeyConsiderations []string `json:"key_considerations"`
+}

frontend/src/App.tsx

@@ -1,16 +1,179 @@
+import { useState } from "react";
+import { ProgressBar, Label, Tabs } from "@heroui/react";
 import Card from "./components/Card";
-import { Surface } from "@heroui/react";
+import Guodegang from "./components/Guodegang";
+import Quiz from "./components/Quiz";
+import Topic from "./components/Topic";
+import Scenario from "./components/Scenario";
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 function App() {
+  const [topic, setTopic] = useState('');
+  const [cardData, setCardData]: any = useState(null);
+  const [cardLoading, setCardLoading] = useState(false);
+  const [cardError, setCardError] = useState<string | null>(null);
+  const [guodegangData, setGuodegangData]: any = useState(null);
+  const [guodegangLoading, setGuodegangLoading] = useState(false);
+  const [guodegangError, setGuodegangError] = useState<string | null>(null);
+  const [quizData, setQuizData]: any = useState(null);
+  const [quizLoading, setQuizLoading] = useState(false);
+  const [quizError, setQuizError] = useState<string | null>(null);
+  const [scenarioData, setScenarioData]: any = useState(null);
+  const [scenarioLoading, setScenarioLoading] = useState(false);
+  const [scenarioError, setScenarioError] = useState<string | null>(null);
+
+  const fetchData = async (topicToFetch: string) => {
+    setCardLoading(true);
+    setGuodegangLoading(true);
+    setQuizLoading(true);
+    setScenarioLoading(true);
+    setCardError(null);
+    setGuodegangError(null);
+    setQuizError(null);
+    setScenarioError(null);
+
+    const cardUrl = `http://localhost:8080/card/${encodeURIComponent(topicToFetch)}`;
+    const guodegangUrl = `http://localhost:8080/guodegang/${encodeURIComponent(topicToFetch)}`;
+    const quizUrl = `http://localhost:8080/quiz/${encodeURIComponent(topicToFetch)}`;
+    const scenarioUrl = `http://localhost:8080/scenario/${encodeURIComponent(topicToFetch)}`;
+
+    const abortController = new AbortController();
+    const timeoutId = setTimeout(() => abortController.abort(), 300000);
+
+    const fetchCard = async () => {
+      try {
+        const response = await fetch(cardUrl, { signal: abortController.signal });
+        if (!response.ok) throw new Error(`Card API failed: ${response.status}`);
+        const result = await response.json();
+        setCardData(result.message);
+      } catch (error) {
+        console.error("Error fetching card data:", error);
+        setCardError("Failed to load card data");
+      } finally {
+        setCardLoading(false);
+      }
+    };
+
+    const fetchGuodegang = async () => {
+      try {
+        const response = await fetch(guodegangUrl, { signal: abortController.signal });
+        if (!response.ok) throw new Error(`Guodegang API failed: ${response.status}`);
+        const result = await response.json();
+        setGuodegangData(result.message);
+      } catch (error) {
+        console.error("Error fetching guodegang data:", error);
+        setGuodegangError("Failed to load guodegang data");
+      } finally {
+        setGuodegangLoading(false);
+      }
+    };
+
+    const fetchQuiz = async () => {
+      try {
+        const response = await fetch(quizUrl, { signal: abortController.signal });
+        if (!response.ok) throw new Error(`Quiz API failed: ${response.status}`);
+        const result = await response.json();
+        setQuizData(result.message);
+      } catch (error) {
+        console.error("Error fetching quiz data:", error);
+        setQuizError("Failed to load quiz data");
+      } finally {
+        setQuizLoading(false);
+      }
+    };
+
+    const fetchScenario = async () => {
+      try {
+        const response = await fetch(scenarioUrl, { signal: abortController.signal });
+        if (!response.ok) throw new Error(`Scenario API failed: ${response.status}`);
+        const result = await response.json();
+        setScenarioData(result.message);
+      } catch (error) {
+        console.error("Error fetching scenario data:", error);
+        setScenarioError("Failed to load scenario data");
+      } finally {
+        setScenarioLoading(false);
+      }
+    };
+
+    Promise.allSettled([fetchCard(), fetchGuodegang(), fetchQuiz(), fetchScenario()]).finally(() => {
+      clearTimeout(timeoutId);
+    });
+  };
+
+  const handleTopicSubmit = (newTopic: string) => {
+    setTopic(newTopic);
+    if (newTopic) {
+      fetchData(newTopic);
+    }
+  };
+
+  const cardLoaded = !cardLoading && !!cardData;
+  const guodegangLoaded = !guodegangLoading && !!guodegangData;
+  const quizLoaded = !quizLoading && !!quizData;
+  const scenarioLoaded = !scenarioLoading && !!scenarioData;
+
+  const progress = (() => {
+    if (!topic) return 0;
+    const loadedCount = [cardLoaded, guodegangLoaded, quizLoaded, scenarioLoaded].filter(Boolean).length;
+    return Math.round((loadedCount / 4) * 100);
+  })();
+
   return (
-    <>
-      <Surface
-        className="flex min-w-[320px] flex-col gap-3 rounded-3xl p-6"
-        variant="default"
-      >
-        <Card />
-      </Surface>
-    </>
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '20px' }}>
+        <Topic onTopicSubmit={handleTopicSubmit}/>
+        {topic && (
+            <div className="w-64">
+                <ProgressBar value={progress} color="accent">
+                    <Label>Data Loading</Label>
+                    <ProgressBar.Output />
+                    <ProgressBar.Track>
+                        <ProgressBar.Fill />
+                    </ProgressBar.Track>
+                </ProgressBar>
+            </div>
+        )}
+        <div className="w-full max-w-8xl">
+            <Tabs className="w-full">
+                <Tabs.ListContainer>
+                    <Tabs.List aria-label="View options">
+                        <Tabs.Tab id="card">
+                            <Tabs.Separator />
+                            <Tabs.Indicator />
+                            📚 学习卡片
+                        </Tabs.Tab>
+                        <Tabs.Tab id="guodegang">
+                            <Tabs.Separator />
+                            <Tabs.Indicator />
+                            🎭 德云社讲解
+                        </Tabs.Tab>
+                        <Tabs.Tab id="quiz">
+                            <Tabs.Separator />
+                            <Tabs.Indicator />
+                            📝 测验问答
+                        </Tabs.Tab>
+                        <Tabs.Tab id="scenario">
+                            <Tabs.Separator />
+                            <Tabs.Indicator />
+                            💡 工程场景
+                        </Tabs.Tab>
+                    </Tabs.List>
+                </Tabs.ListContainer>
+                <Tabs.Panel id="card">
+                    <Card topic={topic} data={cardData} loading={cardLoading} error={cardError} />
+                </Tabs.Panel>
+                <Tabs.Panel id="guodegang">
+                    <Guodegang topic={topic} data={guodegangData} loading={guodegangLoading} error={guodegangError} />
+                </Tabs.Panel>
+                <Tabs.Panel id="quiz">
+                    <Quiz topic={topic} data={quizData} loading={quizLoading} error={quizError} />
+                </Tabs.Panel>
+                <Tabs.Panel id="scenario">
+                    <Scenario topic={topic} data={scenarioData} loading={scenarioLoading} error={scenarioError} />
+                </Tabs.Panel>
+            </Tabs>
+        </div>
+    </div>
   );
 }
 

frontend/src/components/Card.tsx

@@ -1,49 +1,232 @@
 import { Card } from "@heroui/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;
+  data: CardData | null;
+  loading: boolean;
+  error: string | null;
+}
+
+export default function Default({ topic, data, loading, error }: Props) {
+  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>
+    );
+  }
+
+  if (!topic || !data) {
+    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="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="text-center text-gray-600">
+            <div className="text-3xl mb-4">📚</div>
+            <div className="text-lg font-medium mb-2">学习卡片组件</div>
+            <div className="text-sm text-gray-500">输入主题后，这里将展示相关的核心知识点、常见误解和最佳实践</div>
+          </div>
+        </Card>
+      </div>
+    );
+  }
 
   return (
-    <div className="w-full p-0 sm:max-w-sm">
-      <Card className="w-[500px]">
-        🧐
-        <Card.Title>主题 xxx</Card.Title>
-        <Card.Description>
-          🔑 关键要点： <br />- 要点1（具体说明，20字以内） <br />-
-          要点2（具体说明，20字以内） <br />- 要点3（具体说明，20字以内） <br />
-          - 要点4（具体说明，20字以内）
-          <br />
-          <br />
-          ⚠️ 常见误区： <br />- 误区1：[说明] <br />- 误区2：[说明]
-          <br />
-          <br />✅ 最佳实践： <br />- 实践1：[具体建议] <br />-
-          实践2：[具体建议]
-          <br />
-          <br />
-          🎯 记忆口诀：[朗朗上口的口诀，帮助记忆]
-        </Card.Description>
+    <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">
+              {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>
+
+          <div 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>
+                {data!.key_points.header}
+              </h3>
+              <ul className="space-y-2 ml-7">
+                {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">
+                      <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>
+                {data!.common_misconceptions.header}
+              </h3>
+              <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>
+                    <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>
+                {data!.best_practices.header}
+              </h3>
+              <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>
+                    <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>
+                {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>
+          </div>
+        </div>
       </Card>
     </div>
   );

frontend/src/components/Guodegang.tsx

@@ -0,0 +1,75 @@
+import { Card } from "@heroui/react";
+
+interface GuodegangData {
+  name: string;
+  content: string;
+}
+
+interface Props {
+  topic: string;
+  data: GuodegangData | null;
+  loading: boolean;
+  error: string | null;
+}
+
+export default function Guodegang({ topic, data, loading, error }: Props) {
+  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>
+    );
+  }
+
+  if (!topic || !data) {
+    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="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="text-center text-gray-600">
+            <div className="text-3xl mb-4">🎭</div>
+            <div className="text-lg font-medium mb-2">德云社风格讲解</div>
+            <div className="text-sm text-gray-500">输入主题后，这里将用相声的生动语言为您讲解知识点</div>
+          </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">
+              {data!.name}
+            </Card.Title>
+            <div className="h-1 w-20 bg-gradient-to-r from-yellow-500 to-orange-500 rounded"></div>
+          </div>
+
+          <Card.Description className="px-6 pb-6 text-gray-700 leading-relaxed whitespace-pre-line">
+            {data!.content}
+          </Card.Description>
+        </div>
+      </Card>
+    </div>
+  );
+}

frontend/src/components/Quiz.tsx

@@ -0,0 +1,279 @@
+import { Button } from "@heroui/react";
+import { useState, useMemo } from "react";
+
+interface Questions {
+  question: string;
+  options: string[];
+  answer: string;
+  explanation: string;
+}
+
+interface QuizData {
+  questions: Questions[];
+}
+
+interface Props {
+  topic: string;
+  data: QuizData | null;
+  loading: boolean;
+  error: string | null;
+}
+
+interface UserAnswer {
+  selected: string;
+  correct: boolean;
+}
+
+export default function Quiz({ topic, data, loading, error }: Props) {
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+  const [selectedOption, setSelectedOption] = useState<string | null>(null);
+  const [isAnswerSubmitted, setIsAnswerSubmitted] = useState(false);
+  const [userAnswers, setUserAnswers] = useState<Map<number, UserAnswer>>(new Map());
+  const [quizComplete, setQuizComplete] = useState(false);
+
+  const currentQuestion = data?.questions?.[currentQuestionIndex];
+  const isLastQuestion = data?.questions ? currentQuestionIndex === data.questions.length - 1 : false;
+
+  const correctCount = useMemo(() => {
+    return Array.from(userAnswers.values()).filter(a => a.correct).length;
+  }, [userAnswers]);
+
+  const handleOptionSelect = (option: string) => {
+    if (!isAnswerSubmitted) {
+      setSelectedOption(option);
+    }
+  };
+
+  const handleSubmit = () => {
+    if (selectedOption && currentQuestion) {
+      const isCorrect = selectedOption === currentQuestion.answer;
+      setUserAnswers(new Map(userAnswers).set(currentQuestionIndex, {
+        selected: selectedOption,
+        correct: isCorrect
+      }));
+      setIsAnswerSubmitted(true);
+    }
+  };
+
+  const handleNext = () => {
+    if (isLastQuestion) {
+      setQuizComplete(true);
+    } else {
+      setCurrentQuestionIndex(prev => prev + 1);
+      setSelectedOption(null);
+      setIsAnswerSubmitted(false);
+    }
+  };
+
+  const handleRetry = () => {
+    setCurrentQuestionIndex(0);
+    setSelectedOption(null);
+    setIsAnswerSubmitted(false);
+    setUserAnswers(new Map());
+    setQuizComplete(false);
+  };
+
+  if (loading) {
+    return (
+      <div className="w-full max-w-4xl mx-auto p-6">
+        <div className="text-center text-gray-600 text-lg">Loading quiz...</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="w-full max-w-4xl mx-auto p-6">
+        <div className="text-center text-red-600 text-lg">{error}</div>
+      </div>
+    );
+  }
+
+  if (!data || data.questions.length === 0) {
+    return (
+      <div className="w-full max-w-4xl mx-auto p-6">
+        <div className="text-center text-gray-600">
+          <div className="text-5xl mb-4">📝</div>
+          <div className="text-xl font-medium mb-2">测验问答</div>
+          <div className="text-sm text-gray-500">输入主题后，这里将显示相关的测验题目</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (quizComplete) {
+    const percentage = Math.round((correctCount / data.questions.length) * 100);
+    
+    return (
+      <div className="w-full max-w-4xl mx-auto p-6 space-y-8">
+        <div>
+          <h2 className="text-3xl font-bold text-center text-gray-800 mb-2">{topic} - Quiz Complete!</h2>
+          <div className="h-1 w-32 mx-auto bg-gradient-to-r from-blue-500 to-indigo-500 rounded"></div>
+        </div>
+
+        <div className="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl p-8 border border-blue-200">
+          <div className="text-center">
+            <div className="text-6xl mb-4">{percentage >= 60 ? '🎉' : percentage >= 40 ? '👍' : '💪'}</div>
+            <div className="text-5xl font-bold text-gray-800 mb-4">
+              {correctCount} / {data.questions.length}
+            </div>
+            <div className="text-2xl font-semibold text-gray-600 mb-2">
+              {percentage}%
+            </div>
+            <p className="text-gray-500">
+              {percentage >= 80 ? 'Excellent!' : percentage >= 60 ? 'Good job!' : 'Keep practicing!'}
+            </p>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h3 className="text-xl font-semibold text-gray-800 mb-4">Review Your Answers</h3>
+          {data.questions.map((question, index) => {
+            const userAnswer = userAnswers.get(index);
+            const isCorrect = userAnswer?.correct ?? false;
+            const userSelected = userAnswer?.selected;
+
+            return (
+              <div key={index} className={`p-6 rounded-xl border-2 ${isCorrect ? 'border-green-300 bg-green-50' : 'border-red-300 bg-red-50'}`}>
+                <div className="flex items-start gap-3 mb-4">
+                  <span className={`text-2xl ${isCorrect ? 'text-green-500' : 'text-red-500'}`}>
+                    {isCorrect ? '✓' : '✗'}
+                  </span>
+                  <div className="flex-1">
+                    <p className="font-medium text-gray-800 mb-2">Question {index + 1}: {question.question}</p>
+                    <div className="space-y-2 text-sm">
+                      <div className={isCorrect ? 'text-green-600' : 'text-red-700'}>
+                        Your answer: <span className="font-medium">{userSelected}</span>
+                        {!isCorrect && (
+                          <span className="ml-2 text-green-600 font-medium">(Correct: {question.answer})</span>
+                        )}
+                      </div>
+                    </div>
+                    <div className="mt-3 p-3 bg-white rounded-lg text-sm text-gray-700">
+                      <span className="font-medium">Explanation:</span> {question.explanation}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="flex justify-center">
+          <Button variant="primary" size="lg" onPress={handleRetry}>
+            Try Again 🔄
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!currentQuestion) {
+    return null;
+  }
+
+  const isCorrect = selectedOption === currentQuestion.answer;
+
+  return (
+    <div className="w-full max-w-4xl mx-auto p-6 space-y-8">
+      <div>
+        <div className="flex justify-between items-center mb-2">
+          <h2 className="text-2xl font-bold text-gray-800">{topic}</h2>
+          <span className="text-sm text-gray-500 font-medium">
+            Question {currentQuestionIndex + 1} of {data.questions.length}
+          </span>
+        </div>
+        <div className="h-1 w-full bg-gray-200 rounded-full overflow-hidden">
+          <div 
+            className="h-full bg-gradient-to-r from-blue-500 to-indigo-500 transition-all duration-300"
+            style={{ width: `${((currentQuestionIndex + 1) / data.questions.length) * 100}%` }}
+          />
+        </div>
+      </div>
+
+      <div className="space-y-8">
+        <h2 className="text-2xl font-semibold text-center text-gray-800 leading-relaxed">
+          {currentQuestion.question}
+        </h2>
+
+        <div className="grid grid-cols-4 gap-4">
+          {currentQuestion.options.map((option, index) => {
+            const letter = String.fromCharCode(65 + index);
+            const isSelected = selectedOption === option;
+            const isCorrectOption = isAnswerSubmitted && option === currentQuestion.answer;
+            const isWrongUserAnswer = isAnswerSubmitted && isSelected && option !== currentQuestion.answer;
+
+            return (
+              <button
+                key={index}
+                onClick={() => handleOptionSelect(option)}
+                disabled={isAnswerSubmitted}
+                className={`
+                  p-6 rounded-xl border-2 transition-all duration-200
+                  ${isAnswerSubmitted
+                    ? isCorrectOption
+                      ? 'border-green-500 bg-green-50'
+                      : isWrongUserAnswer
+                        ? 'border-red-500 bg-red-50 opacity-60'
+                        : 'border-gray-200 opacity-60'
+                    : isSelected
+                      ? 'border-blue-500 bg-blue-50 shadow-md'
+                      : 'border-gray-200 hover:border-blue-400 hover:bg-blue-50'
+                  }
+                `}
+              >
+                <div className="text-center space-y-2">
+                  <div className={`font-bold text-lg ${isCorrectOption ? 'text-green-600' : isWrongUserAnswer ? 'text-red-600' : 'text-gray-800'}`}>
+                    {letter}.
+                  </div>
+                  <div className={`text-sm font-medium ${isCorrectOption ? 'text-green-700' : isWrongUserAnswer ? 'text-gray-600' : 'text-gray-700'}`}>
+                    {option}
+                  </div>
+                  {isCorrectOption && !isWrongUserAnswer && (
+                    <div className="text-green-600 font-bold">✓</div>
+                  )}
+                </div>
+              </button>
+            );
+          })}
+        </div>
+
+        {!isAnswerSubmitted ? (
+          <div className="flex justify-center">
+            <Button
+              variant="primary"
+              size="lg"
+              isDisabled={!selectedOption}
+              onPress={handleSubmit}
+              className="min-w-[150px]"
+            >
+              Submit
+            </Button>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center space-y-4">
+            <div className={`${isCorrect ? 'text-green-600' : 'text-red-600'} text-xl font-semibold`}>
+              {isCorrect ? '✓ Correct!' : '✗ Incorrect. Correct answer is ' + currentQuestion.answer}
+            </div>
+
+            <div className="w-full mt-6 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-200 p-6">
+              <h3 className="font-bold text-gray-800 mb-2 text-lg">Explanation:</h3>
+              <p className="text-gray-700 leading-relaxed">{currentQuestion.explanation}</p>
+            </div>
+
+            <div className="flex justify-center mt-4">
+              <Button
+                variant="primary"
+                size="lg"
+                onPress={handleNext}
+                className="min-w-[180px]"
+              >
+                {isLastQuestion ? 'Finish Quiz' : 'Next Question →'}
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/Scenario.tsx

@@ -0,0 +1,198 @@
+import { useState } from "react";
+import { Card, Chip } from "@heroui/react";
+
+interface Scenario {
+  name: string;
+  background: string;
+  solution: string;
+  code_example: string;
+  core_problem_solved: string;
+  key_considerations: string[];
+}
+
+interface ScenarioData {
+  scenarios: Scenario[];
+}
+
+interface Props {
+  topic: string;
+  data: ScenarioData | null;
+  loading: boolean;
+  error: string | null;
+}
+
+export default function Scenario({ topic, data, loading, error }: Props) {
+  const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
+
+  const toggleScenario = (index: number) => {
+    setExpandedIndex(expandedIndex === index ? null : index);
+  };
+
+  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>
+    );
+  }
+
+  if (!topic || !data || data.scenarios.length === 0) {
+    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="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="text-center text-gray-600">
+            <div className="text-3xl mb-4">🌟</div>
+            <div className="text-lg font-medium mb-2">工程应用场景</div>
+            <div className="text-sm text-gray-500">输入主题后，这里将展示相关的工程应用场景和最佳实践</div>
+          </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">
+              {topic} - 工程场景
+            </Card.Title>
+            <div className="h-1 w-20 bg-gradient-to-r from-purple-500 to-pink-500 rounded"></div>
+            <p className="mt-3 text-gray-600">
+              以下是该知识点的实际工程应用场景，帮助你理解如何在真实项目中使用
+            </p>
+          </div>
+
+          <div className="px-6 pb-6 space-y-3">
+            {data.scenarios.map((scenario, index) => {
+              const isExpanded = expandedIndex === index;
+              return (
+                <div
+                  key={index}
+                  className="border border-gray-200 rounded-xl overflow-hidden transition-all duration-200 hover:border-purple-300 hover:shadow-md"
+                >
+                  <button
+                    onClick={() => toggleScenario(index)}
+                    className="w-full flex items-center gap-3 p-4 bg-white hover:bg-gray-50 transition-colors duration-200 cursor-pointer text-left"
+                  >
+                    <span className="text-2xl">🎯</span>
+                    <span className="font-semibold text-gray-800 text-lg flex-1">
+                      {scenario.name}
+                    </span>
+                    <Chip size="sm" variant="tertiary" color="accent">
+                      场景 {index + 1}
+                    </Chip>
+                    <svg
+                      className={`w-5 h-5 text-gray-500 transition-transform duration-200 flex-shrink-0 ${
+                        isExpanded ? "rotate-180" : "rotate-0"
+                      }`}
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M19 9l-7 7-7-7"
+                      />
+                    </svg>
+                  </button>
+
+                  <div
+                    className={`overflow-hidden transition-all duration-300 ease-in-out ${
+                      isExpanded ? "max-h-[5000px] opacity-100" : "max-h-0 opacity-0"
+                    }`}
+                  >
+                    <div className="p-4 pt-0 space-y-6">
+                      <div>
+                        <h4 className="flex items-center text-md font-semibold text-purple-700 mb-2">
+                          <span className="mr-2">📋</span>
+                          问题背景
+                        </h4>
+                        <p className="text-gray-700 pl-7 leading-relaxed">
+                          {scenario.background}
+                        </p>
+                      </div>
+
+                      <div>
+                        <h4 className="flex items-center text-md font-semibold text-blue-700 mb-2">
+                          <span className="mr-2">💡</span>
+                          解决方案
+                        </h4>
+                        <p className="text-gray-700 pl-7 leading-relaxed">
+                          {scenario.solution}
+                        </p>
+                      </div>
+
+                      <div>
+                        <h4 className="flex items-center text-md font-semibold text-green-700 mb-2">
+                          <span className="mr-2">💻</span>
+                          代码示例
+                        </h4>
+                        <div className="pl-7">
+                          <pre className="bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto text-sm font-mono leading-relaxed">
+                            {scenario.code_example}
+                          </pre>
+                        </div>
+                      </div>
+
+                      <div>
+                        <h4 className="flex items-center text-md font-semibold text-orange-700 mb-2">
+                          <span className="mr-2">🎯</span>
+                          核心问题解决
+                        </h4>
+                        <p className="text-gray-700 pl-7 leading-relaxed font-medium">
+                          {scenario.core_problem_solved}
+                        </p>
+                      </div>
+
+                      <div>
+                        <h4 className="flex items-center text-md font-semibold text-red-700 mb-2">
+                          <span className="mr-2">⚠️</span>
+                          注意事项与最佳实践
+                        </h4>
+                        <ul className="space-y-2 pl-7">
+                          {scenario.key_considerations.map((consideration, considerationIndex) => (
+                            <li key={considerationIndex} className="flex items-start">
+                              <span className="text-red-500 mr-2 mt-0.5 flex-shrink-0">
+                                •
+                              </span>
+                              <span className="text-gray-700 leading-relaxed">
+                                {consideration}
+                              </span>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}

frontend/src/components/Topic.tsx

@@ -0,0 +1,42 @@
+import { Input, Button } from '@heroui/react';
+import { useState } from 'react';
+
+interface Props {
+    onTopicSubmit: (topic: string) => void;
+}
+
+export default function Default({ onTopicSubmit }: Props) {
+    const [value, setValue] = useState('');
+
+    const handleSubmit = () => {
+        if (value.trim()) {
+            onTopicSubmit(value);
+        }
+    };
+
+    const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter') {
+            handleSubmit();
+        }
+    };
+
+    return (
+        <div className="flex gap-2 items-center">
+            <Input 
+                aria-label="Name" 
+                className="w-64" 
+                placeholder="Please enter topic 🎉" 
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+                onKeyPress={handleKeyPress}
+            />
+            <Button 
+                variant="primary"
+                onPress={handleSubmit}
+                isDisabled={!value.trim()}
+            >
+                提交
+            </Button>
+        </div>
+    );
+}