上传
上传区域使用虚线描边，hover 时切换为 cdx-50 背景。文件列表展示文件名、大小、进度与删除操作，失败项以状态红标记。
24 · UPLOAD · 上传
按钮上传 + 文件列表
点击上传
报告_2026Q1.pdf
2.4 MB
数据导入模板.xlsx
856 KB
拖拽上传
将文件拖到此处，或 点击上传
支持 .pdf .xlsx .csv 格式，单个文件不超过 10MB
<section id="upload" class="section">
<div class="section-title">24 · UPLOAD · 上传</div>
<div class="demo-sub">按钮上传 + 文件列表</div>
<div class="demo-box">
<div>
<div class="demo-dropzone" style="display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px dashed #D4D4D8;border-radius:6px;background:#fff;cursor:pointer;font-size:13px;color:#52525B">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
点击上传
</div>
<div style="margin-top:12px">
<div class="demo-file" style="display:flex;align-items:center;padding:8px 12px;border:1px solid #E4E4E7;border-radius:4px;margin-bottom:8px">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#71717A" stroke-width="2" stroke-linecap="round" style="margin-right:8px;flex-shrink:0"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg>
<span style="flex:1;font-size:13px;color:#18181B">报告_2026Q1.pdf</span>
<span style="font-size:12px;color:#71717A;margin-right:12px">2.4 MB</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#3F8F5C" stroke-width="2" stroke-linecap="round"><path d="M20 6L9 17l-5-5"/></svg>
</div>
<div class="demo-file" style="display:flex;align-items:center;padding:8px 12px;border:1px solid #E4E4E7;border-radius:4px">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#71717A" stroke-width="2" stroke-linecap="round" style="margin-right:8px;flex-shrink:0"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg>
<span style="flex:1;font-size:13px;color:#18181B">数据导入模板.xlsx</span>
<span style="font-size:12px;color:#71717A;margin-right:12px">856 KB</span>
<svg class="demo-file-remove" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#A1A1AA" stroke-width="2" stroke-linecap="round" style="cursor:pointer"><path d="M18 6L6 18M6 6l12 12"/></svg>
</div>
</div>
</div>
</div>
<div class="demo-sub">拖拽上传</div>
<div class="demo-box">
<div class="demo-dropzone" style="border:2px dashed #E4E4E7;border-radius:6px;padding:40px 20px;text-align:center;cursor:pointer">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" style="margin:0 auto 12px"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
<div style="font-size:14px;color:#3F3F46">将文件拖到此处，或 <span style="color:#185058;font-weight:500">点击上传</span></div>
<div style="font-size:12px;color:#71717A;margin-top:4px">支持 .pdf .xlsx .csv 格式，单个文件不超过 10MB</div>
</div>
</div>
</section>安装
在页面中引入组件样式与 Tailwind 配置即可。组件样式只包含组件本身，不包含站点外壳。
<link rel="stylesheet" href="design-system/assets/design-system.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="design-system/tokens/tailwind.config.js"></script>使用方式
在 Code 标签页复制完整标记，替换其中的文案与数据即可。颜色、字号、圆角与阴影一律引用 tokens/design-tokens.json 中的 token，不要写入未定义的颜色值。
组件在浅色主题下设计；若页面启用暗色模式，请先用 token 覆盖背景与文字色，再复用组件结构。
设计规范
完整的尺寸、状态与反模式说明见 DESIGN.md。开发完成后请按 §28 检查清单逐项核对。