From 4b9670967fe795d9005e67b49f59ca6b63144880 Mon Sep 17 00:00:00 2001
From: wonder <hezhaohui0807@163.com>
Date: Thu, 26 Mar 2026 09:11:11 +0800
Subject: [PATCH] =?UTF-8?q?=20=E2=99=BB=EF=B8=8FRefactor:=20Card=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AF=E7=BB=84=E4=BB=B6=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Card.tsx | 132 ++++++++++++++++++++++++++-----
 1 file changed, 114 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/Card.tsx b/frontend/src/components/Card.tsx
index bc07ee5..cd0c534 100644
--- a/frontend/src/components/Card.tsx
+++ b/frontend/src/components/Card.tsx
@@ -26,24 +26,120 @@ export default function Default() {
   // }, []);
 
   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">
+              主题 xxx
+            </Card.Title>
+            <div className="h-1 w-20 bg-gradient-to-r from-blue-500 to-indigo-500 rounded"></div>
+          </div>
+
+          {/* 内容区域 */}
+          <Card.Description 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>
+                关键要点
+              </h3>
+              <ul className="space-y-2 ml-7">
+                {[
+                  "要点1（具体说明，20字以内）",
+                  "要点2（具体说明，20字以内）",
+                  "要点3（具体说明，20字以内）",
+                  "要点4（具体说明，20字以内）",
+                ].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">{item}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* 常见误区 */}
+            <div>
+              <h3 className="flex items-center text-lg font-semibold text-gray-700 mb-3">
+                <span className="mr-2">⚠️</span>
+                常见误区
+              </h3>
+              <ul className="space-y-2 ml-7">
+                <li className="flex items-start">
+                  <span className="text-red-500 mr-2.5 mt-0.5 flex-shrink-0">
+                    ✗
+                  </span>
+                  <span className="text-gray-600 pt-0.5">
+                    误区1：
+                    <span className="text-red-600 font-medium">[说明]</span>
+                  </span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-red-500 mr-2.5 mt-0.5 flex-shrink-0">
+                    ✗
+                  </span>
+                  <span className="text-gray-600 pt-0.5">
+                    误区2：
+                    <span className="text-red-600 font-medium">[说明]</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>
+                最佳实践
+              </h3>
+              <ul className="space-y-2 ml-7">
+                <li className="flex items-start">
+                  <span className="text-green-500 mr-2.5 mt-0.5 flex-shrink-0">
+                    ✓
+                  </span>
+                  <span className="text-gray-600 pt-0.5">
+                    实践1：
+                    <span className="text-green-600 font-medium">
+                      [具体建议]
+                    </span>
+                  </span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-green-500 mr-2.5 mt-0.5 flex-shrink-0">
+                    ✓
+                  </span>
+                  <span className="text-gray-600 pt-0.5">
+                    实践2：
+                    <span className="text-green-600 font-medium">
+                      [具体建议]
+                    </span>
+                  </span>
+                </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>
+                记忆口诀
+              </h3>
+              <p className="text-gray-700 italic bg-white px-4 py-3 rounded-lg shadow-sm">
+                [朗朗上口的口诀，帮助记忆]
+              </p>
+            </div>
+          </Card.Description>
+        </div>
       </Card>
     </div>
   );