.badge-item{position:relative;display:inline-flex;align-items:center;border-radius:4px;transition:all .15s} .badge-item:hover{box-shadow:0 0 0 2px var(--accent)} .badge-item img{display:block;height:20px} .badge-item .badge-remove{position:absolute;top:-8px;right:-8px;width:18px;height:18px;background:var(--danger);color:#fff;border:none;border-radius:50%;font-size:11px;display:none;align-items:center;justify-content:center;line-height:1} .badge-item:hover .badge-remove{display:flex} .empty-state{text-align:center;padding:40px 20px;color:var(--text2)} .empty-state .icon{font-size:48px;margin-bottom:12px} .empty-state p{font-size:14px} /* Output */ .output-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden} .output-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surface2)} .output-header h3{font-size:13px;color:var(--text2)} .output-body{padding:0} .output-body pre{padding:16px;font-size:13px;line-height:1.5;overflow-x:auto;color:var(--text);white-space:pre-wrap;word-break:break-all;max-height:300px;overflow-y:auto;margin:0} .output-body pre::-webkit-scrollbar{height:6px;width:6px} .output-body pre::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px} .output-tabs{display:flex;gap:0} .output-tab{padding:6px 14px;font-size:12px;background:none;border:none;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent} .output-tab.active{color:var(--accent);border-bottom-color:var(--accent)} /* Toast */ .toast{position:fixed;bottom:24px;right:24px;background:var(--accent2);color:#fff;padding:10px 20px;border-radius:var(--radius);font-size:14px;transform:translateY(100px);opacity:0;transition:all .3s;z-index:1000} .toast.show{transform:translateY(0);opacity:1} /* Modal */ .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;display:none;align-items:center;justify-content:center} .modal-overlay.show{display:flex} .modal{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto} .modal h2{font-size:18px;margin-bottom:16px} .modal .form-group{margin-bottom:12px} /* Responsive */ @media(max-width:900px){ .sidebar{border-right:none;border-bottom:1px solid var(--border);max-height:50vh;overflow-y:auto} .main{padding:16px} }

🛡️ AI Badge Generator

preview
排列方式：
0 个徽章
🛡️

从左侧编辑器添加徽章，或选择预设

生成代码

预览 0 个徽章
🛡️

从左侧编辑器添加徽章，或选择预设

支持拖拽排序

输出代码