# Maintenance Page

`ShowtimeMaintenancePage` 是一个可配置的全页维护状态组件。它提供中性、低干扰的运维科技视觉，品牌、操作按钮和业务行为都由应用自行控制。

默认使用亮色主题；当页面处于深色应用外壳中时，可传入 `theme="dark"`。

## 基础用法

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

<template>
  <ShowtimeMaintenancePage
    status="计划维护通知"
    title="服务暂时不可用"
    message="我们正在升级平台服务，请稍后再访问。"
    contact-label="技术支持"
    contact-value="support@example.com"
    contact-href="mailto:support@example.com"
  />
</template>
```

## Props

| 参数 | 说明 | 默认值 |
| --- | --- | --- |
| `theme` | 视觉主题，可选 `light` 或 `dark` | `light` |
| `status` | 标题上方显示的维护状态文案 | `System maintenance` |
| `title` | 维护页面主标题 | `Service temporarily unavailable` |
| `message` | 维护说明文案 | 内置计划维护提示 |
| `contactLabel` | 联系方式前的可选标签 | `''` |
| `contactValue` | 可选的支持邮箱、电话或其他联系信息 | `''` |
| `contactHref` | 可选链接；传入后联系方式渲染为原生链接 | `''` |
| `logo` | 可选 logo 图片 URL | `''` |
| `logoAlt` | logo 图片替代文本；装饰性图片可留空 | `''` |
| `illustration` | 可选维护插画图片 URL | `''` |
| `illustrationAlt` | 插画替代文本；装饰性图片可留空 | `''` |
| `minHeight` | 根节点最小高度 | `100dvh` |

## Slots

| 插槽 | 说明 |
| --- | --- |
| `logo` | 使用业务自有内容覆盖 logo 图片区。 |
| `illustration` | 覆盖传入图片或组件内置的维护动画核心。 |
| `actions` | 放置返回首页、刷新等业务自有操作。 |

## 自定义内容

```vue
<ShowtimeMaintenancePage
  status="书唐服务通知"
  title="网站维护中"
  message="我们正在升级服务与基础设施，请稍后再访问。"
>
  <template #logo>
    <img src="/brand/logo.svg" alt="书唐 Showtime" />
  </template>

  <template #actions>
    <a href="/">返回首页</a>
  </template>
</ShowtimeMaintenancePage>
```

## 样式与无障碍

根节点会把配置的高度写入 `--showtime-maintenance-min-height`，因此可以嵌入到固定高度的业务视图中：

```vue
<ShowtimeMaintenancePage min-height="680px" />
```

```vue
<ShowtimeMaintenancePage theme="dark" />
```

背景网格为 SVG 装饰层，包含固定的直角电路路径和沿路径前后移动的光脉冲，已对辅助技术隐藏。状态、标题、说明和联系方式均使用原生文本，颜色不是唯一的状态提示。当用户启用 `prefers-reduced-motion` 时，所有持续和入场动画都会关闭。

组件不会自行刷新页面、启动倒计时或发起跳转；这些业务决定应放在 `actions` 插槽中。

## 共享样式 Token

Maintenance Page 保留自身的 `--maintenance-*` 变量，确保亮色与深色主题相互独立。共享圆角和字体 token 仍可按 [样式定制](./style-customization.md) 覆盖。