✨Feat: 完成前端工程场景

2026-03-29 10:10:32 +08:00
parent 51e71da224
commit 8e4b0e4060
5 changed files with 236 additions and 6 deletions
@@ -100,6 +100,8 @@ func CallWithAgentDefined[T any](llm llms.Model, ctx context.Context, topic stri
 		"用户正在学习Go语言和React框架，你是用户的助手。\n"+prompt,
 	)

+	fmt.Printf("Raw output: %v\n\n", responseString)
+
 	if err != nil {
 		log.Fatal(err)
 	}
@@ -33,8 +33,8 @@ func GetQuiz(llm llms.Model, ctx context.Context, topic string) (response respon
 	return
 }

-func GetScenario(llm llms.Model, ctx context.Context, topic string) (response response_struct.Scenario) {
+func GetScenario(llm llms.Model, ctx context.Context, topic string) (response response_struct.ScenarioResponse) {
 	file := files[3]
-	response = agent.CallWithAgentDefined(llm, ctx, topic, file, response_struct.Scenario{})
+	response = agent.CallWithAgentDefined(llm, ctx, topic, file, response_struct.ScenarioResponse{})
 	return
 }
@@ -40,7 +40,7 @@ func TestQuiz(t *testing.T) {
 }

 func TestScenario(t *testing.T) {
-	definedScenario, err := outputparser.NewDefined(Scenario{})
+	definedScenario, err := outputparser.NewDefined(ScenarioResponse{})

 	if err != nil {
 		t.Fatalf("%v", err)
@@ -4,6 +4,7 @@ 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() {
@@ -17,18 +18,24 @@ function App() {
  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);
@@ -75,7 +82,21 @@ function App() {
      }
    };

-    Promise.allSettled([fetchCard(), fetchGuodegang(), fetchQuiz()]).finally(() => {
+    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);
    });
  };
@@ -90,11 +111,12 @@ function App() {
  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].filter(Boolean).length;
-    return Math.round((loadedCount / 3) * 100);
+    const loadedCount = [cardLoaded, guodegangLoaded, quizLoaded, scenarioLoaded].filter(Boolean).length;
+    return Math.round((loadedCount / 4) * 100);
  })();

  return (
@@ -130,6 +152,11 @@ function App() {
                            <Tabs.Indicator />
                            📝 测验问答
                        </Tabs.Tab>
+                        <Tabs.Tab id="scenario">
+                            <Tabs.Separator />
+                            <Tabs.Indicator />
+                            💡 工程场景
+                        </Tabs.Tab>
                    </Tabs.List>
                </Tabs.ListContainer>
                <Tabs.Panel id="card">
@@ -141,6 +168,9 @@ function App() {
                <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>
@@ -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>
+  );
+}