Sources 引用来源

用于展示 AI 回答内容的数据引用来源。

代码演示

基本用法

Used 3 sources

• 1. Data source
• 2. Data source
• 3. Data source

基本用法

基础用法。

<script setup lang="tsx">
defineOptions({ name: 'AXSourcesBasicV2' });

import { Sources } from 'ant-design-x-vue';

const items = [
  {
    title: '1. Data source',
    url: 'https://x.ant.design/components/overview',
  },
  {
    title: '2. Data source',
    url: 'https://x.ant.design/components/overview',
  },
  {
    title: '3. Data source',
    url: 'https://x.ant.design/components/overview',
  },
];

defineRender(() => <Sources title="Used 3 sources" items={items} />);
</script>

隐藏源代码

展示图标

Used 3 sources

• Data source from twitter
• Data source from youtube
• Data source from github

展示图标

展示图标，并可设置展开图标位置。

<script setup lang="tsx">
defineOptions({ name: 'AXSourcesIconV2' });

import { GithubOutlined, TwitterOutlined, YoutubeOutlined } from '@ant-design/icons-vue';
import { Sources } from 'ant-design-x-vue';

const items = [
  {
    title: 'Data source from twitter',
    url: 'https://x.ant.design/components/overview',
    icon: <TwitterOutlined />,
  },
  {
    title: 'Data source from youtube',
    url: 'https://x.ant.design/components/overview',
    icon: <YoutubeOutlined />,
  },
  {
    title: 'Data source from github',
    url: 'https://x.ant.design/components/overview',
    icon: <GithubOutlined />,
  },
];

defineRender(() => (
  <Sources title="Used 3 sources" items={items} expandIconPosition="end" />
));
</script>

隐藏源代码

控制展开折叠

Used 3 sources

• 1. Data source
• 2. Data source
• 3. Data source

控制展开折叠

控制展开折叠状态。

<script setup lang="tsx">
defineOptions({ name: 'AXSourcesExpandV2' });

import { Sources } from 'ant-design-x-vue';
import { Button } from 'ant-design-vue';
import { ref } from 'vue';

const items = [
  {
    title: '1. Data source',
    url: 'https://x.ant.design/components/overview',
  },
  {
    title: '2. Data source',
    url: 'https://x.ant.design/components/overview',
  },
  {
    title: '3. Data source',
    url: 'https://x.ant.design/components/overview',
  },
];

const expanded = ref(true);

defineRender(() => (
  <>
    <Button onClick={() => (expanded.value = !expanded.value)} style={{ marginBottom: '8px' }}>
      Change expand
    </Button>
    <br />
    <Sources
      title="Used 3 sources"
      items={items}
      expanded={expanded.value}
      onExpand={(val: boolean) => {
        expanded.value = val;
      }}
    />
  </>
));
</script>

隐藏源代码

内联模式

Use the inline mode in the text

1

Use the inline mode in the text

2

内联模式

悬停时展示来源信息。

<script setup lang="tsx">
defineOptions({ name: 'AXSourcesInlineV2' });

import { Sources } from 'ant-design-x-vue';

const items = [
  {
    title: '1. Data source',
    key: '1',
    url: 'https://x.ant.design/components/overview',
    description:
      'Artificial Intelligence, often abbreviated as AI, is a broad branch of computer science concerned with building smart machines capable of performing tasks that typically require human intelligence.',
  },
  {
    title: '2. Data source',
    key: '2',
    url: 'https://x.ant.design/components/overview',
  },
  {
    title: '3. Data source',
    key: '3',
    url: 'https://x.ant.design/components/overview',
  },
];

defineRender(() => (
  <div style={{ display: 'flex', alignItems: 'center' }}>
    <span>Use the inline mode in the text</span>
    <Sources title="1" activeKey="1" items={items} inline />
    <span>Use the inline mode in the text</span>
    <Sources title="2" activeKey="2" items={items} inline />
  </div>
));
</script>

隐藏源代码

API

SourcesProps

属性	说明	类型	默认值	版本
prefixCls	样式类名的前缀	string	-	-
title	标题	VNode | string	-	-
items	数据源列表	SourcesItem[]	-	-
inline	是否使用内联模式	boolean	false	-
expanded	是否展开（受控）	boolean	-	-
defaultExpanded	默认是否展开	boolean	true	-
onExpand	展开/折叠回调	(expand: boolean) => void	-	-
expandIconPosition	展开图标位置	'start' | 'end'	'start'	-
activeKey	当前活跃项的 key（内联模式）	string | number	-	-
onClick	点击数据源项回调	(item: SourcesItem) => void	-	-
popoverOverlayWidth	Popover 悬浮卡片宽度	number | string	300	-
classNames	语义化 class	Record<SemanticType, string>	-	-
styles	语义化 style	Record<SemanticType, CSSProperties>	-	-
rootClassName	根节点的样式类名	string	-	-

SourcesItem

属性	说明	类型	默认值	版本
key	唯一标识	string | number	-	-
title	标题	VNode | string	-	-
url	链接地址	string	-	-
icon	图标	VNode	-	-
description	描述（内联模式下显示）	VNode | string	-	-

Sources Slots

插槽名	说明
default	自定义内容（当不传 items 时使用）

Sources Ref

属性	说明	类型
nativeElement	组件根 DOM 元素	HTMLDivElement

SemanticType

root | title | content

Semantic DOM

Sources

• Ant Design X Vue
• Ant Design Vue

• root

  来源组件的根容器

• title

  标题区域容器

• content

  来源内容区域容器

主题变量（Design Token）

组件暂无自定义 Component Token，可通过全局 Design Token 定制。