PageSourceSearch

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

html antd-design-x-vue.netlify.app collected 2026-10-03 10:27:00 UTC 141,020 bytes, 376 lines download raw bytes

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/component_overview.md.Cdt3zuXC.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 hidden_aside" 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 has-sidebar" 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 active' 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="VPLocalNav has-sidebar empty" data-v-553014fb data-v-97d01931><div class="container" data-v-97d01931><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-97d01931><span class="vpi-align-left menu-icon" data-v-97d01931></span><span class="menu-text" data-v-97d01931>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-97d01931 data-v-7cbc86f7><button data-v-7cbc86f7>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-553014fb data-v-b304f0b8><div class="curtain" data-v-b304f0b8></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b304f0b8><span class="visually-hidden" id="sidebar-aria-label" data-v-b304f0b8> Sidebar Navigation </span><!--[--><!--[--><div style="margin-top:16px;"><div class="ant-descriptions css-13gz7x"><!----><div class="ant-descriptions-view"><table><tbody><!--[--><tr class="ant-descriptions-row"><!--[--><td class="ant-descriptions-item" colspan="3" style=""><div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label" style="">风格偏好</span><span class="ant-descriptions-item-content" style=""><!--[--><button style="background:#424242;" type="button" role="switch" aria-checked="false" class="ant-switch css-13gz7x"><div class="ant-switch-handle"><!----></div><span class="ant-switch-inner"><span class="ant-switch-inner-checked">tsx</span><span class="ant-switch-inner-unchecked">setup</span></span></button><!--]--></span></div></td><!--]--></tr><!--]--></tbody></table></div></div></div><!--]--><!--]--><!--[--><div class="no-transition group" data-v-5ddbaa3e><section class="VPSidebarItem level-0 has-active" data-v-5ddbaa3e data-v-ee2b6304><!----><div class="items" data-v-ee2b6304><!--[--><div class="VPSidebarItem level-1 is-link" data-v-ee2b6304 data-v-ee2b6304><div class="item" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><a class='VPLink link link' data-v-ee2b6304 href='/component/overview'><!--[--><p class="text" data-v-ee2b6304>总览</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-5ddbaa3e><section class="VPSidebarItem level-0" data-v-5ddbaa3e data-v-ee2b6304><div class="item" role="button" tabindex="0" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><h2 class="text" data-v-ee2b6304>通用</h2><!----></div><div class="items" data-v-ee2b6304><!--[--><div class="VPSidebarItem level-1 is-link" data-v-ee2b6304 data-v-ee2b6304><div class="item" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><a class='VPLink link link' data-v-ee2b6304 href='/component/bubble'><!--[--><p class="text" data-v-ee2b6304>Bubble 对话气泡框</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-ee2b6304 data-v-ee2b6304><div class="item" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><a class='VPLink link link' data-v-ee2b6304 href='/component/conversations'><!--[--><p class="text" data-v-ee2b6304>Conversations 管理对话</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-5ddbaa3e><section class="VPSidebarItem level-0" data-v-5ddbaa3e data-v-ee2b6304><div class="item" role="button" tabindex="0" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><h2 class="text" data-v-ee2b6304>唤醒</h2><!----></div><div class="items" data-v-ee2b6304><!--[--><div class="VPSidebarItem level-1 is-link" data-v-ee2b6304 data-v-ee2b6304><div class="item" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><a class='VPLink link link' data-v-ee2b6304 href='/component/welcome'><!--[--><p class="text" data-v-ee2b6304>Welcome 欢迎</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-ee2b6304 data-v-ee2b6304><div class="item" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><a class='VPLink link link' data-v-ee2b6304 href='/component/prompts'><!--[--><p class="text" data-v-ee2b6304>Prompts 提示集</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-5ddbaa3e><section class="VPSidebarItem level-0" data-v-5ddbaa3e data-v-ee2b6304><div class="item" role="button" tabindex="0" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><h2 class="text" data-v-ee2b6304>表达</h2><!----></div><div class="items" data-v-ee2b6304><!--[--><div class="VPSidebarItem level-1 is-link" data-v-ee2b6304 data-v-ee2b6304><div class="item" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><a class='VPLink link link' data-v-ee2b6304 href='/component/sender'><!--[--><p class="text" data-v-ee2b6304>Sender 输入框</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-ee2b6304 data-v-ee2b6304><div class="item" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><a class='VPLink link link' data-v-ee2b6304 href='/component/attachments'><!--[--><p class="text" data-v-ee2b6304>Attachments 输入附件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-ee2b6304 data-v-ee2b6304><div class="item" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><a class='VPLink link link' data-v-ee2b6304 href='/component/suggestion'><!--[--><p class="text" data-v-ee2b6304>Suggestion 快捷指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-5ddbaa3e><section class="VPSidebarItem level-0" data-v-5ddbaa3e data-v-ee2b6304><div class="item" role="button" tabindex="0" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><h2 class="text" data-v-ee2b6304>确认</h2><!----></div><div class="items" data-v-ee2b6304><!--[--><div class="VPSidebarItem level-1 is-link" data-v-ee2b6304 data-v-ee2b6304><div class="item" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><a class='VPLink link link' data-v-ee2b6304 href='/component/thought-chain'><!--[--><p class="text" data-v-ee2b6304>ThoughtChain 思维链</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-5ddbaa3e><section class="VPSidebarItem level-0" data-v-5ddbaa3e data-v-ee2b6304><div class="item" role="button" tabindex="0" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><h2 class="text" data-v-ee2b6304>反馈</h2><!----></div><div class="items" data-v-ee2b6304><!--[--><div class="VPSidebarItem level-1 is-link" data-v-ee2b6304 data-v-ee2b6304><div class="item" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><a class='VPLink link link' data-v-ee2b6304 href='/component/actions'><!--[--><p class="text" data-v-ee2b6304>Actions 操作列表</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-5ddbaa3e><section class="VPSidebarItem level-0" data-v-5ddbaa3e data-v-ee2b6304><div class="item" role="button" tabindex="0" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><h2 class="text" data-v-ee2b6304>工具</h2><!----></div><div class="items" data-v-ee2b6304><!--[--><div class="VPSidebarItem level-1 is-link" data-v-ee2b6304 data-v-ee2b6304><div class="item" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><a class='VPLink link link' data-v-ee2b6304 href='/component/use-x-agent'><!--[--><p class="text" data-v-ee2b6304>useXAgent 模型调度</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-ee2b6304 data-v-ee2b6304><div class="item" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><a class='VPLink link link' data-v-ee2b6304 href='/component/use-x-chat'><!--[--><p class="text" data-v-ee2b6304>useXChat 数据管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-ee2b6304 data-v-ee2b6304><div class="item" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><a class='VPLink link link' data-v-ee2b6304 href='/component/x-stream'><!--[--><p class="text" data-v-ee2b6304>XStream 流</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-ee2b6304 data-v-ee2b6304><div class="item" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><a class='VPLink link link' data-v-ee2b6304 href='/component/x-request'><!--[--><p class="text" data-v-ee2b6304>XRequest 请求</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-ee2b6304 data-v-ee2b6304><div class="item" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><a class='VPLink link link' data-v-ee2b6304 href='/component/x-provider'><!--[--><p class="text" data-v-ee2b6304>XProvider 全局化配置</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-553014fb data-v-e25e763a><div class="VPDoc has-sidebar has-aside" data-v-e25e763a data-v-7b344cb4><!--[--><!--]--><div class="container" data-v-7b344cb4><div class="aside" data-v-7b344cb4><div class="aside-curtain" data-v-7b344cb4></div><div class="aside-container" data-v-7b344cb4><div class="aside-content" data-v-7b344cb4><div class="VPDocAside" data-v-7b344cb4 data-v-91e68ad3><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-91e68ad3 data-v-62a116a2><div class="content" data-v-62a116a2><div class="outline-marker" data-v-62a116a2></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-62a116a2>On this page</div><ul class="VPDocOutlineItem root" data-v-62a116a2 data-v-3fe61cae><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-91e68ad3></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-7b344cb4><div class="content-container" data-v-7b344cb4><!--[--><!--]--><main class="main" data-v-7b344cb4><div style="position:relative;" class="vp-doc _component_overview" data-v-7b344cb4><div>
25<h1 id="总览" tabindex="-1">总览 <a class="header-anchor" href="#总览" aria-label="Permalink to &quot;总览&quot;">​</a></h1><p><code>ant-design-x-vue</code> 是 <code>@ant-design/x</code> 的 Vue 实现,是一个专注于 Vue 生态的先进 AI 组件库,旨在简化与人工智能集成的开发过程。我们的库包括高度定制化的 AI 组件,允许开发者轻松地将对话 AI 集成到他们的应用中。除了丰富的 UI 组件,<code>ant-design-x-vue</code> 还提供了一揽子 API 解决方案,支持开发者通过令牌认证直接接入现有 AI 服务,无缝衔接与 AI 的对话和交互。无论是建立智能聊天应用、提升用户交互体验还是加快 AI 能力的集成,<code>ant-design-x-vue</code> 都是 Vue 开发者进入 AI 世界的理想伙伴。</p><!--[--><div style="margin-top:16px;margin-bottom:16px;" data-v-f2775be5></div><!--[--><!--[--><!--[--><!--[--><!--[--><div class="example" data-v-f2775be5><div class="example-showcase" data-v-f2775be5><!--[--><div><div data-measure-status="0"><!----><div class="css-13gz7x" style=""><!--[--><div style="padding:16px 0;margin-bottom:24px;"><div style="margin:0 auto;"><span class="ant-input-affix-wrapper ant-input-affix-wrapper-lg css-13gz7x" style=""><span class="ant-input-prefix"><!--[--><span role="img" aria-label="search" style="color:#bfbfbf;" class="anticon anticon-search"><svg focusable="false" style="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg><!----></span><!--]--></span><input type="text" value class="ant-input ant-input-lg css-13gz7x" placeholder="搜索组件名称、描述或分类..." style=""><span class="ant-input-suffix"><span class="ant-input-clear-icon-hidden ant-input-clear-icon" role="button" tabindex="-1"><!--[--><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" style="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" fill-rule="evenodd" viewBox="64 64 896 896"><path d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"></path></svg><!----></span><!--]--></span><!----></span></span></div></div><!--]--></div></div><!--[--><div><div style="display:flex;align-items:center;margin-bottom:24px;"><div style="font-size:24px;font-weight:600;">通用组件</div><span style="margin-left:8px;" class="ant-tag css-13gz7x"><!--[-->2<!--]--><!----></span></div><div style="margin-left:-8px;margin-right:-8px;margin-top:-12px;margin-bottom:48px;" class="ant-row css-13gz7x"><!--[--><!--[--><div class="ant-col ant-col-xs-24 ant-col-lg-12 css-13gz7x" style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px;"><!--[--><div class="ant-card css-13gz7x ant-card-bordered ant-card-hoverable ant-card-small overview-card"><div class="ant-card-head" style=""><div class="ant-card-head-wrapper"><div class="ant-card-head-title">Bubble 对话气泡</div><!----></div><!----></div><!----><div class="ant-card-body" style="padding:16px;"><!--[--><div style="min-height:200px;display:flex;align-items:center;justify-content:center;"><div style="text-align:center;width:100%;">
25<img src="/images/Bubble-dark.svg" alt="Bubble 对话气泡" style="max-width:100%;height:160px;object-fit:contain;"></div></div><!--]--></div><!----></div><!--]--></div><div class="ant-col ant-col-xs-24 ant-col-lg-12 css-13gz7x" style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px;"><!--[--><div class="ant-card css-13gz7x ant-card-bordered ant-card-hoverable ant-card-small overview-card"><div class="ant-card-head" style=""><div class="ant-card-head-wrapper"><div class="ant-card-head-title">Conversations 管理对话</div><!----></div><!----></div><!----><div class="ant-card-body" style="padding:16px;"><!--[--><div style="min-height:200px;display:flex;align-items:center;justify-content:center;"><div style="text-align:center;width:100%;"><img src="/images/Conversations-dark.svg" alt="Conversations 管理对话" style="max-width:100%;height:160px;object-fit:contain;"></div></div><!--]--></div><!----></div><!--]--></div><!--]--><!--]--></div></div><div><div style="display:flex;align-items:center;margin-bottom:24px;"><div style="font-size:24px;font-weight:600;">唤醒组件</div><span style="margin-left:8px;" class="ant-tag css-13gz7x"><!--[-->2<!--]--><!----></span></div><div style="margin-left:-8px;margin-right:-8px;margin-top:-12px;margin-bottom:48px;" class="ant-row css-13gz7x"><!--[--><!--[--><div class="ant-col ant-col-xs-24 ant-col-lg-12 css-13gz7x" style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px;"><!--[--><div class="ant-card css-13gz7x ant-card-bordered ant-card-hoverable ant-card-small overview-card"><div class="ant-card-head" style=""><div class="ant-card-head-wrapper"><div class="ant-card-head-title">Welcome 欢迎</div><!----></div><!----></div><!----><div class="ant-card-body" style="padding:16px;"><!--[--><div style="min-height:200px;display:flex;align-items:center;justify-content:center;"><div style="text-align:center;width:100%;"><img src="/images/Welcome-dark.svg" alt="Welcome 欢迎" style="max-width:100%;height:160px;object-fit:contain;"></div></div><!--]--></div><!----></div><!--]--></div><div class="ant-col ant-col-xs-24 ant-col-lg-12 css-13gz7x" style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px;"><!--[--><div class="ant-card css-13gz7x ant-card-bordered ant-card-hoverable ant-card-small overview-card"><div class="ant-card-head" style=""><div class="ant-card-head-wrapper"><div class="ant-card-head-title">Prompts 提示集</div><!----></div><!----></div><!----><div class="ant-card-body" style="padding:16px;"><!--[--><div style="min-height:200px;display:flex;align-items:center;justify-content:center;"><div style="text-align:center;width:100%;"><img src="/images/Prompts-dark.svg" alt="Prompts 提示集" style="max-width:100%;height:160px;object-fit:contain;"></div></div><!--]--></div><!----></div><!--]--></div><!--]--><!--]--></div></div><div><div style="display:flex;align-items:center;margin-bottom:24px;"><div style="font-size:24px;font-weight:600;">表达组件</div><span style="margin-left:8px;" class="ant-tag css-13gz7x"><!--[-->3<!--]--><!----></span></div><div style="margin-left:-8px;margin-right:-8px;margin-top:-12px;margin-bottom:48px;" class="ant-row css-13gz7x"><!--[--><!--[--><div class="ant-col ant-col-xs-24 ant-col-lg-12 css-13gz7x" style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px;"><!--[--><div class="ant-card css-13gz7x ant-card-bordered ant-card-hoverable ant-card-small overview-card"><div class="ant-card-head" style=""><div class="ant-card-head-wrapper"><div class="ant-card-head-title">Attachments 输入附件</div><!----></div><!----></div><!----><div class="ant-card-body" style="padding:16px;"><!--[--><div style="min-height:200px;display:flex;align-items:center;justify-content:center;"><div style="text-align:center;width:100%;"><img src="/images/Attachments-dark.svg" alt="Attachments 输入附件" style="max-width:100%;height:160px;object-fit:contain;"></div></div><!--]--></div><!----></div><!--]--></div><div class="ant-col ant-col-xs-24 ant-col-lg-12 css-13gz7x" style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px;"><!--[--><div class="ant-card css-13gz7x ant-card-bordered ant-card-hoverable ant-card-small overview-card"><div class="ant-card-head" style=""><div class="ant-card-head-wrapper"><div class="ant-card-head-title">Sender 输入框</div><!----></div><!----></div><!----><div class="ant-card-body" style="padding:16px;"><!--[--><div style="min-height:200px;display:flex;align-items:center;justify-content:center;"><div style="text-align:center;width:100%;"><img src="/images/Sender-dark.svg" alt="Sender 输入框" style="max-width:100%;height:160px;object-fit:contain;"></div></div><!--]--></div><!----></div><!--]--></div><div class="ant-col ant-col-xs-24 ant-col-lg-12 css-13gz7x" style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px;"><!--[--><div class="ant-card css-13gz7x ant-card-bordered ant-card-hoverable ant-card-small overview-card"><div class="ant-card-head" style=""><div class="ant-card-head-wrapper"><div class="ant-card-head-title">Suggestion 快捷指令</div><!----></div><!----></div><!----><div class="ant-card-body" style="padding:16px;"><!--[--><div style="min-height:200px;display:flex;align-items:center;justify-content:center;"><div style="text-align:center;width:100%;"><img src="/images/Suggestion-dark.svg" alt="Suggestion 快捷指令" style="max-width:100%;height:160px;object-fit:contain;"></div></div><!--]--></div><!----></div><!--]--></div><!--]--><!--]--></div></div><div><div style="display:flex;align-items:center;margin-bottom:24px;"><div style="font-size:24px;font-weight:600;">确认组件</div><span style="margin-left:8px;" class="ant-tag css-13gz7x"><!--[-->1<!--]--><!----></span></div><div style="margin-left:-8px;margin-right:-8px;margin-top:-12px;margin-bottom:48px;" class="ant-row css-13gz7x"><!--[--><!--[--><div class="ant-col ant-col-xs-24 ant-col-lg-12 css-13gz7x" style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px;"><!--[--><div class="ant-card css-13gz7x ant-card-bordered ant-card-hoverable ant-card-small overview-card"><div class="ant-card-head" style=""><div class="ant-card-head-wrapper"><div class="ant-card-head-title">ThoughtChain 思维链</div><!----></div><!----></div><!----><div class="ant-card-body" style="padding:16px;"><!--[--><div style="min-height:200px;display:flex;align-items:center;justify-content:center;"><div style="text-align:center;width:100%;"><img src="/images/ThoughtChain-dark.svg" alt="ThoughtChain 思维链" style="max-width:100%;height:160px;object-fit:contain;"></div></div><!--]--></div><!----></div><!--]--></div><!--]--><!--]--></div></div><div><div style="display:flex;align-items:center;margin-bottom:24px;"><div style="font-size:24px;font-weight:600;">工具组件</div><span style="margin-left:8px;" class="ant-tag css-13gz7x"><!--[-->5<!--]--><!----></span></div><div style="margin-left:-8px;margin-right:-8px;margin-top:-12px;margin-bottom:48px;" class="ant-row css-13gz7x"><!--[--><!--[--><div class="ant-col ant-col-xs-24 ant-col-lg-12 css-13gz7x" style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px;"><!--[--><div class="ant-card css-13gz7x ant-card-bordered ant-card-hoverable ant-card-small overview-card"><div class="ant-card-head" style=""><div class="ant-card-head-wrapper"><div class="ant-card-head-title">useXAgent</div><!----></div><!----></div><!----><div class="ant-card-body" style="padding:16px;"><!--[--><div style="min-height:200px;display:flex;align-items:center;justify-content:center;"><div style="text-align:center;width:100%;"><img src="/images/useXAgent-dark.svg" alt="useXAgent" style="max-width:100%;height:160px;object-fit:contain;"></div></div><!--]--></div><!----></div><!--]--></div><div class="ant-col ant-col-xs-24 ant-col-lg-12 css-13gz7x" style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px;"><!--[--><div class="ant-card css-13gz7x ant-card-bordered ant-card-hoverable ant-card-small overview-card"><div class="ant-card-head" style=""><div class="ant-card-head-wrapper"><div class="ant-card-head-title">
25useXChat</div><!----></div><!----></div><!----><div class="ant-card-body" style="padding:16px;"><!--[--><div style="min-height:200px;display:flex;align-items:center;justify-content:center;"><div style="text-align:center;width:100%;"><img src="/images/useXChat-dark.svg" alt="useXChat" style="max-width:100%;height:160px;object-fit:contain;"></div></div><!--]--></div><!----></div><!--]--></div><div class="ant-col ant-col-xs-24 ant-col-lg-12 css-13gz7x" style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px;"><!--[--><div class="ant-card css-13gz7x ant-card-bordered ant-card-hoverable ant-card-small overview-card"><div class="ant-card-head" style=""><div class="ant-card-head-wrapper"><div class="ant-card-head-title">XStream</div><!----></div><!----></div><!----><div class="ant-card-body" style="padding:16px;"><!--[--><div style="min-height:200px;display:flex;align-items:center;justify-content:center;"><div style="text-align:center;width:100%;"><img src="/images/XStream-dark.svg" alt="XStream" style="max-width:100%;height:160px;object-fit:contain;"></div></div><!--]--></div><!----></div><!--]--></div><div class="ant-col ant-col-xs-24 ant-col-lg-12 css-13gz7x" style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px;"><!--[--><div class="ant-card css-13gz7x ant-card-bordered ant-card-hoverable ant-card-small overview-card"><div class="ant-card-head" style=""><div class="ant-card-head-wrapper"><div class="ant-card-head-title">XRequest</div><!----></div><!----></div><!----><div class="ant-card-body" style="padding:16px;"><!--[--><div style="min-height:200px;display:flex;align-items:center;justify-content:center;"><div style="text-align:center;width:100%;"><img src="/images/XRequest-dark.svg" alt="XRequest" style="max-width:100%;height:160px;object-fit:contain;"></div></div><!--]--></div><!----></div><!--]--></div><div class="ant-col ant-col-xs-24 ant-col-lg-12 css-13gz7x" style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px;"><!--[--><div class="ant-card css-13gz7x ant-card-bordered ant-card-hoverable ant-card-small overview-card"><div class="ant-card-head" style=""><div class="ant-card-head-wrapper"><div class="ant-card-head-title">XProvider 全局化配置</div><!----></div><!----></div><!----><div class="ant-card-body" style="padding:16px;"><!--[--><div style="min-height:200px;display:flex;align-items:center;justify-content:center;"><div style="text-align:center;width:100%;"><img src="/images/XProvider-dark.svg" alt="XProvider 全局化配置" style="max-width:100%;height:160px;object-fit:contain;"></div></div><!--]--></div><!----></div><!--]--></div><!--]--><!--]--></div></div><!--]--><!----></div><!--]--><!----></div><div style="margin:0;" class="ant-divider css-13gz7x ant-divider-horizontal" role="separator" data-v-f2775be5><!----></div><div class="op-btns" data-v-f2775be5><!--[--><span role="link" aria-label="thunderbolt" class="anticon anticon-thunderbolt op-btn" tabindex="0" data-v-f2775be5><svg focusable="false" style="" data-icon="thunderbolt" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M848 359.3H627.7L825.8 109c4.1-5.3.4-13-6.3-13H436c-2.8 0-5.5 1.5-6.9 4L170 547.5c-3.1 5.3.7 12 6.9 12h174.4l-89.4 357.6c-1.9 7.8 7.5 13.3 13.3 7.7L853.5 373c5.2-4.9 1.7-13.7-5.5-13.7zM378.2 732.5l60.3-241H281.1l189.6-327.4h224.6L487 427.4h211L378.2 732.5z"></path></svg><!----></span><!----><!--]--><!--[--><button aria-label="查看源代码" class="op-btn" data-v-f2775be5><span role="img" aria-label="function" class="anticon anticon-function" data-v-f2775be5><svg focusable="false" style="" data-icon="function" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M841 370c3-3.3 2.7-8.3-.6-11.3a8.24 8.24 0 00-5.3-2.1h-72.6c-2.4 0-4.6 1-6.1 2.8L633.5 504.6a7.96 7.96 0 01-13.4-1.9l-63.5-141.3a7.9 7.9 0 00-7.3-4.7H380.7l.9-4.7 8-42.3c10.5-55.4 38-81.4 85.8-81.4 18.6 0 35.5 1.7 48.8 4.7l14.1-66.8c-22.6-4.7-35.2-6.1-54.9-6.1-103.3 0-156.4 44.3-175.9 147.3l-9.4 49.4h-97.6c-3.8 0-7.1 2.7-7.8 6.4L181.9 415a8.07 8.07 0 007.8 9.7H284l-89 429.9a8.07 8.07 0 007.8 9.7H269c3.8 0 7.1-2.7 7.8-6.4l89.7-433.1h135.8l68.2 139.1c1.4 2.9 1 6.4-1.2 8.8l-180.6 203c-2.9 3.3-2.6 8.4.7 11.3 1.5 1.3 3.4 2 5.3 2h72.7c2.4 0 4.6-1 6.1-2.8l123.7-146.7c2.8-3.4 7.9-3.8 11.3-1 .9.8 1.6 1.7 2.1 2.8L676.4 784c1.3 2.8 4.1 4.7 7.3 4.7h64.6a8.02 8.02 0 007.2-11.5l-95.2-198.9c-1.4-2.9-.9-6.4 1.3-8.8L841 370z"></path></svg><!----></span></button><!----><!--]--></div><div style="display:none;" class="example-source-wrapper" data-v-f2775be5 data-v-92bf09f8><div class="example-source" data-v-92bf09f8><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span>
25<pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0" v-pre=""><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">&#x3C;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">script setup lang</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"tsx"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
26<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
27<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  Card,</span></span>
28<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  Space,</span></span>
29<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  Typography,</span></span>
30<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  Row,</span></span>
31<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  Col,</span></span>
32<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  Input,</span></span>
33<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  Tag,</span></span>
34<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  Affix,</span></span>
35<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'ant-design-vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
36<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
37<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  MessageOutlined,</span></span>
38<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  CommentOutlined,</span></span>
39<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  StarOutlined,</span></span>
40<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  BulbOutlined,</span></span>
41<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  PaperClipOutlined,</span></span>
42<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  SendOutlined,</span></span>
43<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  ThunderboltOutlined,</span></span>
44<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  NodeIndexOutlined,</span></span>
45<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  ApiOutlined,</span></span>
46<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  SettingOutlined,</span></span>
47<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  GlobalOutlined,</span></span>
48<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  CloudOutlined,</span></span>
49<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  RobotOutlined,</span></span>
50<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  SearchOutlined,</span></span>
51<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@ant-design/icons-vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
52<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { ref, computed } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
53<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">
53import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { useData } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'vitepress'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
54<span class="line"></span>
55<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">defineOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">({ name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'AXOverviewDemo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> });</span></span>
56<span class="line"></span>
57<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">Title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">Paragraph</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> Typography;</span></span>
58<span class="line"></span>
59<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// 搜索功能</span></span>
60<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> searchValue</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">''</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span>
61<span class="line"></span>
62<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// 暗黑模式</span></span>
63<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">isDark</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> useData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">();</span></span>
64<span class="line"></span>
65<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// 组件数据</span></span>
66<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> allComponents</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> [</span></span>
67<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  {</span></span>
68<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'bubble'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
69<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    category: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'通用组件'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
70<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Bubble 对话气泡'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
71<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'用于展示对话消息的气泡组件,支持多种样式和自定义内容'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
72<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    icon: &#x3C;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">CommentOutlined</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">={{ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '#52c41a'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }} />,</span></span>
73<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'bubble-demo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
74<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  },</span></span>
75<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  {</span></span>
76<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'conversations'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
77<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    category: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'通用组件'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
78<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Conversations 管理对话'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
79<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'管理多个对话会话的组件,支持分组、排序和交互操作'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
80<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    icon: &#x3C;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">MessageOutlined</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">={{ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '#722ed1'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }} />,</span></span>
81<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'conversations-demo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
82<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  },</span></span>
83<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  {</span></span>
84<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'welcome'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
85<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    category: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'唤醒组件'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
86<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Welcome 欢迎'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
87<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'AI 应用的欢迎界面组件,用于引导用户开始对话'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
88<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    icon: &#x3C;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">StarOutlined</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">={{ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '#fa8c16'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }} />,</span></span>
89<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'welcome-demo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
90<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  },</span></span>
91<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  {</span></span>
92<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'prompts'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
93<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    category: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'唤醒组件'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
94<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Prompts 提示集'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
95<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'预设提示词组件,帮助用户快速选择对话主题'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
96<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    icon: &#x3C;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">BulbOutlined</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">={{ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">
96 '#ffd700'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }} />,</span></span>
97<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'prompts-demo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
98<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  },</span></span>
99<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  {</span></span>
100<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'attachments'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
101<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    category: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'表达组件'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
102<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Attachments 输入附件'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
103<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'处理文件上传和附件管理的组件,支持多种文件类型'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
104<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    icon: &#x3C;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">PaperClipOutlined</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">={{ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '#eb2f96'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }} />,</span></span>
105<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'attachments-demo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
106<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  },</span></span>
107<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  {</span></span>
108<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'sender'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
109<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    category: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'表达组件'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
110<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Sender 输入框'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
111<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'消息输入组件,支持文本输入、语音识别等功能'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
112<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    icon: &#x3C;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">SendOutlined</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">={{ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '#1890ff'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }} />,</span></span>
113<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'sender-demo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
114<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  },</span></span>
115<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  {</span></span>
116<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'suggestion'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
117<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    category: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'表达组件'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
118<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Suggestion 快捷指令'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
119<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'快捷建议组件,为用户提供预设的操作选项'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
120<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    icon: &#x3C;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">ThunderboltOutlined</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">={{ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '#f5222d'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }} />,</span></span>
121<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'suggestion-demo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
122<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  },</span></span>
123<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  {</span></span>
124<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'thought-chain'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
125<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    category: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'确认组件'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
126<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'ThoughtChain 思维链'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
127<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'展示 AI 思考过程的组件,可视化推理步骤'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
128<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    icon: &#x3C;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">NodeIndexOutlined</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">={{ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '#722ed1'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }} />,</span></span>
129<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'thought-chain-demo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
130<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  },</span></span>
131<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  {</span></span>
132<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'use-x-agent'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
133<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    category: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'工具组件'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
134<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'useXAgent'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
135<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'模型调度的 Vue 组合式函数'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
136<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    icon: &#x3C;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">RobotOutlined</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">={{ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '#13c2c2'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }} />,</span></span>
137<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'use-x-agent-demo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
138<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  },</span></span>
139<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  {</span></span>
140<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'use-x-chat'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
141<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    category: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'工具组件'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
142<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">
142'useXChat'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
143<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'聊天数据管理的组合式函数'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
144<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    icon: &#x3C;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">MessageOutlined</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">={{ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '#52c41a'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }} />,</span></span>
145<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'use-x-chat-demo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
146<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  },</span></span>
147<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  {</span></span>
148<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'x-stream'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
149<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    category: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'工具组件'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
150<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'XStream'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
151<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'流式数据传输工具'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
152<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    icon: &#x3C;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">CloudOutlined</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">={{ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '#1890ff'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }} />,</span></span>
153<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'x-stream-demo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
154<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  },</span></span>
155<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  {</span></span>
156<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'x-request'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
157<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    category: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'工具组件'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
158<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'XRequest'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
159<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'AI 服务请求工具'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
160<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    icon: &#x3C;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">ApiOutlined</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">={{ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '#fa541c'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }} />,</span></span>
161<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'x-request-demo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
162<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  },</span></span>
163<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  {</span></span>
164<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'x-provider'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
165<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    category: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'工具组件'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
166<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">
166'XProvider 全局化配置'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
167<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'全局配置提供者,统一管理应用级别的设置'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
168<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    icon: &#x3C;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">GlobalOutlined</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">={{ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '#722ed1'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }} />,</span></span>
169<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'x-provider-demo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
170<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  },</span></span>
171<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">];</span></span>
172<span class="line"></span>
173<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// 过滤组件</span></span>
174<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> filteredComponents</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> computed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
175<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">  if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">searchValue.value) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> allComponents;</span></span>
176<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> search</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> searchValue.value.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">toLowerCase</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">();</span></span>
177<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">  return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> allComponents.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">filter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span></span>
178<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span></span>
179<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      component.title.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">toLowerCase</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">().</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">includes</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(search) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">||</span></span>
180<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      component.description.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">toLowerCase</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">().</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">includes</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(search) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">||</span></span>
181<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      component.category.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">toLowerCase</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">().</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">includes</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(search),</span></span>
182<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  );</span></span>
183<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">});
183</span></span>
184<span class="line"></span>
185<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// 按分类分组</span></span>
186<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> groupedComponents</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> computed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
187<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> groups</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> Record</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">typeof</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> allComponents> </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {};</span></span>
188<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  filteredComponents.value.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">forEach</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
189<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">    if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">groups[component.category]) {</span></span>
190<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      groups[component.category] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> [];</span></span>
191<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    }</span></span>
192<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    groups[component.category].</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">push</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(component);</span></span>
193<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  });</span></span>
194<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">  return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> groups;</span></span>
195<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">});</span></span>
196<span class="line"></span>
197<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// 获取组件显示文本</span></span>
198<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> getComponentDisplayText</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">component</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
199<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> textMap</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> Record</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">> </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
200<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    conversations: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'对话管理界面'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
201<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    attachments: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'文件上传区域'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
202<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">    'use-x-agent'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'AI 模型调度'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
203<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">    'use-x-chat'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'数据管理'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
204<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">    'x-stream'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'流数据处理'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
205<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">    'x-request'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'请求处理'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
206<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">    'x-provider'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'全局配置管理'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
207<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  };</span></span>
208<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">  return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> textMap[component.id] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">||</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> component.title;</span></span>
209<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};
209</span></span>
210<span class="line"></span>
211<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// 获取组件子文本</span></span>
212<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> getComponentSubText</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">component</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
213<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> subTextMap</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> Record</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">> </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
214<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    conversations: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'支持会话分组和排序'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
215<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    attachments: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'支持多种文件类型'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
216<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">    'x-provider'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'统一管理应用级别设置'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
217<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  };</span></span>
218<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">  return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> subTextMap[component.id] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">||</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> ''</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
219<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};</span></span>
220<span class="line"></span>
221<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// 组件路由映射</span></span>
222<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> componentRoutes</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> Record</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">> </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
223<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  bubble: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">
223'/component/bubble'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
224<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  conversations: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/component/conversations'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
225<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  welcome: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/component/welcome'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
226<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  prompts: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/component/prompts'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
227<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  attachments: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/component/attachments'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
228<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  sender: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/component/sender'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
229<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  suggestion: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/component/suggestion'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
230<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">  'thought-chain'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/component/thought-chain'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
231<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">  'use-x-agent'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/component/use-x-agent'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
232<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">  'use-x-chat'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/component/use-x-chat'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
233<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">  'x-stream'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/component/x-stream'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
234<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">  'x-request'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/component/x-request'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
235<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">  'x-provider'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/component/x-provider'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
236<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};</span></span>
237<span class="line"></span>
238<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// 静态预览图映射</span></span>
239<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> componentImages</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> Record</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">> </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
240<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  bubble: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/images/Bubble.svg'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
241<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  conversations: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/images/Conversations.svg'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
242<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  welcome: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/images/Welcome.svg'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
243<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  prompts: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/images/Prompts.svg'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
244<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  attachments: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/images/Attachments.svg'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
245<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  sender: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/images/Sender.svg'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
246<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  suggestion: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/images/Suggestion.svg'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
247<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">  'thought-chain'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/images/ThoughtChain.svg'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
248<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">  'use-x-agent'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/images/useXAgent.svg'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
249<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">  'use-x-chat'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/images/useXChat.svg'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
250<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">  'x-stream'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/images/XStream.svg'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
251<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">  'x-request'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/images/XRequest.svg'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
252<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">  'x-provider'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'/images/XProvider.svg'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
253<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};
253</span></span>
254<span class="line"></span>
255<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> getComponentImageSrc</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">component</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
256<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> base</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> componentImages[component.id];</span></span>
257<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">  if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">base) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">return</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> ''</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
258<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">  return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> isDark.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> base.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">replace</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">/</span><span style="--shiki-light:#22863A;--shiki-light-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold">\.</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF">svg</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'-dark.svg'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> base;</span></span>
259<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};</span></span>
260<span class="line"></span>
261<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// 处理组件点击</span></span>
262<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> handleComponentClick</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">component</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
263<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> route</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> componentRoutes[component.id];</span></span>
264<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">  if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (route) {</span></span>
265<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    window.location.href </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> route;</span></span>
266<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">else</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
267<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'未找到路由:'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, component.id);
267</span></span>
268<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  }</span></span>
269<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};</span></span>
270<span class="line"></span>
271<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> Demo</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
272<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">  return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span></span>
273<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
274<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      {</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">/* 搜索框 */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
275<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">      &#x3C;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Affix offsetTop</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">54</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
276<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">        &#x3C;</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">div</span></span>
277<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">          style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{</span></span>
278<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">            padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'16px 0'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
279<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">            marginBottom</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'24px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
280<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">          }}</span></span>
281<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">        ></span></span>
282<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">          &#x3C;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'0 auto'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
283<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">            &#x3C;</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">Input</span></span>
284<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">              v</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">-</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">model</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{searchValue.value}</span></span>
285<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">              placeholder</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"搜索组件名称、描述或分类..."</span></span>
286<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">              size</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"large"</span></span>
287<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">              allowClear</span></span>
288<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">              v</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">slots</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{</span></span>
289<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">                prefix</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> &#x3C;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">SearchOutlined</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">={{ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '#bfbfbf'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }} />,</span></span>
290<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">              }}</span></span>
291<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">            /></span></span>
292<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">          &#x3C;/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
293<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">        &#x3C;/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
294<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">      &#x3C;/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Affix</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
295<span class="line"></span>
296<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      {</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">
296/* 动态渲染各分类 */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
297<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      {</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">Object</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">entries</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">groupedComponents</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">).</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(([</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">category</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">components</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">]) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span></span>
298<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">        &#x3C;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div key</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{category}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
299<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">          &#x3C;</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">div</span></span>
300<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">            style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{</span></span>
301<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">              display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'flex'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
302<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">              alignItems</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'center'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
303<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">              marginBottom</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'24px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
304<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">            }}</span></span>
305<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">          ></span></span>
306<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">            &#x3C;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'24px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">fontWeight</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'600'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{category}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">&#x3C;/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
307<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">            &#x3C;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Tag style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">marginLeft</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'8px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{components.length}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">&#x3C;/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Tag</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
308<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">          &#x3C;/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
309<span class="line"></span>
310<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">          &#x3C;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Row gutter</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">16</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">24</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">]}
310 style={{ marginBottom: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'48px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
311<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">            {</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">components</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span></span>
312<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">              &#x3C;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Col key</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{component.id} xs</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">24</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">} lg</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">12</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
313<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">                  {</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">/* 组件演示区域 */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
314<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">                  &#x3C;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Card size</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> title</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{component.title} bodyStyle</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'16px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }} hoverable</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{true} class</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"overview-card"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
315<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">                    &#x3C;</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">div</span></span>
316<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">                      style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{</span></span>
317<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">                      </span></span>
318<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">                        minHeight</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'200px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
319<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">                        display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'flex'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
320<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">                        alignItems</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'center'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
321<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">                        justifyContent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'center'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
322<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">                      }}</span></span>
323<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">                      onClick</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{() => </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">handleComponentClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">)}</span></span>
324<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">                    ></span></span>
325<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">                      &#x3C;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">textAlign</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'center'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'100%'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
326<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">                        {</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">getComponentImageSrc</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) ? (</span></span>
327<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">                          &#x3C;</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">img</span></span>
328<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">                            src</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">
328{</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">getComponentImageSrc</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">)}</span></span>
329<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">                            alt</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{component.title}</span></span>
330<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">                            style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">maxWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'100%'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'160px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">objectFit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'contain'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span></span>
331<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">                          /></span></span>
332<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">                        ) : (</span></span>
333<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">                          &#x3C;</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">div</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'#666'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
334<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">                            &#x3C;</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">div</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'48px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
335<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">                              {</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
336<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">                            &#x3C;/</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
337<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">                            &#x3C;</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">div</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">fontWeight</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'500'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
338<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">                              {</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">getComponentDisplayText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">)}</span></span>
339<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">                            &#x3C;/</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
340<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">                            {</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">getComponentSubText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) &#x26;&#x26; (</span></span>
341<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">                              &#x3C;</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">div</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'12px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">marginTop</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'4px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
342<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">                                {</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">getComponentSubText</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">)}</span></span>
343<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">                              &#x3C;/</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
344<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">                            )}</span></span>
345<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">                          &#x3C;/</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
346<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">                        )}</span></span>
347<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">                      &#x3C;/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
348<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">                    &#x3C;/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
349<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">                  &#x3C;/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Card</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
350<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">              &#x3C;/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Col</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
351<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">            ))}</span></span>
352<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">          &#x3C;/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Row</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
353<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">        &#x3C;/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
354<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      ))}</span></span>
355<span class="line"></span>
356<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      {</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">/* 无搜索结果 */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
357<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      {</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">Object</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">keys</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">groupedComponents</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">).</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">length</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> === 0 &#x26;&#x26; (</span></span>
358<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">        &#x3C;</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">div</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">textAlign</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'center'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'60px 0'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'#999'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
359<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">          &#x3C;</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">SearchOutlined</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'48px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">marginBottom</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'16px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}
359 </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">/></span></span>
360<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">          &#x3C;</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">div</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'16px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">未找到匹配的组件</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">&#x3C;/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
361<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">          &#x3C;</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">div</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'14px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">marginTop</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'8px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">请尝试其他关键词</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">&#x3C;/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
362<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">        &#x3C;/</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
363<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      )}</span></span>
364<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">    &#x3C;/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span>
365<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  );</span></span>
366<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};</span></span>
367<span class="line"></span>
368<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">defineRender</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
369<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">  return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> &#x3C;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">Demo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> />;</span></span>
370<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">});</span></span>
371<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">&#x3C;/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">script</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span></code></pre>
372</div></div></div><div class="example-float-control" tabindex="0" role="button" style="display:none;" data-v-f2775be5 data-v-f2775be5><span role="img" aria-label="caret-up" class="anticon anticon-caret-up" data-v-f2775be5><svg focusable="false" style="" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg><!----></span><span data-v-f2775be5>隐藏源代码</span></div></div><!--]--><!--]--><!--]--><!--]--><!--]--><!--]--></div></div></main><footer class="VPDocFooter" data-v-7b344cb4 data-v-6f7ccc42><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-6f7ccc42><span class="visually-hidden" id="doc-footer-aria-label" data-v-6f7ccc42>Pager</span><div class="pager" data-v-6f7ccc42><!----></div><div class="pager" data-v-6f7ccc42><a class='VPLink link pager-link next' data-v-6f7ccc42 href='/component/bubble'><!--[--><span class="desc" data-v-6f7ccc42>Next page</span><span class="title" data-v-6f7ccc42>Bubble 对话气泡框</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div><!--]--><!--]--><!--]--><!--]--><!--]--></div>
373    
373<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>
373
374    
375  </body>
376</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.