InlineCitation 行内引用

基础用法

行内引用

胶囊跟着文字排版走：18px 高、等宽字体、上移 1px 让字高与正文对齐，而不是压在基线上。

流式回答里的引用

引用在正文流到那个位置时才落下，pop-in 的弹入正是为这一刻准备的。整段观感由 demo 编排，组件本身只负责渲染一枚胶囊。

API

Props

url 无法被 URL 解析时，回落链的末端是 url 原文，不会渲染成空胶囊。

Events

Slots

交互契约

• 链接不自行导航。 渲染的是真实 <a href>，但点击会 preventDefault 并派发 open。这在 Electron 渲染进程里是必须的——正文里的引用最不该做的事就是把整个应用导航走。
• href 保留在 DOM 上，所以浏览器原生的「在新标签页打开」「复制链接地址」右键菜单依旧可用。
• 站点图标加载失败会被记下并停止渲染该图标，胶囊退化成纯文案而不是留一个破图占位。
• 图标标了 alt="" 与 aria-hidden，可访问名称由胶囊文案承担。
• 胶囊用 vertical-align: middle 加 1px 上移嵌进文字流，行高由所在段落决定，组件自己不设 line-height。
• 入场只在挂载时播放一次；appear 是渲染期决策，改它不会追加播放。

最佳实践

• 必须监听 open，否则点击引用不会有任何反应。
• 一段正文里的引用控制在 2~3 枚：胶囊比文字重，密集出现会把段落读成列表。
• label 留空更好——默认的域名回落让读者一眼看出来源出处，自定义文案反而容易掩盖它。
• 流式场景里给 source.id 用稳定标识：图标失败记录按实例持有，节点复用时靠稳定数据避免反复重试坏图。
• 需要「答案末尾的来源清单」而不是行内引用时，用 TxSources；两者是互补关系，常常同时出现。

Source

• Component source: packages/tuffex/packages/components/src/inline-citation/src/TxInlineCitation.vue。
• Types: packages/tuffex/packages/components/src/inline-citation/src/types.ts。
• 实测覆盖: packages/tuffex/packages/components/src/inline-citation/__tests__/inline-citation.test.ts（7 项）验证 hostname 回落与 www. 剥离、label / title 的优先级、URL 解析失败的兜底、点击派发 open 而不导航、图标失败后消失、appear 对入场类名的开关。
• 移植自 Beautiful UI（https://www.beautifului.dev），© 2026 Shane Levine，MIT。