✨Feat: 完成前端工程场景

.gitignore

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

agent/basicAgent.go

@@ -1,65 +0,0 @@
-package agent
-
-import (
-	"context"
-	"fmt"
-	"log"
-	"os"
-
-	"github.com/tmc/langchaingo/llms"
-	"github.com/tmc/langchaingo/prompts"
-)
-
-func Call(llm llms.Model, ctx context.Context) (response string) {
-
-	response, err := llms.GenerateFromSinglePrompt(
-		ctx,
-		llm,
-		"Hello! My name is wonder!",
-	)
-	if err != nil {
-		log.Fatal(err)
-	}
-
-	fmt.Println("AI:", response)
-
-	return response
-
-}
-func CallWithMessage(llm llms.Model, ctx context.Context, prompt string) (response string) {
-
-	response, err := llms.GenerateFromSinglePrompt(
-		ctx,
-		llm,
-		"用户正在学习Go语言，你是用户的助手。\n"+prompt,
-	)
-	if err != nil {
-		log.Fatal(err)
-	}
-
-	fmt.Println("AI:", response)
-
-	return response
-
-}
-func CallWithAgent(llm llms.Model, ctx context.Context, topic string, promptPath string) (response string) {
-	content, err := os.ReadFile(promptPath)
-	if err != nil {
-		fmt.Printf("File err: %v", err)
-		return
-	}
-
-	text := string(content)
-
-	template := prompts.NewPromptTemplate(text, []string{".Knowledge"})
-	prompt, err := template.Format(map[string]any{
-		"Knowledge": topic,
-	})
-
-	fmt.Println("Me: ", prompt)
-	if err != nil {
-		fmt.Printf("Prompt err: %v", err)
-	}
-	response = CallWithMessage(llm, ctx, prompt)
-	return response
-}

backend/agent/basicAgent.go

@@ -0,0 +1,127 @@
+package agent
+
+import (
+	"context"
+	"fmt"
+	"log"
+	"os"
+	"strings"
+
+	"github.com/tmc/langchaingo/llms"
+	"github.com/tmc/langchaingo/outputparser"
+	"github.com/tmc/langchaingo/prompts"
+)
+
+func Call(llm llms.Model, ctx context.Context) (response string) {
+
+	response, err := llms.GenerateFromSinglePrompt(
+		ctx,
+		llm,
+		"Hello! My name is wonder!",
+	)
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	fmt.Println("AI:", response)
+
+	return response
+
+}
+func CallWithMessage(llm llms.Model, ctx context.Context, prompt string) (response string) {
+
+	response, err := llms.GenerateFromSinglePrompt(
+		ctx,
+		llm,
+		"用户正在学习Go语言，你是用户的助手。\n"+prompt,
+	)
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	fmt.Println("AI:", response)
+
+	return response
+
+}
+func CallWithAgent(llm llms.Model, ctx context.Context, topic string, promptPath string) (response string) {
+	content, err := os.ReadFile(promptPath)
+	if err != nil {
+		fmt.Printf("File err: %v", err)
+		return
+	}
+
+	text := string(content)
+
+	template := prompts.NewPromptTemplate(text, []string{".Knowledge"})
+	prompt, err := template.Format(map[string]any{
+		"Knowledge": topic,
+	})
+
+	fmt.Println("Me: ", prompt)
+	if err != nil {
+		fmt.Printf("Prompt err: %v", err)
+	}
+	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/handlers/agent.go

@@ -2,6 +2,7 @@ package handle
 
 import (
 	"agent/agent"
+	"agent/response_struct"
 	"context"
 
 	"github.com/tmc/langchaingo/llms"
@@ -10,37 +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)
-	return
-}
-
-func GetScenario(llm llms.Model, ctx context.Context, topic string) (response string) {
-	file := files[4]
-	response = agent.CallWithAgent(llm, ctx, topic, file)
+	response = agent.CallWithAgentDefined(llm, ctx, topic, file, response_struct.ScenarioResponse{})
 	return
 }

backend/main.go

@@ -1,7 +1,10 @@
 package main
 
+// this is 注释
+
 import (
 	handle "agent/handlers"
+	"agent/middlewares"
 	"context"
 	"fmt"
 	"log"
@@ -46,40 +49,34 @@ func init() {
 
 func main() {
 	route := gin.Default()
+	route.Use(middlewares.Cors())
 	route.GET("/ping", func(c *gin.Context) {
 		c.JSON(200, gin.H{
 			"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{
@@ -88,4 +85,5 @@ func main() {
 	})
 
 	route.Run()
+
 }

backend/middlewares/cors.go

@@ -0,0 +1,21 @@
+package middlewares
+
+import (
+	"net/http"
+
+	"github.com/gin-gonic/gin"
+)
+
+func Cors() gin.HandlerFunc {
+	return func(c *gin.Context) {
+		c.Header("Access-Control-Allow-Origin", "*") // 可替换为具体域名
+		c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE")
+		c.Header("Access-Control-Allow-Headers", "Origin, Content-Type, Authorization")
+		c.Header("Access-Control-Allow-Credentials", "true")
+		if c.Request.Method == "OPTIONS" {
+			c.AbortWithStatus(http.StatusNoContent)
+			return
+		}
+		c.Next()
+	}
+}

backend/prompt/card.txt

@@ -0,0 +1,4 @@
+为"{{.Knowledge}}"制作知识记忆卡片，帮助用户快速掌握关键知识点，要求：
+1. 结构清晰，重点突出
+2. 使用emoji图标增强可读性
+3. 每个部分简洁明了，方便记忆

backend/prompt/guodegang.txt

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

backend/prompt/quiz.txt

@@ -0,0 +1,6 @@
+关于"{{.Knowledge}}"，生成15道单选题，要求：
+1. 题目类型包括：概念理解、原理分析、应用场景、最佳实践等
+2. 难度分布：5道基础题、5道中级题、5道进阶题
+3. 每道题都要提供详细的解析说明
+4. 选项之间要有明显的区别，避免模棱两可
+5. 输出选项不需要提供 ABCD 字母

backend/prompt/scenario.txt

@@ -0,0 +1,6 @@
+为"{{.Knowledge}}"提供3个实际的工程应用场景，要求：
+1. 每个场景都要具体、真实、有代表性
+2. 包含完整的问题背景、解决方案、代码示例
+3. 代码使用伪代码或简化的实现，注重逻辑清晰
+4. 说明使用该知识点解决了什么核心问题
+5. 强调注意事项和最佳实践

backend/response_struct/card.go

@@ -0,0 +1,66 @@
+package response_struct
+
+// Card 是顶层结构体，包含所有关于 Go map 的笔记内容
+type Card struct {
+    Summary             string          `json:"summary"`
+    KeyPoints           KeyPoints       `json:"key_points"`
+    CommonMisconceptions CommonMisconceptions `json:"common_misconceptions"`
+    BestPractices       BestPractices   `json:"best_practices"`
+    Mnemonic            Mnemonic        `json:"mnemonic"`
+}
+
+// KeyPoints 包含关键要点部分
+type KeyPoints struct {
+    Header string       `json:"header"`
+    Items  []KeyPointItem `json:"items"`
+}
+
+// KeyPointItem 是关键要点的单个条目
+type KeyPointItem struct {
+    Point       string `json:"point"`
+    Description string `json:"description"`
+}
+
+// CommonMisconceptions 包含常见误区部分
+type CommonMisconceptions struct {
+    Header string                 `json:"header"`
+    Items  []MisconceptionItem    `json:"items"`
+}
+
+// MisconceptionItem 是常见误区的单个条目
+type MisconceptionItem struct {
+    ID     string `json:"id"`
+    Title  string `json:"title"`
+    Detail string `json:"detail"`
+    Fix    string `json:"fix"`
+}
+
+// BestPractices 包含最佳实践部分
+type BestPractices struct {
+    Header string            `json:"header"`
+    Items  []PracticeItem    `json:"items"`
+}
+
+// PracticeItem 是最佳实践的单个条目
+type PracticeItem struct {
+    ID              string `json:"id"`
+    Title           string `json:"title"`
+    Detail          string `json:"detail"`
+    CorrectExample  string `json:"correct_example,omitempty"`  // 可能不存在于某些条目
+    IncorrectExample string `json:"incorrect_example,omitempty"` // 可能不存在于某些条目
+}
+
+// Mnemonic 包含记忆口诀部分
+type Mnemonic struct {
+    Header  string `json:"header"`
+    Content string `json:"content"`
+}
+
+// 使用示例：
+// var card Card
+// err := json.Unmarshal(data, &card)
+// 或
+// wrapper := struct {
+//     Card Card `json:"card"`
+// }{}
+// err := json.Unmarshal(data, &wrapper)

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/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="img/png" href="./icon-128x128.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Here we GO !!! 🎉</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@heroui/react": "^3.0.1",
+    "@heroui/styles": "^3.0.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@tailwindcss/postcss": "^4.2.2",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "autoprefixer": "^10.4.27",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "postcss": "^8.5.8",
+    "tailwindcss": "^4.2.2",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.57.0",
+    "vite": "^8.0.1"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}

frontend/src/App.tsx

@@ -0,0 +1,180 @@
+import { useState } from "react";
+import { ProgressBar, Label, Tabs } from "@heroui/react";
+import Card from "./components/Card";
+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 (
+    <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>
+  );
+}
+
+export default App;

frontend/src/components/Card.tsx

@@ -0,0 +1,233 @@
+import { Card } from "@heroui/react";
+
+interface KeyPointItem {
+  point: string;
+  description: string;
+}
+
+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-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>
+    );
+}

frontend/src/global.css

@@ -0,0 +1,2 @@
+@import "tailwindcss/theme";
+@import "@heroui/styles"; 

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import './global.css'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

frontend/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

frontend/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

frontend/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

prompt/card.txt

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

prompt/mermaid.txt

@@ -1,19 +0,0 @@
-请为"{{.Knowledge}}"生成一个Mermaid思维导图或流程图，要求：
-1. 使用graph TD或flowchart TD格式
-2. 清晰展示知识点的结构层次和关系
-3. 关键节点使用中文标签
-4. 适当使用不同的节点样式区分概念类型
-5. 保持代码简洁，便于复制使用
-
-输出格式（只输出代码，不要其他说明文字）：
-```mermaid
-graph TD
-    A[{{.Knowledge}}] --> B(核心概念1)
-    A --> C(核心概念2)
-    B --> B1(子概念1.1)
-    B --> B2(子概念1.2)
-    C --> C1(子概念2.1)
-    style A fill:#f9f,stroke:#333,stroke-width:4px
-    style B fill:#bbf,stroke:#333,stroke-width:2px
-    style C fill:#bbf,stroke:#333,stroke-width:2px
-```

prompt/quiz.txt

@@ -1,22 +0,0 @@
-关于"{{.Knowledge}}"，生成10道单选题，要求：
-1. 题目类型包括：概念理解、原理分析、应用场景、最佳实践等
-2. 难度分布：3道基础题、4道中级题、3道进阶题
-3. 每道题都要提供详细的解析说明
-4. 选项之间要有明显的区别，避免模棱两可
-
-必须严格按照以下JSON格式输出（只输出JSON，不要其他说明文字）：
-{
-  "questions": [
-    {
-      "question": "题目文字，准确描述问题",
-      "options": [
-        "A. 选项内容",
-        "B. 选项内容",
-        "C. 选项内容",
-        "D. 选项内容"
-      ],
-      "answer": "A",
-      "explanation": "详细解析为什么选这个答案，以及为什么其他选项不对"
-    }
-  ]
-}

prompt/scenario.txt

@@ -1,48 +0,0 @@
-为"{{.Knowledge}}"提供3个实际的工程应用场景，要求：
-1. 每个场景都要具体、真实、有代表性
-2. 包含完整的问题背景、解决方案、代码示例
-3. 代码使用伪代码或简化的实现，注重逻辑清晰
-4. 说明使用该知识点解决了什么核心问题
-5. 强调注意事项和最佳实践
-
-输出格式：
-
-场景1：[场景名称，如"高并发缓存更新"]
-背景：
-  [描述实际业务场景和遇到的问题]
-
-方案：
-  [说明如何使用{{.Knowledge}}解决问题，分步骤说明]
-
-代码示例：
-  [使用伪代码或简化代码展示实现方式]
-
-注意事项：
-  - 关键点1
-  - 关键点2
-
-场景2：[场景名称]
-背景：
-  ...
-
-方案：
-  ...
-
-代码示例：
-  ...
-
-注意事项：
-  - ...
-
-场景3：[场景名称]
-背景：
-  ...
-
-方案：
-  ...
-
-代码示例：
-  ...
-
-注意事项：
-  - ...