# 顶部导航大菜单特色卡片

## 使用方法

这是放在 `TopNavMegaMenu` 的 `featured` 插槽里的标准推荐卡片。它把「图片 + 标题 + 说明 + 行动链接」固定成一套版式，各个大菜单里看起来都一致。

```vue
<script setup lang="ts">
import { TopNavMegaMenuFeaturedCard } from '@astryx-vue/core/TopNav'
</script>

<template>
  <TopNavMegaMenuFeaturedCard
    title="What's New"
    description="Check out the latest features and improvements in the Q2 release."
    link-label="Read the changelog"
    link-href="#changelog"
  />
</template>
```

标题是必填的。传了 `image` 就在正文上方显示图片；不传 `imageAlt` 时图片只当装饰，因为卡片上已经有可见标题，读屏跳过它反而更干净。`linkLabel` 加 `linkHref` 会在卡片底部多出一个行动链接，`linkHref` 不传就用 `href`。只传 `href`、不传 `linkLabel` 时，整张卡片本身就是一个链接。默认插槽里的内容显示在说明文字下方。

## 示例

### 基础

带标题、说明和行动链接的推广卡片。放进 TopNavMegaMenu 的 featured 插槽，用来突出公告类内容。

```vue
<script setup lang="ts">
import { TopNavMegaMenuFeaturedCard } from '@astryx-vue/core/TopNav'
</script>

<template>
  <TopNavMegaMenuFeaturedCard
    title="What's New"
    description="Check out the latest features and improvements in the Q2 release."
    link-label="Read the changelog"
    link-href="#changelog"
  />
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `title` | `string` | — | 卡片标题。必填。 |
| `description` | `string` | — | 标题下面的说明文字。 |
| `href` | `string` | — | 让整张卡片变成一个链接。同时写了 `linkLabel` 时，链接改到卡片底部的行动文字上。 |
| `image` | `string` | — | 正文上方的图片地址，可以不传。 |
| `imageAlt` | `string` | — | 图片的替代文本。不传时图片被明确当成装饰（`alt=""`、`role="presentation"`、`aria-hidden`）。因为卡片上已经有可见标题，这通常是正确的做法。只有当图片本身带了标题和说明以外的信息时，才需要写它。 |
| `linkLabel` | `string` | — | 底部行动链接的文字。要和 `linkHref` 或 `href` 一起用。 |
| `linkHref` | `string` | — | 行动链接的地址。不传则用 `href`。 |
| `as` | `NavLinkComponent` | `'a'` | 卡片和行动文字共用的链接根组件。只有存在地址时才使用。 |

## 插槽

- `default`：显示在标准正文下方的自定义内容。