wonder/langchain-go
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️Refactor: Card前端组件优化

Browse Source
This commit is contained in:
wonder
2026-03-26 09:11:11 +08:00
parent c60140f1da
commit 4b9670967f
1 changed files with 114 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Card.tsx
+113 -17
View File
@@ -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 />
🎯 记忆口诀：[朗朗上口的口诀，帮助记忆]
<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>
);