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

2026-03-28 15:08:05 +08:00
parent c0414e7548
commit 9cd8345004
5 changed files with 133 additions and 23 deletions
@@ -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>
  );
 }