个人社交名片生成器

/** @jsxImportSource https://esm.sh/react */ import { Award, Book, Briefcase, Heart, LucideIcon, MapPin, Target, UserCircle } from "https://esm.sh/lucide-react"; import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [cardData, setCardData] = useState(null); const handleSubmit = async (event) => { event.preventDefault(); const formData = new FormData(event.target); const response = await fetch("/generate", { method: "POST", body: formData, }); const data = await response.json(); setCardData(data); }; return (

{!cardData ? ( ) : }

); } function PersonalCard({ data }) { return (

{data.name}

{data.location}

{data.tags.map((tag, index) => ( {tag} ))}

近期关键投入

{data.recentFocus}

履历亮点

{highlight}

擅长领域

{data.skills.map((skill, index) => (

{skill.name}

{skill.description}

))}

兴趣爱好

{data.hobbies}

{data.attitude}

); } function getBackgroundColor(index) { const colors = ["bg-blue-100", "bg-green-100", "bg-purple-100", "bg-orange-100"]; return colors[index % colors.length]; } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { if (request.method === "POST" && new URL(request.url).pathname === "/generate") { const formData = await request.formData(); const resume = formData.get("resume"); // Here we would normally process the resume and generate the card data // For this example, we'll use mock data const cardData = { name: "张三", location: "北京", tags: ["软件工程师", "人工智能爱好者", "开源贡献者"], recentFocus: "正在深入研究大规模语言模型在企业应用中的实践", highlights: [ "领导开发了公司核心产品，用户增长300%", "在国际会议上发表了3篇论文", "获得了2项发明专利", ], skills: [ { name: "机器学习", description: "擅长使用PyTorch和TensorFlow构建复杂模型" }, { name: "后端开发", description: "精通Node.js和Python，有丰富的API设计经验" }, { name: "数据分析", description: "熟练使用Pandas和SQL进行大规模数据处理" }, { name: "DevOps", description: "在AWS和Docker环境下有丰富的部署经验" }, ], hobbies: "🏃‍♂️ 跑步 | 📚 阅读 | 🎸 吉他 | 🏞️ 摄影", attitude: "持续学习，勇于创新，追求卓越", }; return new Response(JSON.stringify(cardData), { headers: { "Content-Type": "application/json" }, }); } return new Response( ` 个人社交名片生成器

`, { headers: { "Content-Type": "text/html" }, }, ); } export default server;

personalSocialCardGenerator