AtomUI/docs/Desktop.Controls/Upload/UploadToken.md

Upload Design Token

Upload 控件使用 UploadToken（Token ID: "Upload"）作为组件级 Design Token，所有视觉属性均从全局 SharedToken 派生，不硬编码任何具体值。

---

Token 资源访问方式

在 AXAML 中使用组件级 Token：

{atom:UploadTokenResource ActionsColor}
{atom:UploadTokenResource PictureCardSize}
{atom:UploadTokenResource DragIconSize}

在 AXAML 中使用全局共享 Token：

{atom:SharedTokenResource ColorPrimary}
{atom:SharedTokenResource ColorBorder}
{atom:SharedTokenResource BorderThickness}

---

组件级 Token 一览

以下是 UploadToken 定义的全部组件级 Token，按功能分组说明。

颜色 Token

Token 名	类型	来源	说明
ActionsColor	Color	SharedToken.ColorIcon	操作按钮颜色（如删除、预览按钮的图标色）

尺寸 Token

Token 名	类型	来源	说明
PictureCardSize	double	SharedToken.ControlHeightLG * 2.55	卡片类型文件列表项的尺寸（PictureCard 和 PictureCircle 类型的卡片宽高）
UploadThumbnailSize	double	SharedToken.FontSizeHeading2	文件类型图标缩略图大小（Picture 列表中的文件图标尺寸）
PictureListPreviewerSize	double	SharedToken.SizeXXL	图片列表中图片预览器的大小

拖拽区域 Token

Token 名	类型	来源	说明
DragIconSize	double	SharedToken.FontSizeHeading3 * 2	拖拽上传区域图标大小
DragIconMargin	Thickness	(0, 0, 0, SharedToken.UniformlyMargin)	拖拽上传区域图标外间距（底部间距）
DragHeaderMargin	Thickness	(0, 0, 0, SharedToken.UniformlyMarginXXS)	拖拽上传区域主标题的外间距（底部间距）

间距 Token

Token 名	类型	来源	说明
TextListItemMargin	Thickness	(0, SharedToken.UniformlyMarginXS, 0, 0)	文本列表项的外间距（顶部间距）
TextListNamePadding	Thickness	(SharedToken.UniformlyPaddingXS, 0)	文本列表中文件名的内间距（水平方向）
PictureListItemMargin	Thickness	(0, SharedToken.UniformlyMarginXS, 0, 0)	图片列表项的外间距（顶部间距）

---

主题中使用的全局 SharedToken

除组件级 Token 外，Upload 的 ControlTheme 及其子组件还直接引用了以下全局 SharedToken：

Upload 主控件

Token 资源键	使用场景
EnableMotion	全局动画开关
ColorTextDisabled	禁用态前景色

UploadTriggerContent（触发区）

Token 资源键	使用场景
ColorTextSecondary	触发区默认前景色
ColorFillAlter	PictureCard/PictureCircle 触发区背景色
BorderRadiusLG	PictureCard/PictureCircle 触发区圆角
ColorBorder	PictureCard/PictureCircle 触发区边框颜色
BorderThickness	PictureCard/PictureCircle 触发区边框厚度
ColorPrimary	PictureCard/PictureCircle 触发区悬浮边框颜色
ColorTextDisabled	禁用态前景色

UploadDefaultDropArea（拖拽区域）

Token 资源键	使用场景
ColorFillAlter	拖拽区域背景色
BorderRadiusLG	拖拽区域圆角
ColorBorder	拖拽区域边框颜色
BorderThickness	拖拽区域边框厚度
Padding	拖拽区域内间距
EnableMotion	拖拽区域动画开关
ColorPrimary	拖拽区域图标颜色
ColorPrimaryHover	拖拽区域悬浮时边框颜色
ColorTextHeading	主标题文字颜色
FontSizeLG	主标题字体大小
ColorTextDescription	副标题文字颜色
FontSize	副标题字体大小
ColorTextDisabled	禁用态文字和图标颜色

---

Token 对外观的具体影响

各列表类型的 Token 使用

列表类型	使用的组件级 Token	说明
Text	TextListItemMargin、TextListNamePadding、ActionsColor、UploadThumbnailSize	文本列表项间距、文件名内间距、操作按钮颜色、文件图标大小
Picture	PictureListItemMargin、PictureListPreviewerSize、ActionsColor、UploadThumbnailSize	图片列表项间距、缩略图大小、操作按钮颜色
PictureCard	PictureCardSize、ActionsColor	卡片尺寸（宽高）、操作按钮颜色
PictureCircle	PictureCardSize、ActionsColor	圆形卡片尺寸（直径）、操作按钮颜色

拖拽区域的 Token 使用

Token	影响
DragIconSize	拖拽区域中心图标的宽高
DragIconMargin	图标与标题之间的间距
DragHeaderMargin	主标题与副标题之间的间距

卡片尺寸计算

PictureCardSize 的值为 SharedToken.ControlHeightLG * 2.55，这意味着：

• 默认主题下（ControlHeightLG = 40），卡片尺寸约为 102px
• 紧凑主题下卡片尺寸会相应缩小
• 此值同时控制 PictureCard 和 PictureCircle 两种类型的触发区和列表项尺寸

Token 推导链示例

SharedToken.ColorIcon
  └── UploadToken.ActionsColor          → 操作按钮（删除/预览）图标颜色

SharedToken.ControlHeightLG
  └── UploadToken.PictureCardSize       → 卡片列表项和触发区的宽高

SharedToken.FontSizeHeading3
  └── UploadToken.DragIconSize          → 拖拽区域中心图标尺寸

SharedToken.UniformlyMarginXS
  ├── UploadToken.TextListItemMargin    → 文本列表项顶部间距
  └── UploadToken.PictureListItemMargin → 图片列表项顶部间距

SharedToken.UniformlyPaddingXS
  └── UploadToken.TextListNamePadding   → 文件名水平内间距

SharedToken.SizeXXL
  └── UploadToken.PictureListPreviewerSize → 图片列表缩略图预览尺寸