组件

ShadcnStatusDot

语义色状态圆点：Online / Away / Busy / Offline / Success / Warning / Danger。

ShadcnStatusDot 效果展示

纯视觉语义色圆点。用户在线状态、服务健康状态、任务执行进度通用；常与 ShadcnAvatar 的 status 属性组合使用。

用法

import QtShadcn

// 独立使用
ShadcnStatusDot {
    status: ShadcnStatusDot.Status.Online
    size: 8
}

// 叠在彩色背景（Avatar / Card 底）上 → border=true 开描边
ShadcnStatusDot {
    status: ShadcnStatusDot.Status.Success
    size: 12
    border: true   // 1px theme.card 色描边，让圆点边缘清晰
}

// 行内列表项：左侧指示点 + 文本
Row {
    spacing: theme.spacingSm
    ShadcnStatusDot { status: ShadcnStatusDot.Status.Online; anchors.verticalCenter: parent.verticalCenter }
    Text { text: "alice@qt.io"; color: theme.foreground; anchors.verticalCenter: parent.verticalCenter }
}

属性

属性	类型	说明
`status`	enum	见下表 Status 枚举，默认 `Offline`
`size`	int	圆点直径像素，默认 `8`
`border`	bool	是否加 1px `theme.card` 色描边，默认 `false`（叠在彩色背景上时建议开启）

status = None 时组件自动 visible = false，不占布局空间。

Status 枚举 → 颜色映射

Status	颜色	语义
`Online`	`#22c55e`（绿）	用户在线
`Success`	`#22c55e`（绿）	操作成功 / 服务健康
`Away`	`#f59e0b`（黄）	离开
`Busy`	`#f59e0b`（黄）	忙碌 / 请勿打扰
`Warning`	`#f59e0b`（黄）	警告 / 降级
`Danger`	`#ef4444`（红）	错误 / 故障
`Offline`	`theme.mutedForeground`	离线（随主题明暗自动适配）
`None`	透明，隐藏	无状态

颜色直接写死 Tailwind 语义十六进制值（明暗对比度均 ≥ WCAG AA）；将来 QtShadcnTheme 补 success/warning/danger 语义 token 时内部替换即可，API 不变。

组合

与 Avatar 联动

ShadcnAvatar 已内置 StatusDot 叠加层，直接设 status 即可，无需手动布局：

ShadcnAvatar {
    text: "Ryan"
    status: ShadcnStatusDot.Status.Online   // 右下角自动出现绿点
    size: ShadcnAvatar.Size.Large
}

ShadcnStatusDot

用法

属性

Status 枚举 → 颜色映射

组合

与 Avatar 联动

相关