总览
ant-design-x-vue 是 @ant-design/x 的社区 Vue 实现。组件按 RICH 的交互阶段分组，顺序和 React 组件页一致。
通用组件
3Bubble 对话气泡
Conversations 管理对话
Notification 系统通知
唤醒组件
2Welcome 欢迎
Prompts 提示集
表达组件
3Attachments 输入附件
Sender 输入框
Suggestion 快捷指令
确认组件
3Think 思考过程
ThoughtChain 思维链
Sources 来源引用
反馈组件
2Actions 操作列表
FileCard 文件卡片
其他
1XProvider 全局化配置
ts
<script setup lang="tsx">
import {
Card,
Space,
Typography,
Row,
Col,
Input,
Tag,
Affix,
} from 'ant-design-vue';
import {
MessageOutlined,
CommentOutlined,
StarOutlined,
BulbOutlined,
PaperClipOutlined,
SendOutlined,
ThunderboltOutlined,
NodeIndexOutlined,
GlobalOutlined,
SearchOutlined,
BellOutlined,
LinkOutlined,
FileOutlined,
} from '@ant-design/icons-vue';
import { ref, computed } from 'vue';
import { useData } from 'vitepress';
defineOptions({ name: 'AXOverviewDemo' });
const { Title, Paragraph } = Typography;
// 搜索功能
const searchValue = ref('');
// 暗黑模式
const { isDark } = useData();
// 组件数据
const allComponents = [
{
id: 'bubble',
category: '通用组件',
title: 'Bubble 对话气泡',
description: '用于展示对话消息的气泡组件，支持多种样式和自定义内容',
icon: <CommentOutlined style={{ color: '#52c41a' }} />,
content: 'bubble-demo',
},
{
id: 'conversations',
category: '通用组件',
title: 'Conversations 管理对话',
description: '管理多个对话会话的组件，支持分组、排序和交互操作',
icon: <MessageOutlined style={{ color: '#722ed1' }} />,
content: 'conversations-demo',
},
{
id: 'notification',
category: '通用组件',
title: 'Notification 系统通知',
description: '系统级通知与提醒，用于展示重要状态变化',
icon: <BellOutlined style={{ color: '#fa541c' }} />,
content: 'notification-demo',
},
{
id: 'welcome',
category: '唤醒组件',
title: 'Welcome 欢迎',
description: 'AI 应用的欢迎界面组件，用于引导用户开始对话',
icon: <StarOutlined style={{ color: '#fa8c16' }} />,
content: 'welcome-demo',
},
{
id: 'prompts',
category: '唤醒组件',
title: 'Prompts 提示集',
description: '预设提示词组件，帮助用户快速选择对话主题',
icon: <BulbOutlined style={{ color: '#ffd700' }} />,
content: 'prompts-demo',
},
{
id: 'attachments',
category: '表达组件',
title: 'Attachments 输入附件',
description: '处理文件上传和附件管理的组件，支持多种文件类型',
icon: <PaperClipOutlined style={{ color: '#eb2f96' }} />,
content: 'attachments-demo',
},
{
id: 'sender',
category: '表达组件',
title: 'Sender 输入框',
description: '消息输入组件，支持文本输入、语音识别等功能',
icon: <SendOutlined style={{ color: '#1890ff' }} />,
content: 'sender-demo',
},
{
id: 'suggestion',
category: '表达组件',
title: 'Suggestion 快捷指令',
description: '快捷建议组件，为用户提供预设的操作选项',
icon: <ThunderboltOutlined style={{ color: '#f5222d' }} />,
content: 'suggestion-demo',
},
{
id: 'think',
category: '确认组件',
title: 'Think 思考过程',
description: '展示模型深度思考过程的折叠面板',
icon: <BulbOutlined style={{ color: '#13c2c2' }} />,
content: 'think-demo',
},
{
id: 'thought-chain',
category: '确认组件',
title: 'ThoughtChain 思维链',
description: '展示 AI 思考过程的组件，可视化推理步骤',
icon: <NodeIndexOutlined style={{ color: '#722ed1' }} />,
content: 'thought-chain-demo',
},
{
id: 'sources',
category: '确认组件',
title: 'Sources 来源引用',
description: '展示回答引用来源，便于核对依据',
icon: <LinkOutlined style={{ color: '#1677ff' }} />,
content: 'sources-demo',
},
{
id: 'actions',
category: '反馈组件',
title: 'Actions 操作列表',
description: '对生成结果进行复制、反馈等快捷操作',
icon: <ThunderboltOutlined style={{ color: '#eb2f96' }} />,
content: 'actions-demo',
},
{
id: 'file-card',
category: '反馈组件',
title: 'FileCard 文件卡片',
description: '展示生成或引用的文件卡片信息',
icon: <FileOutlined style={{ color: '#fa8c16' }} />,
content: 'file-card-demo',
},
{
id: 'x-provider',
category: '其他',
title: 'XProvider 全局化配置',
description: '全局配置提供者，统一管理应用级别的设置',
icon: <GlobalOutlined style={{ color: '#722ed1' }} />,
content: 'x-provider-demo',
},
];
// 过滤组件
const filteredComponents = computed(() => {
if (!searchValue.value) return allComponents;
const search = searchValue.value.toLowerCase();
return allComponents.filter(
(component) =>
component.title.toLowerCase().includes(search) ||
component.description.toLowerCase().includes(search) ||
component.category.toLowerCase().includes(search),
);
});
// 按分类分组
const groupedComponents = computed(() => {
const groups: Record<string, typeof allComponents> = {};
filteredComponents.value.forEach((component) => {
if (!groups[component.category]) {
groups[component.category] = [];
}
groups[component.category].push(component);
});
return groups;
});
// 获取组件显示文本
const getComponentDisplayText = (component: any) => {
const textMap: Record<string, string> = {
conversations: '对话管理界面',
attachments: '文件上传区域',
notification: '系统通知',
think: '思考过程',
sources: '来源引用',
actions: '结果操作',
'file-card': '文件卡片',
'x-provider': '全局配置管理',
};
return textMap[component.id] || component.title;
};
// 获取组件子文本
const getComponentSubText = (component: any) => {
const subTextMap: Record<string, string> = {
conversations: '支持会话分组和排序',
attachments: '支持多种文件类型',
'x-provider': '统一管理应用级别设置',
};
return subTextMap[component.id] || '';
};
// 组件路由映射
const componentRoutes: Record<string, string> = {
bubble: '/component/bubble',
conversations: '/component/conversations',
notification: '/component/notification',
welcome: '/component/welcome',
prompts: '/component/prompts',
attachments: '/component/attachments',
sender: '/component/sender',
suggestion: '/component/suggestion',
think: '/component/think',
'thought-chain': '/component/thought-chain',
sources: '/component/sources',
actions: '/component/actions',
'file-card': '/component/file-card',
'x-provider': '/component/x-provider',
};
// 预览图映射：与 React x.ant.design 保持一致，直接使用 React frontmatter 的
// cover / coverDark CDN 地址（浅色 + 暗黑），避免本地 SVG 缺失时退化为图标占位。
const componentImages: Record<string, { cover: string; coverDark?: string }> = {
bubble: {
cover: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*rHIYQIL1X-QAAAAAAAAAAAAADgCCAQ/original',
coverDark: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*uaGhTY1-LL0AAAAAAAAAAAAADgCCAQ/original',
},
conversations: {
cover: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*Oj-bTbVXtpQAAAAAAAAAAAAADgCCAQ/original',
coverDark: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*qwdtSKWXeikAAAAAAAAAAAAADgCCAQ/original',
},
notification: {
cover: 'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cRmqTY4nKPEAAAAAAAAAAAAADrJ8AQ/original',
coverDark: 'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*W3RmSov-xVMAAAAAAAAAAAAADrJ8AQ/original',
},
welcome: {
cover: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*sSjhQ6q2-Z0AAAAAAAAAAAAADgCCAQ/original',
coverDark: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*-gLqQpan1NAAAAAAAAAAAAAADgCCAQ/original',
},
prompts: {
cover: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*UfhXRamlAf0AAAAAAAAAAAAADgCCAQ/original',
coverDark: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*3CN5RLKP0X4AAAAAAAAAAAAADgCCAQ/original',
},
attachments: {
cover: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*5l2oSKBXatAAAAAAAAAAAAAADgCCAQ/original',
coverDark: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*N8QHQJhgfbEAAAAAAAAAAAAADgCCAQ/original',
},
sender: {
cover: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*OwTOS6wqFIsAAAAAAAAAAAAADgCCAQ/original',
coverDark: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*cOfrS4fVkOMAAAAAAAAAAAAADgCCAQ/original',
},
suggestion: {
cover: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*4vEeSJ2e9xgAAAAAAAAAAAAADgCCAQ/original',
coverDark: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*cahuSJ4VxvoAAAAAAAAAAAAADgCCAQ/original',
},
think: {
cover: 'https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/kXURQYCTEncAAAAAQCAAAAgADtFMAQFr/original',
coverDark: 'https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/OMCvQZVW3eUAAAAAQCAAAAgADtFMAQFr/original',
},
'thought-chain': {
cover: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*GaspS5T6proAAAAAAAAAAAAADgCCAQ/original',
coverDark: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*siL-Qpl794sAAAAAAAAAAAAADgCCAQ/original',
},
sources: {
cover: 'https://mdn.alipayobjects.com/huamei_b00jk5/afts/img/A*3nEPRYJbNQgAAAAAQFAAAAgAegitAQ/original',
coverDark: 'https://mdn.alipayobjects.com/huamei_b00jk5/afts/img/A*_7mMRrQVcXcAAAAAQEAAAAgAegitAQ/original',
},
actions: {
cover: 'https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/DAQYQqFa5n0AAAAAQFAAAAgADtFMAQFr/original',
coverDark: 'https://mdn.alipayobjects.com/huamei_lkxviz/afts/img/bcXhRphVOuIAAAAAQFAAAAgADtFMAQFr/original',
},
'file-card': {
cover: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*pJrtTaf-bWAAAAAAAAAAAAAADgCCAQ/original',
coverDark: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*6ySvTqb7XhkAAAAAAAAAAAAADgCCAQ/original',
},
'x-provider': {
cover: 'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NVKORa7BCVwAAAAAAAAAAAAADrJ8AQ/original',
coverDark: 'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YC4ERpGAddoAAAAAAAAAAAAADrJ8AQ/original',
},
};
const getComponentImageSrc = (component: any) => {
const images = componentImages[component.id];
if (!images) return '';
return (isDark.value && images.coverDark) || images.cover;
};
// 处理组件点击
const handleComponentClick = (component: any) => {
const route = componentRoutes[component.id];
if (route) {
window.location.href = route;
} else {
console.log('未找到路由:', component.id);
}
};
const Demo = () => {
return (
<div>
<Affix offsetTop={54}>
<div
style={{
padding: '16px 0',
marginBottom: '24px',
}}
>
<div style={{ margin: '0 auto' }}>
<Input
v-model:value={searchValue.value}
placeholder="搜索组件名称、描述或分类..."
size="large"
allowClear
v-slots={{
prefix: () => <SearchOutlined style={{ color: '#bfbfbf' }} />,
}}
/>
</div>
</div>
</Affix>
{Object.entries(groupedComponents.value).map(([category, components]) => (
<div key={category}>
<div
style={{
display: 'flex',
alignItems: 'center',
marginBottom: '24px',
}}
>
<div style={{ fontSize: '24px', fontWeight: '600' }}>{category}</div>
<Tag style={{ marginLeft: '8px' }}>{components.length}</Tag>
</div>
<Row gutter={[16, 24]} style={{ marginBottom: '48px' }}>
{components.map((component) => (
<Col key={component.id} xs={24} lg={12}>
<Card size="small" title={component.title} bodyStyle={{ padding: '16px' }} hoverable={true} class="overview-card">
<div
style={{
/* React ComponentOverview uses a fixed 152px centered image box. */
height: '152px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
onClick={() => handleComponentClick(component)}
>
<div style={{ textAlign: 'center', width: '100%' }}>
{getComponentImageSrc(component) ? (
<img
src={getComponentImageSrc(component)}
alt={component.title}
style={{
maxWidth: '100%',
maxHeight: '152px',
objectFit: 'contain',
}}
/>
) : (
<div style={{ color: '#666' }}>
<div style={{ fontSize: '48px' }}>
{component.icon}
</div>
<div style={{ fontWeight: '500' }}>
{getComponentDisplayText(component)}
</div>
{getComponentSubText(component) && (
<div style={{ fontSize: '12px', marginTop: '4px' }}>
{getComponentSubText(component)}
</div>
)}
</div>
)}
</div>
</div>
</Card>
</Col>
))}
</Row>
</div>
))}
{Object.keys(groupedComponents.value).length === 0 && (
<div style={{ textAlign: 'center', padding: '60px 0', color: '#999' }}>
<SearchOutlined style={{ fontSize: '48px', marginBottom: '16px' }} />
<div style={{ fontSize: '16px' }}>未找到匹配的组件</div>
<div style={{ fontSize: '14px', marginTop: '8px' }}>请尝试其他关键词</div>
</div>
)}
</div>
);
};
defineRender(() => {
return <Demo />;
});
</script>隐藏源代码
数据流在 X SDK，富文本在 X Markdown。分组与 @ant-design/x@2.0.0 的组件导出一致。