# Action Bar

`ShowtimeActionBar` 是一个适合内容详情页、底部浮层、视频互动区的轻量操作栏组件。

它默认提供：

- 分享
- 点赞
- 求更新
- 关注

并且点击后会有即时反馈动画，适合你现在这种偏移动端内容社区的场景。

## 基础用法

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { ShowtimeActionBar } from 'showtime-components'

const followed = ref(false)

function handleAction(key: string) {
  console.log(key)
}
</script>

<template>
  <ShowtimeActionBar
    v-model:follow-active="followed"
    @action="handleAction"
  />
</template>
```

## Props

| 名称 | 说明 | 默认值 |
| --- | --- | --- |
| `items` | 左侧互动按钮列表 | 默认内置三项 |
| `followLabel` | 未关注文案 | `关注` |
| `followedLabel` | 已关注文案 | `已关注` |
| `followActive` | 初始关注状态 | `false` |
| `animated` | 是否启用点击反馈动画 | `true` |

## `items` 结构

```ts
interface ShowtimeActionItem {
  key: string
  label: string
  icon?: 'share' | 'like' | 'update' | 'follow'
  active?: boolean
  count?: string | number
  disabled?: boolean
  accent?: 'default' | 'danger' | 'brand'
}
```

## 事件

| 名称 | 说明 |
| --- | --- |
| `action` | 任一按钮点击时触发，返回按钮 key |
| `update:followActive` | 关注状态更新 |
| `follow-change` | 关注状态变化时触发 |

## 交互说明

- 左侧按钮点击时会有轻微放大和圈层扩散反馈
- 关注按钮点击时会有整体弹性反馈和扫光感
- 如果系统开启 `prefers-reduced-motion`，动画会自动减弱

## 样式定制

操作栏的常规文字、次级文字、激活色、圆角、阴影和过渡使用共享 token，覆盖方式见 [样式定制](./style-customization.md)。