开发预览更新于 2026-05-10

CitationMark 引用标记

行内引用 chip，hover 弹出来源卡片；用于 AI 回复里的参考标注。

基础用法

放在正文 inline 位置，显示编号 chip；hover/focus 弹出来源卡（标题 + 域名 + snippet + 打开链接）。点击 chip 直接跳到 source.url（新标签页）。

背景视口

OKLCH 是一种感知均匀的颜色空间，被设计令牌系统广泛采用。

src/App.vue

<script setup lang="ts">
import { CfCitationMark } from '@chufix-design/vue';
</script>
<template>
  <p class="demo-prose">
    OKLCH 是一种感知均匀的颜色空间<CfCitationMark
      :index="1"
      :source="{ title: 'OKLCH in CSS — Evil Martians', domain: 'evilmartians.com', snippet: 'Why and how to use OKLCH color space in CSS' }"
    />，被设计令牌系统广泛采用<CfCitationMark
      :index="2"
      :source="{ title: 'Color spaces for design', domain: 'developer.chrome.com', url: 'https://developer.chrome.com/docs/css-ui/color-spaces' }"
    />。
  </p>
</template>
<style scoped>
.demo-prose { color: var(--fg-1); line-height: 1.7; }
</style>

<script setup>
import { CfCitationMark } from '@chufix-design/vue';
</script>
<template>
  <p class="demo-prose">
    OKLCH 是一种感知均匀的颜色空间<CfCitationMark
      :index="1"
      :source="{ title: 'OKLCH in CSS — Evil Martians', domain: 'evilmartians.com', snippet: 'Why and how to use OKLCH color space in CSS' }"
    />，被设计令牌系统广泛采用<CfCitationMark
      :index="2"
      :source="{ title: 'Color spaces for design', domain: 'developer.chrome.com', url: 'https://developer.chrome.com/docs/css-ui/color-spaces' }"
    />。
  </p>
</template>
<style scoped>
.demo-prose { color: var(--fg-1); line-height: 1.7; }
</style>

import { CfCitationMark } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <p className="demo-prose">
          OKLCH 是一种感知均匀的颜色空间<CfCitationMark index={1} source={{ title: 'OKLCH in CSS — Evil Martians', domain: 'evilmartians.com', snippet: 'Why and how to use OKLCH color space in CSS' }} />，被设计令牌系统广泛采用<CfCitationMark index={2} source={{ title: 'Color spaces for design', domain: 'developer.chrome.com', url: 'https://developer.chrome.com/docs/css-ui/color-spaces' }} />。
        </p>
    </>
  );
}

import { CfCitationMark } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <p className="demo-prose">
          OKLCH 是一种感知均匀的颜色空间<CfCitationMark index={1} source={{ title: 'OKLCH in CSS — Evil Martians', domain: 'evilmartians.com', snippet: 'Why and how to use OKLCH color space in CSS' }} />，被设计令牌系统广泛采用<CfCitationMark index={2} source={{ title: 'Color spaces for design', domain: 'developer.chrome.com', url: 'https://developer.chrome.com/docs/css-ui/color-spaces' }} />。
        </p>
    </>
  );
}

API

属性	类型	默认	说明
`index`	`number`	`—`	chip 上显示的数字
`source`	`CitationSource`	`—`	`{ title, url?, snippet?, favicon?, domain? }`
`disableHover`	`boolean`	`false`	禁用 hover 卡（适合打印态）