https://antd-design-x-vue.netlify.app/

1<!DOCTYPE html>
2<html lang="en-US" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5<!-- This site is hosted on Netlify. Anyone can build and deploy a site
6     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=cb006e4e-afce-4c3e-9652-6f8a065b5b6e
7     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
8    <meta name="viewport" content="width=device-width,initial-scale=1">
9    <title>Ant Design X Vue</title>
10    <meta name="description" content="Ant Design X For Vue">
11    <meta name="generator" content="VitePress v1.5.0">
12    <link rel="preload stylesheet" href="/assets/style.Cmm6AGrc.css" as="style">
13    <link rel="preload stylesheet" href="/vp-icons.css" as="style">
14    
15    

15<script type="module" src="/assets/app.BiqZGm-U.js"></script>

15
16    <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
17    <link rel="modulepreload" href="/assets/chunks/theme.DoOlbyuc.js">
18    <link rel="modulepreload" href="/assets/chunks/framework.CRfA3hWN.js">
19    <link rel="modulepreload" href="/assets/index.md.JSi5StAS.lean.js">
20    <link rel="icon" href="/images/x-logo.svg">
21    

21<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"dark",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>

21
22    

22<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>

22
23  </head>
24  <body>
25    <div id="app"><!--[--><!--[--><!--[--><!--[--><!--[--><div class="Layout" data-v-553014fb><!--[--><!--]--><!--[--><span tabindex="-1" data-v-1acfc423></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-1acfc423> Skip to content </a><!--]--><!----><header class="VPNav" data-v-553014fb data-v-56a8e719><div class="VPNavBar" data-v-56a8e719 data-v-ffb6a34d><div class="wrapper" data-v-ffb6a34d><div class="container" data-v-ffb6a34d><div class="title" data-v-ffb6a34d><div class="VPNavBarTitle" data-v-ffb6a34d data-v-51430e44><a class="title" href="/" data-v-51430e44><!--[--><!--]--><!--[--><img class="VPImage logo" src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original" alt data-v-b1cf9f1e><!--]--><span data-v-51430e44>Ant Design X Vue</span><!--[--><!--]--></a></div></div><div class="content" data-v-ffb6a34d><div class="content-body" data-v-ffb6a34d><!--[--><!--]--><div class="VPNavBarSearch search" data-v-ffb6a34d><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-ffb6a34d data-v-4e306fa8><span id="main-nav-aria-label" class="visually-hidden" data-v-4e306fa8> Main Navigation </span><!--[--><!--[--><a class='VPLink link VPNavBarMenuLink' data-v-4e306fa8 data-v-cfc2fde8 href='/development/introduce' tabindex='0'><!--[--><span data-v-cfc2fde8>研发</span><!--]--></a><!--]--><!--[--><a class='VPLink link VPNavBarMenuLink' data-v-4e306fa8 data-v-cfc2fde8 href='/component/overview' tabindex='0'><!--[--><span data-v-cfc2fde8>组件</span><!--]--></a><!--]--><!--[--><a class='VPLink link VPNavBarMenuLink' data-v-4e306fa8 data-v-cfc2fde8 href='/playground/independent' tabindex='0'><!--[--><span data-v-cfc2fde8>演示</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-4e306fa8 data-v-44aa6036><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-44aa6036><span class="text" data-v-44aa6036><!----><span data-v-44aa6036>更多</span><span class="vpi-chevron-down text-icon" data-v-44aa6036></span></span></button><div class="menu" data-v-44aa6036><div class="VPMenu" data-v-44aa6036 data-v-23a1759c><div class="items" data-v-23a1759c><!--[--><!--[--><div class="VPMenuLink" data-v-23a1759c data-v-205ec197><a class="VPLink link vp-external-link-icon" href="https://x.ant.design/index-cn" target="_blank" rel="noreferrer" data-v-205ec197><!--[--><span data-v-205ec197>Ant Design X of React</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-23a1759c data-v-205ec197><a class="VPLink link vp-external-link-icon" href="https://www.antdv.com/components/overview-cn" target="_blank" rel="noreferrer" data-v-205ec197><!--[--><span data-v-205ec197>Ant Design Vue</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-ffb6a34d data-v-ba352aa2><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="true" data-v-ba352aa2 data-v-fecd86b4 data-v-4f1e0018><span class="check" data-v-4f1e0018><span class="icon" data-v-4f1e0018><!--[--><span class="vpi-sun sun" data-v-fecd86b4></span><span class="vpi-moon moon" data-v-fecd86b4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-ffb6a34d data-v-1bcdcf74 data-v-7acc1133><!--[--><a class="VPSocialLink no-icon" href="https://github.com/wzc520pyfm/ant-design-x-vue" aria-label="github" target="_blank" rel="noopener" data-v-7acc1133 data-v-97c6b96e><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-ffb6a34d data-v-ae934832 data-v-44aa6036><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-44aa6036><span class="vpi-more-horizontal icon" data-v-44aa6036></span></button><div class="menu" data-v-44aa6036><div class="VPMenu" data-v-44aa6036 data-v-23a1759c><!----><!--[--><!--[--><!----><div class="group" data-v-ae934832><div class="item appearance" data-v-ae934832><p class="label" data-v-ae934832>Appearance</p><div class="appearance-action" data-v-ae934832><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="true" data-v-ae934832 data-v-fecd86b4 data-v-4f1e0018><span class="check" data-v-4f1e0018><span class="icon" data-v-4f1e0018><!--[--><span class="vpi-sun sun" data-v-fecd86b4></span><span class="vpi-moon moon" data-v-fecd86b4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-ae934832><div class="item social-links" data-v-ae934832><div class="VPSocialLinks social-links-list" data-v-ae934832 data-v-7acc1133><!--[--><a class="VPSocialLink no-icon" href="https://github.com/wzc520pyfm/ant-design-x-vue" aria-label="github" target="_blank" rel="noopener" data-v-7acc1133 data-v-97c6b96e><span class="vpi-social-github"></span></a>

25<!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-ffb6a34d data-v-89874f16><span class="container" data-v-89874f16><span class="top" data-v-89874f16></span><span class="middle" data-v-89874f16></span><span class="bottom" data-v-89874f16></span></span></button></div></div></div></div><div class="divider" data-v-ffb6a34d><div class="divider-line" data-v-ffb6a34d></div></div></div><!----></header><!----><!----><div class="VPContent is-home" id="VPContent" data-v-553014fb data-v-e25e763a><div class="VPHome" data-v-e25e763a data-v-fbcb987c><!--[--><!--]--><div class="VPHero VPHomeHero" data-v-fbcb987c data-v-1fbf40e6><div class="container" data-v-1fbf40e6><div class="main" data-v-1fbf40e6><!--[--><!--]--><!--[--><h1 class="name" data-v-1fbf40e6><span class="clip" data-v-1fbf40e6>Ant Design X Vue</span></h1><p class="text" data-v-1fbf40e6>AI 体验新秩序</p><p class="tagline" data-v-1fbf40e6>Ant Design X For Vue。基于 RICH 设计范式，打造卓越 AI 界面解决方案，引领智能新体验。</p><!--]--><!--[--><!--]--><div class="actions" data-v-1fbf40e6><!--[--><div class="action" data-v-1fbf40e6><a class='VPButton medium brand' data-v-1fbf40e6 data-v-8db2458f href='/component/overview'>开始使用</a></div><div class="action" data-v-1fbf40e6><a class="VPButton medium alt" href="https://x.ant.design/docs/spec/introduce-cn" target="_blank" rel="noreferrer" data-v-1fbf40e6 data-v-8db2458f>设计语言</a></div><!--]--></div><!--[--><!--]--></div><div class="image" data-v-1fbf40e6><div class="image-container" data-v-1fbf40e6><div class="image-bg" data-v-1fbf40e6></div><!--[--><svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="150 100 600 600" width="900" height="900" preserveaspectratio="xMidYMid meet" style="width:100%;height:100%;transform:translate3d(0px, 0px, 0px);content-visibility:visible;" data-v-1fbf40e6><g clip-path="url(#__lottie_element_14)"><g clip-path="url(#__lottie_element_16)" transform="matrix(1,0,0,1,-540,0)" opacity="1" style="display:block;" class=""><g transform="matrix(0.9333299994468689,0,0,0.9333299994468689,741.6007080078125,442.7997131347656)" opacity="0.5" style="display:none;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path stroke="url(#__lottie_element_56)" stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke-opacity="1" stroke-width="1.2" d="M0 0"></path></g></g><g transform="matrix(0.8399999737739563,0,0,0.8399999737739563,772.43505859375,240.6540069580078)" opacity="0.5" style="display:none;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path stroke="url(#__lottie_element_52)" stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke-opacity="1" stroke-width="1.2" d="M0 0"></path></g></g><g transform="matrix(0,0.7559999823570251,-0.7559999823570251,0,936.1370239257812,95.88749694824219)" opacity="0.5" style="display:none;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path stroke="url(#__lottie_element_48)" stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke-opacity="1" stroke-width="1.2" d="M0 0"></path></g></g><g transform="matrix(0,0.680400013923645,-0.680400013923645,0,1180.6092529296875,120.86973571777344)" opacity="0.5" style="display:none;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path stroke="url(#__lottie_element_44)" stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke-opacity="1" stroke-width="1.2" d="M0 0"></path></g></g><g class="png" style="display:block;" transform="matrix(0.49984171986579895,0,0,0.49984171986579895,867.0557250976562,518.4012451171875)" opacity="0.9990504329105607"><image width="704px" height="180px" preserveAspectRatio="xMidYMid slice" xlink:href="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*sj5-SbD5N-QAAAAAAAAAAAAADgCCAQ/original"></image></g><g mask="url(#__lottie_element_35_1)" style="display:block;">

25<g class="png" transform="matrix(0.5035207271575928,0,0,0.5035207271575928,848.6726684570312,153.64657592773438)" opacity="0.6"><image width="754px" height="752px" preserveAspectRatio="xMidYMid slice" xlink:href="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*4lqPTowypyoAAAAAAAAAAAAADgCCAQ/original"></image></g></g><g class="png" style="display:block;" transform="matrix(0.5,0,0,0.5,816,154.97036743164062)" opacity="1"><image width="896px" height="762px" preserveAspectRatio="xMidYMid slice" xlink:href="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*FwIEQom15DsAAAAAAAAAAAAADgCCAQ/original"></image></g><g class="png" transform="matrix(0.5,0,0,0.5,948,247.97036743164062)" opacity="1" style="display:block;"><image width="380px" height="376px" preserveAspectRatio="xMidYMid slice" xlink:href="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*k0oYSZQMoBwAAAAAAAAAAAAADgCCAQ/original"></image></g><g class="png" style="display:block;" transform="matrix(0.5,0,0,0.5,1122,175.97036743164062)" opacity="1"><image width="240px" height="568px" preserveAspectRatio="xMidYMid slice" xlink:href="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*RW04QJvg4nwAAAAAAAAAAAAADgCCAQ/original"></image></g><g class="png" style="display:block;" transform="matrix(0.5,0,0,0.5,976,148.9708709716797)" opacity="1"><image width="266px" height="82px" preserveAspectRatio="xMidYMid slice" xlink:href="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eEyaRY2tKwsAAAAAAAAAAAAADgCCAQ/original"></image></g></g></g></svg><!--]--></div></div></div></div><!--[--><!--]--><!--[--><!--]--><div class="VPFeatures VPHomeFeatures" data-v-fbcb987c data-v-893ab865><div class="container" data-v-893ab865><div class="items" data-v-893ab865><!--[--><div class="grid-3 item" data-v-893ab865><div class="VPLink no-icon VPFeature" data-v-893ab865 data-v-e225fa21><!--[--><article class="box" data-v-e225fa21><!----><h2 class="title" data-v-e225fa21>AI 设计范式 - RICH</h2><p class="details" data-v-e225fa21>创造卓越 AI 产品体验</p><!----></article><!--]--></div></div><div class="grid-3 item" data-v-893ab865><div class="VPLink no-icon VPFeature" data-v-893ab865 data-v-e225fa21><!--[--><article class="box" data-v-e225fa21><!----><h2 class="title" data-v-e225fa21>AI 界面解决方案</h2><p class="details" data-v-e225fa21>基于RICH，全新 AGI 混合界面（Hybrid-UI）解决方案，完美融合 GUI 和自然会话交互。</p><!----></article><!--]--></div></div><div class="grid-3 item" data-v-893ab865><div class="VPLink no-icon VPFeature" data-v-893ab865 data-v-e225fa21><!--[--><article class="box" data-v-e225fa21><!----><h2 class="title" data-v-e225fa21>组件丰富，选用自如</h2><p class="details" data-v-e225fa21>Ant Design X Vue 全新 AI 组件 , 大量实用组件满足你的需求 , 灵活定制与拓展</p><!----></article><!--]--></div></div><!--]--></div></div></div><!--[--><!--]--><div class="vp-doc container" style="" data-v-fbcb987c data-v-09948b7d><!--[--><div style="position:relative;" data-v-fbcb987c><div></div></div><!--]--></div></div></div><!----><!--[--><!--]--></div><!--]--><!--]--><!--]--><!--]--><!--]--></div>
26    

26<script>window.__VP_HASH_MAP__=JSON.parse("{\"component_actions.md\":\"K0JN7tQN\",\"component_attachments.md\":\"CI04dt4x\",\"component_bubble.md\":\"DrHuT89V\",\"component_conversations.md\":\"B2TWBgDS\",\"component_overview.md\":\"Cdt3zuXC\",\"component_prompts.md\":\"BFXYwgwO\",\"component_sender.md\":\"B7b4iENp\",\"component_suggestion.md\":\"CABNwuSs\",\"component_thought-chain.md\":\"BGvHM9_G\",\"component_use-x-agent.md\":\"CDY5-7NC\",\"component_use-x-chat.md\":\"DuN_1WQM\",\"component_welcome.md\":\"DdCOs8Bd\",\"component_x-provider.md\":\"C6HVgb6Z\",\"component_x-request.md\":\"Cg_Zzpy0\",\"component_x-stream.md\":\"BOtlxPIe\",\"development_compatible-style.md\":\"C4RdYGOX\",\"development_introduce.md\":\"DmF3WgSp\",\"index.md\":\"JSi5StAS\",\"playground_copilot.md\":\"DlGG9D37\",\"playground_independent.md\":\"C8NgMNos\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Ant Design X Vue\",\"description\":\"Ant Design X For Vue\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":\"dark\",\"themeConfig\":{\"logo\":\"https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original\",\"nav\":[{\"text\":\"研发\",\"link\":\"/development/introduce\"},{\"text\":\"组件\",\"link\":\"/component/overview\"},{\"text\":\"演示\",\"link\":\"/playground/independent\"},{\"text\":\"更多\",\"items\":[{\"text\":\"Ant Design X of React\",\"link\":\"https://x.ant.design/index-cn\"},{\"text\":\"Ant Design Vue\",\"link\":\"https://www.antdv.com/components/overview-cn\"}]}],\"outline\":[2,3],\"sidebar\":{\"/development\":[{\"text\":\"Ant Design X of Vue\",\"link\":\"/development/introduce\"},{\"text\":\"样式兼容\",\"link\":\"/development/compatible-style\"}],\"/component/\":[{\"text\":\"总览\",\"link\":\"/component/overview\"},{\"text\":\"通用\",\"items\":[{\"text\":\"Bubble 对话气泡框\",\"link\":\"/component/bubble\"},{\"text\":\"Conversations 管理对话\",\"link\":\"/component/conversations\"}]},{\"text\":\"唤醒\",\"items\":[{\"text\":\"Welcome 欢迎\",\"link\":\"/component/welcome\"},{\"text\":\"Prompts 提示集\",\"link\":\"/component/prompts\"}]},{\"text\":\"表达\",\"items\":[{\"text\":\"Sender 输入框\",\"link\":\"/component/sender\"},{\"text\":\"Attachments 输入附件\",\"link\":\"/component/attachments\"},{\"text\":\"Suggestion 快捷指令\",\"link\":\"/component/suggestion\"}]},{\"text\":\"确认\",\"items\":[{\"text\":\"ThoughtChain 思维链\",\"link\":\"/component/thought-chain\"}]},{\"text\":\"反馈\",\"items\":[{\"text\":\"Actions 操作列表\",\"link\":\"/component/actions\"}]},{\"text\":\"工具\",\"items\":[{\"text\":\"useXAgent 模型调度\",\"link\":\"/component/use-x-agent\"},{\"text\":\"useXChat 数据管理\",\"link\":\"/component/use-x-chat\"},{\"text\":\"XStream 流\",\"link\":\"/component/x-stream\"},{\"text\":\"XRequest 请求\",\"link\":\"/component/x-request\"},{\"text\":\"XProvider 全局化配置\",\"link\":\"/component/x-provider\"}]}],\"/playground/\":[{\"text\":\"样板间\",\"items\":[{\"text\":\"独立式\",\"link\":\"/playground/independent\"},{\"text\":\"助手式\",\"link\":\"/playground/copilot\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/wzc520pyfm/ant-design-x-vue\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>

26
27    
28  </body>
29</html>