✨Feat: 优化布局 加入文本框和按钮

frontend/src/App.tsx

@@ -1,18 +1,45 @@
+import { useState, useEffect } from "react";
+import { ProgressBar, Label } from "@heroui/react";
 import Card from "./components/Card";
 import Guodegang from "./components/Guodegang";
-import { Surface } from "@heroui/react";
+import Topic from "./components/Topic";
 
 function App() {
+  const [topic, setTopic] = useState('');
+  const [cardLoaded, setCardLoaded] = useState(false);
+  const [guodegangLoaded, setGuodegangLoaded] = useState(false);
+
+  useEffect(() => {
+    setCardLoaded(false);
+    setGuodegangLoaded(false);
+  }, [topic]);
+
+  const progress = (() => {
+    if (!topic) return 0;
+    if (cardLoaded && guodegangLoaded) return 100;
+    if (cardLoaded || guodegangLoaded) return 50;
+    return 10;
+  })();
+
   return (
-    <>
-      <Surface
-        className="flex min-w-[320px] flex-row gap-4 rounded-3xl p-6 flex-wrap justify-center"
-        variant="default"
-      >
-        <Card topic="React Hooks" />
-        <Guodegang topic="React Hooks" />
-      </Surface>
-    </>
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '20px' }}>
+        <Topic onTopicSubmit={setTopic}/>
+        {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 style={{ display: 'flex', gap: '20px' }}>
+            <Card topic={topic} onLoaded={setCardLoaded} />
+            <Guodegang topic={topic} onLoaded={setGuodegangLoaded} />
+        </div>
+    </div>
   );
 }
 

frontend/src/components/Card.tsx

@@ -51,14 +51,20 @@ interface CardData {
 
 interface Props {
   topic: string;
+  onLoaded?: (loaded: boolean) => void;
 }
 
-export default function Default({ topic }: Props) {
+export default function Default({ topic, onLoaded }: Props) {
   const [data, setData] = useState<CardData | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
+    if (!topic) {
+      onLoaded?.(false);
+      setLoading(false);
+      return;
+    }
     const fetchData = async () => {
       try {
         const response = await fetch(
@@ -75,10 +81,12 @@ export default function Default({ topic }: Props) {
         setError("Failed to load data. Please try again.");
       } finally {
         setLoading(false);
+        onLoaded?.(true);
       }
     };
+    setLoading(true);
     fetchData();
-  }, [topic]);
+  }, [topic, onLoaded]);
 
   if (loading) {
     return (
@@ -100,6 +108,23 @@ export default function Default({ topic }: Props) {
     );
   }
 
+  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">

frontend/src/components/Guodegang.tsx

@@ -8,14 +8,20 @@ interface GuodegangData {
 
 interface Props {
   topic: string;
+  onLoaded?: (loaded: boolean) => void;
 }
 
-export default function Guodegang({ topic }: Props) {
+export default function Guodegang({ topic, onLoaded }: Props) {
   const [data, setData] = useState<GuodegangData | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
+    if (!topic) {
+      onLoaded?.(false);
+      setLoading(false);
+      return;
+    }
     const fetchData = async () => {
       try {
         const response = await fetch(
@@ -32,10 +38,12 @@ export default function Guodegang({ topic }: Props) {
         setError("Failed to load data. Please try again.");
       } finally {
         setLoading(false);
+        onLoaded?.(true);
       }
     };
+    setLoading(true);
     fetchData();
-  }, [topic]);
+  }, [topic, onLoaded]);
 
   if (loading) {
     return (
@@ -57,6 +65,23 @@ export default function Guodegang({ topic }: Props) {
     );
   }
 
+  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">

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>
+    );
+}