🎨 UI 组件代码生成器

可视化构建 / 多框架支持 / 一键复制

选择组件

框架选择

👁️ 预览

💻 代码

🌟 AI 副业星球
`; } else if (framework === 'tailwind') { code = getTailwindCode(currentComponent); } document.getElementById('codeOutput').textContent = code; } function getTailwindCode(component) { const tailwind = { button: '', card: '
\n

卡片标题

\n

这是卡片内容，可以放置任何信息。

\n \n
', input: '
\n \n \n
', alert: '
\n 成功！ 操作已完成。\n
', badge: '新', avatar: '
\n Avatar\n 用户名\n
' }; return tailwind[component] || ''; } function copyCode() { const code = document.getElementById('codeOutput').textContent; navigator.clipboard.writeText(code).then(() => { alert('✅ 代码已复制到剪贴板'); }); } updatePreview(); generateCode();