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 "æ»è§"">â</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"><</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: <</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: <</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: <</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: <</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: <</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: <</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: <</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: <</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: <</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: <</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: <</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: <</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: <</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"><</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"><</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"><</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"><</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"><</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"> <</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"> <</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"> <</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"> <</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"> <</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"> <</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"> </</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"> </</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"> </</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"> <</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"> <</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"> <</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"></</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"> <</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"></</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"> </</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"> <</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"> <</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"> <</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"> <</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"> <</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"> <</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"> <</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"> <</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"> </</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"> <</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"> </</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">) && (</span></span> 341<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</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"> </</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"> </</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"> </</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"> </</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"> </</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"> </</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"> </</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"> </</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 && (</span></span> 358<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</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"> <</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"> <</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"></</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"> <</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"></</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"> </</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"> </</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"> <</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"></</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.