# Skeleton

`ShowtimeSkeleton` 是加载状态容器；`ShowtimeSkeletonLine` 与 `ShowtimeSkeletonShape` 可以组合成文字、头像和图片的占位结构。默认动效是一束清晰的高亮扫光：光束穿过占位面并完全离场后，再开始下一次循环。

```vue
<script setup lang="ts">
import {
  ShowtimeSkeleton,
  ShowtimeSkeletonLine,
  ShowtimeSkeletonShape
} from 'showtime-components'
</script>

<template>
  <ShowtimeSkeleton
    :loading="true"
    animation
    base-color="#edf0f2"
    highlight-color="#f7f8fa"
    :animation-duration="1800"
    :animation-angle="115"
    animation-direction="ltr"
    :border-radius="8"
  >
    <template #skeleton>
      <div class="placeholder-card">
        <ShowtimeSkeletonShape shape="circle" size="medium" />
        <ShowtimeSkeletonLine :rows="2" :widths="['84%', '58%']" />
      </div>
    </template>
  </ShowtimeSkeleton>
</template>
```

## `ShowtimeSkeleton` Props

| 参数名 | 描述 | 类型 | 默认值 |
| --- | --- | --- | --- |
| `loading` | 是否显示骨架屏（加载中状态） | `boolean` | `true` |
| `animation` | 是否开启单束高亮扫光动画 | `boolean` | `true` |
| `baseColor` | 骨架基础色；也会作为后代 Line/Shape 的继承值 | `string` | `var(--showtime-color-skeleton)` |
| `highlightColor` | 扫光高亮色；也会作为后代 Line/Shape 的继承值 | `string` | `var(--showtime-color-skeleton-highlight)` |
| `animationDuration` | 扫光完整循环时长（包含离场后的短暂间隔），数字按 ms 处理 | `number \| string` | `1.8s` |
| `animationAngle` | 扫光渐变角度，数字按 deg 处理 | `number \| string` | `115deg` |
| `animationDirection` | 扫光方向：`ltr` 左到右、`rtl` 右到左、`ttb` 上到下、`btt` 下到上 | `'ltr' \| 'rtl' \| 'ttb' \| 'btt'` | `'ltr'` |
| `borderRadius` | 默认骨架圆角，数字按 px 处理 | `number \| string` | `var(--showtime-radius-sm)` |

加载时使用 `skeleton` 插槽；加载结束后渲染默认插槽。

## `ShowtimeSkeletonLine` Props

| 参数名 | 描述 | 类型 | 默认值 |
| --- | --- | --- | --- |
| `rows` | 展示的行数 | `number` | `1` |
| `widths` | 每行骨架宽度，数字按 px 处理 | `Array<number \| string>` | `[]` |
| `lineHeight` | 线型骨架行高 | `number` | `20` |
| `lineSpacing` | 线型骨架行间距 | `number` | `15` |
| `baseColor` | 覆盖当前 Line 的基础色；省略时继承最近的 `ShowtimeSkeleton` | `string` | - |
| `highlightColor` | 覆盖当前 Line 的扫光高亮色；省略时继承最近的 `ShowtimeSkeleton` | `string` | - |
| `borderRadius` | 覆盖当前行的圆角，数字按 px 处理 | `number \| string` | - |

## `ShowtimeSkeletonShape` Props

| 参数名 | 描述 | 类型 | 默认值 |
| --- | --- | --- | --- |
| `shape` | 图形骨架形状 | `'square' \| 'circle'` | `'square'` |
| `size` | 图形骨架大小 | `'small' \| 'medium' \| 'large'` | `'medium'` |
| `baseColor` | 覆盖当前 Shape 的基础色；省略时继承最近的 `ShowtimeSkeleton` | `string` | - |
| `highlightColor` | 覆盖当前 Shape 的扫光高亮色；省略时继承最近的 `ShowtimeSkeleton` | `string` | - |
| `borderRadius` | 覆盖方形骨架的圆角，数字按 px 处理；圆形仍保持圆形 | `number \| string` | - |

## 样式定制

骨架基础色、扫光色和圆角使用共享 token，参见 [样式定制](./style-customization.md)。根组件传入的颜色、速度、方向和圆角会通过 CSS 变量传给 `skeleton` 插槽中的后代内容；Line/Shape 也可以按实例覆盖这三项视觉配置。提高 `highlightColor` 与基础色的对比度可获得更醒目的扫光；如需静态占位，可传入 `:animation="false"`。

```vue
<ShowtimeSkeleton
  base-color="#edf0f2"
  highlight-color="#f7f8fa"
  :animation-duration="900"
  :animation-angle="128"
  animation-direction="rtl"
  :border-radius="12"
>
  <template #skeleton>
    <div>
      <ShowtimeSkeletonShape shape="circle" base-color="#b9cfe0" />
      <ShowtimeSkeletonLine :rows="2" :border-radius="6" />
    </div>
  </template>
</ShowtimeSkeleton>
```

数字形式的 `animationDuration` 按毫秒处理，`animationAngle` 按角度处理，`borderRadius` 按像素处理；字符串可以传任意 CSS 时间或角度值。`animationAngle` 会旋转单束高亮扫光，`animationDirection` 决定扫光沿水平或垂直轴移动。每轮扫光会先完整离开占位面，再进入下一轮。自定义 `skeleton` 插槽时，可给实际的占位面加上 `showtime-skeleton__surface` class；不要把它加在同时包裹多个占位面的布局容器上。