Uploader
文件上传
上传图片 · 默认状态
标题栏44px高度，上传框122×122px，G05背景 + 加号图标G40，圆角8px；说明条382×28px
上传图片 · 已上传
一行3张图片，每张122×122px，右上角关闭图标，下方显示文件名
上传图片 · 自定义数量（9宫格上限）
限制9张时，达到上限后添加按钮消失；删除一张后按钮重新出现
上传图片 · 不限数量
默认显示9张，超过9张出现滚动条；添加按钮始终存在
上传文件 · 默认状态
标题栏44px，上传框382×82px 白色背景 G10描边，中间+号+添加附件DB60，辅助说明G50
添加附件
不超过7M的附件
上传文件 · 已上传
文件项382×60px G05背景，左侧40×40px彩色文件图标，右侧进度/预览/下载/删除图标
项目方案.docx
68%
设计规范.pdf
添加附件
不超过7M的附件
上传文件 · 限制数量（已满禁用）
达到限制数量后，底部上传框变为禁用状态
报告.docx
数据表.xlsx
设计规范.pdf
添加附件
不超过7M的附件
上传文件 · 不限数量
超过7个文件时滚动显示，上传框在底部固定不动
报告1.docx
数据表.xlsx
规范.pdf
演示文稿.pptx
资源包.zip
合同.doc
财务报表.xlsx
添加附件
不超过7M的附件
| 属性 | 值 | Token |
|---|---|---|
| 标题栏 — 通用 | ||
| 标题栏高度 | 44px | --up-title-height |
| 标题字号/字重 | 18px/500 | --up-title-font-size / --up-title-font-weight |
| 标题颜色 | G60 #223355 | --G60 |
| 副标题字号/字重 | 14px/400 | --up-sub-font-size / --up-sub-font-weight |
| 副标题颜色 | G50 #6B7A99 | --up-sub-color → --G50 |
| 上传图片 — 添加框 | ||
| 添加框尺寸 | 122×122px | --up-add-box-size |
| 添加框背景 | G05 #F5F7FA | --up-add-box-bg → --G05 |
| 添加框圆角 | 8px | --up-add-box-radius |
| 上传图标尺寸 | 24×24px | --up-add-icon-width × --up-add-icon-height |
| 上传图标颜色 | G40 #A8B4C8 | --up-add-icon-color → --G40 |
| 上传图片 — 说明条 | ||
| 说明条宽度 | 382px | --up-info-width |
| 说明条高度 | 28px | --up-info-height |
| 说明条背景 | G05 #F5F7FA | --up-info-bg → --G05 |
| 说明条圆角 | 4px | --up-info-radius |
| 说明文字字号 | 12px | --up-info-font-size |
| 说明文字颜色 | G60 #223355 | --up-info-color → --G60 |
| 上传图片 — 缩略图 | ||
| 缩略图尺寸 | 122×122px | --up-thumb-size |
| 缩略图圆角 | 8px | --up-thumb-radius |
| 每行数量 | 3 | --up-thumb-cols |
| 缩略图间距 | 8px | --up-thumb-gap |
| 文件名覆盖层宽度 | 122px | — |
| 文件名覆盖层高度 | 24px | — |
| 文件名覆盖层背景 | #00000066 | — |
| 文件名覆盖层圆角 | 0 0 8px 8px（底部圆角） | — |
| 文件名字号 | 12px | — |
| 文件名颜色 | #FFFFFF 白色 | — |
| 上传框位置 | 始终在第一个位置 | — |
| 上传图片 — 数量限制 | ||
| 限制数量时 | 达到上限后添加按钮消失，删除后重新出现 | — |
| 不限数量时 | 默认显示9张，超过9张出现滚动条，添加按钮始终存在 | — |
| 上传文件 — 添加框 | ||
| 添加框宽度 | 382px | --up-file-box-width |
| 添加框高度 | 82px | --up-file-box-height |
| 添加框背景 | #FFFFFF G0 白色 | --up-file-box-bg → --G0 |
| 添加框描边 | 1px G10 #E9ECF2 | --up-file-box-border → --G10 |
| 添加框圆角 | 8px | --up-file-box-radius |
| +号+文字颜色 | DB60 #3388FF | --up-file-add-color → --DB60 |
| 文字字号/字重 | 14px/400 | --up-file-add-font-size / --up-file-add-font-weight |
| 辅助说明颜色 | G50 #6B7A99 | --up-file-hint-color → --G50 |
| 辅助说明字号 | 12px | --up-file-hint-font-size |
| 上传文件 — 文件项 | ||
| 文件项宽度 | 382px | --up-file-item-width |
| 文件项高度 | 60px | --up-file-item-height |
| 文件项背景 | G05 #F5F7FA | --up-file-item-bg → --G05 |
| 文件项圆角 | 8px | --up-file-item-radius |
| 文件图标尺寸 | 40×40px | --up-file-icon-size |
| 文件图标样式 | 彩色面状 + 白色折角（参考 Web 端） | — |
| 文件名字号 | 14px | --up-file-name-font-size-file |
| 进度字号/颜色 | 12px / DB60 | --up-file-progress-font-size / --up-file-progress-color |
| 进度条高度 | 2px / DB60 | — |
| 操作图标尺寸 | 20px 容器（16px 图标） | --up-file-action-icon-size |
| 操作图标颜色 | G40 #A8B4C8 | --up-file-action-color → --G40 |
| 上传文件 — 数量限制 | ||
| 限制数量时 | 达到限制后底部添加框变为禁用状态 | — |
| 禁用态样式 | 背景G05、边框G10、图标+文字DB30 | — |
| 不限数量时 | 超过7个文件滚动显示，上传框底部固定不动 | — |