使用方法

Citation 在一句话里标出来源。label 是带标题的小胶囊。number 是紧凑的上标。number 从 1 开始，会读进无障碍名称，数字变体也会把它画出来。

source.url 有值时，引文是在新标签页打开的链接，并带 role="doc-noteref"。没有 URL 时是 <span>，不会假装自己是链接。无障碍名称会本地化，例如「引用 2：发布说明」。source.title 为空时，可见文字回退到编号。

source.icon 优先于 source.src。看起来像 URL 或路径的值画成图片，其他字符串交给 Icon 当 CSS 类名。图标只在 label 变体里出现。

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

<template>
  <p>
    参见
    <Citation :number="1" :source="{ title: '发布说明', url: 'https://example.com/notes' }" />
    <Citation :number="1" variant="number" :source="{ title: '发布说明', url: 'https://example.com/notes' }" />
  </p>
</template>

建议

建议	做法
推荐	同一次回答里，同一个来源保持同一个 number，胶囊和上标才指向同一条。
推荐	title 写读者认得出的名字。编号只是没有标题时的退路。
推荐	段落很密时用数字变体；希望不看脚注也能读出来源时用 label。
避免	把一整句放进 title。胶囊会截断，无障碍名称也会变成那一整句。
避免	拿引文当普通链接。它是注记，不是导航。

解剖

部分	说明
容器	根容器。来源地址可用时渲染成链接；缺失或被拒绝时渲染成不起作用的 span。
图标	标签文字前面的可选来源图标。可以是网站图标或标志的图片地址（source.src），也可以是插槽内容，比如 Astryx 的 Icon。只在标签变体里可用。
标签文字	来源标题。超过最大宽度时用省略号截断。标签变体里显示。
编号	显示成上标徽章的引用序号。编号变体里显示。

示例

Citation — 行内文字

React uses a virtual DOM to minimize expensive DOM operations1. This approach was inspired by earlier functional UI frameworks2. TypeScript adds static types to JavaScript for safer refactoringTypeScript Documentation.

引文嵌在段落里，和周围的字走在同一行。

Citation — 来源列表

Sources

React DocumentationTypeScript HandbookMDN Web DocsW3C WAI-ARIA Specification

回答或文章末尾的来源列表，每条都带图标。