# 头像状态点

## 使用方法

`AvatarStatusDot` 是头像右下角那个小圆点，用来说明这个人是在线、离开还是忙。状态由 `variant` 决定。

每个变体的颜色都自带形状，状态不用只靠颜色分辨：`success` 是实心圆点，`neutral` 是空心环，`error` 是圆点上横一道减号。圆点还会读头像的尺寸，128px 的头像配 32px 的圆点，小头像配小圆点。

只靠颜色区分，对色觉障碍的人是不够的，所以 `label` 尽量都写上。放在头像里时，这个名字会并进头像自己的无障碍名称，读屏念的是「Jane Doe, Online」，而不是只念名字；单独使用时它就是圆点自己的图片名称。不写 `label` 的话这个圆点对读屏完全隐藏，只在旁边已经用文字写明状态时才可以这么做。

```ts
import { AvatarStatusDot } from '@astryx-vue/core/Avatar'
```

## 示例

常见的用法和不同的状态。

### 变体

在头像上用 success、neutral、error 三种变体表示在线状态。把 AvatarStatusDot 放进 Avatar 的 status 插槽，圆点会贴在头像右下角，大小跟着头像走。

```vue
<script setup lang="ts">
import { Avatar, AvatarStatusDot } from '@astryx-vue/core/Avatar'
import { HStack } from '@astryx-vue/core/Stack'
</script>

<template>
  <HStack align="center" :gap="4">
    <Avatar name="Ana Silva" size="xl">
      <template #status>
        <AvatarStatusDot variant="success" label="Online" />
      </template>
    </Avatar>
    <Avatar name="Ben Okafor" size="xl">
      <template #status>
        <AvatarStatusDot variant="neutral" label="Away" />
      </template>
    </Avatar>
    <Avatar name="Cleo Marsh" size="xl">
      <template #status>
        <AvatarStatusDot variant="error" label="Do not disturb" />
      </template>
    </Avatar>
  </HStack>
</template>
```

### 图标

状态有自己的符号时，把图标放进 icon 插槽，顶掉自带的形状。头像很小时图标会收起来，换回自带的形状。

```vue
<script setup lang="ts">
import { Avatar, AvatarStatusDot } from '@astryx-vue/core/Avatar'
import { Icon } from '@astryx-vue/core/Icon'
import { HStack } from '@astryx-vue/core/Stack'
</script>

<template>
  <HStack align="center" :gap="4">
    <Avatar name="Ana Silva" size="xl">
      <template #status>
        <AvatarStatusDot label="Approved">
          <template #icon>
            <Icon icon="i-carbon-checkmark-filled" />
          </template>
        </AvatarStatusDot>
      </template>
    </Avatar>
    <Avatar name="Ben Okafor" size="xl">
      <template #status>
        <AvatarStatusDot variant="neutral" label="Paused">
          <template #icon>
            <Icon icon="i-carbon-pause-filled" />
          </template>
        </AvatarStatusDot>
      </template>
    </Avatar>
    <Avatar name="Cleo Marsh" size="xl">
      <template #status>
        <AvatarStatusDot variant="error" label="Blocked">
          <template #icon>
            <Icon icon="i-carbon-close-filled" />
          </template>
        </AvatarStatusDot>
      </template>
    </Avatar>
  </HStack>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `variant` | `'success' \| 'neutral' \| 'error'` | `'success'` | 状态的语义，颜色自带形状，状态不用只靠颜色分辨：`success` 是实心圆点，`neutral` 是空心环，`error` 是圆点上横一道减号。旧名字 `info` 和 `warning` 仍然可以用，分别按 `success` 和 `error` 画。 |
| `label` | `string` | — | 状态的读屏名称，例如 `Online`。放进头像里时会并进头像自己的无障碍名称（`Jane Doe, Online`）；单独使用时圆点自己带 `role="img"` 和这个名字。不传时圆点带 `aria-hidden`，对辅助技术完全不可见。 |

## 尺寸

圆点会读外层头像的尺寸，按三档取大小。分档而不是等比缩小，是为了每一档都还看得清；放在头像外面时用默认的 <code>md</code>（36px）。

| 头像尺寸 | 圆点 | 边框 | 图标 |
| --- | --- | --- | --- |
| 36px 及以下 | 10px | 1px | 不显示 |
| 37px 到 72px | 20px | 2px | 12px |
| 73px 及以上 | 32px | 4px | 18px |

## 插槽

- `icon`：画在圆点中间的图标。给了图标就顶掉自带的形状（实心 / 空心环 / 减号），所以不同状态配不同图标。最小一档不画图标，那里放不下，画了也看不清。

## 主题

```css
.my-avatar-status-dot {
  --astryx-avatar-status-dot-size: 12px;
  --astryx-avatar-status-dot-border-width: 2px;
  --astryx-avatar-status-dot-border-color: #ffffff;
  --astryx-avatar-status-dot-success-background: #198100;
  --astryx-avatar-status-dot-success-foreground: #ffffff;
  --astryx-avatar-status-dot-neutral-background: #ffffff;
  --astryx-avatar-status-dot-neutral-foreground: #525252;
  --astryx-avatar-status-dot-error-background: #e33f4a;
  --astryx-avatar-status-dot-error-foreground: #ffffff;
}
```

`size` 会盖掉圆点从头像算出来的大小，里面画的形状仍然按算出来的档位画。