{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/ai/sidebar","result":{"data":{"current":{"frontmatter":{"title":"Sidebar 侧边信息栏","order":103,"brief":"展示 AI 场景下的配置和详情信息","icon":"doc-sidebar"},"fields":{"type":"ai"},"tableOfContents":{"items":[{"url":"#使用场景","title":"使用场景"},{"url":"#代码演示","title":"代码演示","items":[{"url":"#基础容器","title":"基础容器"},{"url":"#mcp-配置","title":"MCP 配置"},{"url":"#参考来源","title":"参考来源"},{"url":"#代码展示","title":"代码展示"},{"url":"#代码列表","title":"代码列表"},{"url":"#富文本编辑器","title":"富文本编辑器"},{"url":"#富文本列表","title":"富文本列表"},{"url":"#侧边信息栏","title":"侧边信息栏"}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#container","title":"Container"},{"url":"#mcpconfigure","title":"MCPConfigure","items":[{"url":"#mcpreactoption","title":"MCPReactOption"}]},{"url":"#annotation","title":"Annotation","items":[{"url":"#annotationitem","title":"AnnotationItem"}]},{"url":"#sidebar","title":"Sidebar"},{"url":"#code","title":"Code","items":[{"url":"#codeitemprops","title":"CodeItemProps"}]},{"url":"#file","title":"File","items":[{"url":"#filecontent","title":"FileContent"},{"url":"#fileitemprops","title":"FileItemProps"}]}]}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"zh-CN\",\n  \"order\": 103,\n  \"category\": \"Ai\",\n  \"title\": \"Sidebar 侧边信息栏\",\n  \"icon\": \"doc-sidebar\",\n  \"width\": \"60%\",\n  \"brief\": \"展示 AI 场景下的配置和详情信息\",\n  \"showNew\": true\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar ApiType = makeShortcode(\"ApiType\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528\\u573A\\u666F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4FA7\\u8FB9\\u4FE1\\u606F\\u680F\\u4E3B\\u8981\\u7528\\u4E8E\\u5728 AI \\u573A\\u666F\\u4E0B\\uFF0C\\u7528\\u4E8E\\u4FE1\\u606F\\u5C55\\u793A\\uFF0C\\u529F\\u80FD\\u914D\\u7F6E\\u3002\\u5305\\u62EC MCP \\u914D\\u7F6E\\u3001\\u53C2\\u8003\\u6765\\u6E90\\u3001\\u4EE3\\u7801\\u9884\\u89C8\\u3001\\u5BCC\\u6587\\u672C\\u9884\\u89C8\\u53CA\\u7F16\\u8F91\\u7B49\\u529F\\u80FD\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u7840\\u5BB9\\u5668\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4FA7\\u8FB9\\u4FE1\\u606F\\u680F\\u7684\\u57FA\\u7840\\u5BB9\\u5668\\uFF0C\\u57FA\\u7840\\u5BB9\\u5668\\u662F\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#mcp-%E9%85%8D%E7%BD%AE\"\n  }, \"MCP \\u914D\\u7F6E\"), \"\\u3001\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#%E5%8F%82%E8%80%83%E6%9D%A5%E6%BA%90\"\n  }, \"\\u53C2\\u8003\\u6765\\u6E90\"), \"\\u3001\\u4EE5\\u53CA\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#%E4%BE%A7%E8%BE%B9%E6%B6%88%E6%81%AF%E6%A0%8F\"\n  }, \"\\u4FA7\\u8FB9\\u6D88\\u606F\\u680F\"), \"\\u7684\\u57FA\\u7840\\u5BB9\\u5668\\u3002\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"visible\"), \" \\u914D\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onCancel\"), \" \\u4F7F\\u7528\\u63A7\\u5236\\u663E\\u793A\\u548C\\u9690\\u85CF\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"title\"), \"\\u8BBE\\u7F6E\\u6807\\u9898\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"motion\"), \"\\u8BBE\\u7F6E\\u662F\\u5426\\u6709\\u5C55\\u5F00\\u52A8\\u753B\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"resizable\"), \"\\u8BBE\\u7F6E\\u5BBD\\u5EA6\\u662F\\u5426\\u53EF\\u4F38\\u7F29\\uFF0C\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"true\"), \" \\u65F6\\u5019\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"minSize\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"maxSize\"), \" \\u8BBE\\u7F6E\\u6700\\u5C0F\\uFF0C\\u6700\\u5927\\u5BBD\\u5EA6\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { Sidebar, Button, Switch } from '@douyinfe/semi-ui';\\n\\nconst { Container } = Sidebar;\\nconst containerStyle = {\\n    display: 'flex',\\n    height: '500px',\\n    border: '1px solid var(--semi-color-border)',\\n    borderRadius: 8,\\n    overflow: 'hidden',\\n    boxSizing: 'border-box'\\n};\\n\\nconst ContainerDemo = () => {\\n    const [visible, setVisible] = useState(true);\\n    const [motion, setMotion] = useState(true);\\n    const [resizable, setResizable] = useState(true);\\n\\n    const toggleVisible = useCallback(() => {\\n        setVisible(visible => !visible);\\n    }, []);\\n\\n    const onMotionChange = useCallback((checked) => {\\n        setMotion(checked);\\n    }, []);\\n\\n    const onResizableChange = useCallback((checked) => {\\n        setResizable(checked);\\n    }, []);\\n\\n    return <div style={containerStyle}>\\n        <div style={{ flexGrow: 1, flexShrink: 1, padding: 20 }}>\\n            <div>\\n                <Button onClick={toggleVisible}>\\u70B9\\u6211{visible ? '\\u9690\\u85CF' : '\\u5C55\\u793A' }\\u5BB9\\u5668</Button>\\n                <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>\\u662F\\u5426\\u6709\\u52A8\\u753B <Switch checked={motion} onChange={onMotionChange} /></div>\\n                <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>\\u662F\\u5426\\u53EF\\u4F38\\u7F29 <Switch checked={resizable} onChange={onResizableChange} /></div>\\n            </div>\\n        </div>\\n        <Container\\n            motion={motion}\\n            resizable={resizable}\\n            minWidth={250}\\n            maxWidth={'60%'}\\n            visible={visible}\\n            title={\\\"\\u57FA\\u7840\\u5BB9\\u5668\\u793A\\u4F8B\\\"}\\n            style={resizable ? {} : { width: 200 }}\\n            onCancel={toggleVisible}\\n        >   \\n        </Container>\\n    </div>;\\n};\\n\\nrender(<ContainerDemo />);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"MCP \\u914D\\u7F6E\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"MCPConfigure\"), \" \\u8FDB\\u884C MCP \\u5DE5\\u5177\\u7684\\u5C55\\u793A\\u3001\\u542F\\u7528/\\u5173\\u95ED\\u3001\\u914D\\u7F6E\\u53CA\\u641C\\u7D22 \"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"options\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"customOptions\"), \" \\u8BBE\\u7F6E\\u5185\\u7F6E\\u7684 MCP \\u5DE5\\u5177\\u548C\\u81EA\\u5B9A\\u4E49 MCP \\u5DE5\\u5177\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"visible\"), \" \\u8BBE\\u7F6E\\u7EC4\\u4EF6\\u7684\\u663E\\u793A\\u548C\\u9690\\u85CF, \\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onCancel\"), \" \\u76D1\\u542C\\u7528\\u6237\\u7684\\u5173\\u95ED\\u884C\\u4E3A\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onStatusChange\"), \" \\u81EA\\u5B9A\\u4E49\\u5904\\u7406 MCP \\u5DE5\\u5177\\u7684\\u542F\\u7528/\\u5173\\u95ED\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onAddClick\"), \" \\u5904\\u7406\\u81EA\\u5B9A\\u4E49 MCP \\u9875\\u7684\\u70B9\\u51FB\\u6DFB\\u52A0\\u6309\\u94AE\\u540E\\u7684\\u64CD\\u4F5C\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onConfigureClick\"), \" \\u76D1\\u542C\\u5185\\u7F6E MCP \\u5DE5\\u5177\\u7684\\u914D\\u7F6E\\uFF0C\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onEditClick\"), \" \\u76D1\\u542C\\u81EA\\u5B9A\\u4E49 MCP \\u5DE5\\u5177\\u7684\\u914D\\u7F6E\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5176\\u4ED6 MCPConfigure \\u7684 API \\u89C1 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#MCPConfigureProps\"\n  }, \"MCPConfigureProps\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F20\\u5165 MCP \\u5DE5\\u5177\\u9879\\u7684\\u7C7B\\u578B\\u5982\\u4E0B\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"interface MCPOption {\\n    icon?: ReactNode;\\n    label?: string;\\n    value?: string;\\n    desc?: ReactNode;\\n    active?: boolean;\\n    disabled?: boolean; \\n    configure?: boolean //\\u662F\\u5426\\u663E\\u793A\\u914D\\u7F6E\\u6309\\u94AE\\n}\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7528\\u4F8B\\u5982\\u4E0B\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { Sidebar, MCPConfigure, Button, Modal, Form } from '@douyinfe/semi-ui';\\nimport { IconSemiLogo, IconFigma } from '@douyinfe/semi-icons';\\n\\nconst defaultOptions = [\\n    {\\n        icon: <IconSemiLogo />,\\n        value: 'Semi mcp',\\n        label: \\\"Semi\\\",\\n        configure: true,\\n        desc: \\\"\\u652F\\u6301 Semi \\u7684\\u6587\\u6863\\u3001\\u6E90\\u7801\\u641C\\u7D22\\uFF0C\\u8F85\\u52A9\\u5F00\\u53D1\\\"\\n    },\\n    {\\n        icon: <IconFigma />,\\n        value: 'figma',\\n        label: \\\"Figma\\\",\\n        desc: \\\"Figma MCP Server \\u8FDE\\u63A5Figma\\u4E0EAI\\u5F00\\u53D1\\u5DE5\\u5177\\u7684\\u529F\\u80FD\\u3002\\u5B83\\u901A\\u8FC7\\u6807\\u51C6\\u5316\\u7684\\u6A21\\u578B\\u4E0A\\u4E0B\\u6587\\u534FMCP\\uFF09\\uFF0C\\u5C06\\u7EC4\\u4EF6\\u3001\\u53D8\\u91CF\\u7B49\\u8BBE\\u8BA1\\u6570\\u636E\\u548C\\u4E0A\\u4E0B\\u6587\\u66B4\\u9732\\u7ED9AI\\uFF0C\\u4ECE\\u800C\\u5B9E\\u73B0\\u4ECE\\u8BBE\\u8BA1\\u7A3F\\u5230\\u4EE3\\u7801\\u7684\\u667A\\u80FD\\u751F\\u6210\\uFF0C\\u663E\\u8457\\u63D0\\u5347\\u5F00\\u53D1\\u6548\\u7387\\u3002\\\"\\n    }\\n];\\n\\nconst CustomOptionCreateModel = (props) => {\\n    const { visible, handleOk, handleCancel, formRef } = props;\\n\\n    return (<Modal\\n        title=\\\"\\u81EA\\u5B9A\\u4E49 MCP\\\"\\n        visible={visible}\\n        onOk={handleOk}\\n        onCancel={handleCancel}\\n        closeOnEsc={true}\\n    >\\n        <Form\\n            ref={formRef} \\n            layout='vertical' \\n            onValueChange={values=>console.log(values)}\\n        >\\n            <Form.Input \\n                rules={[{ required: true, message: '\\u8BF7\\u8F93\\u5165 MCP \\u540D\\u79F0' }]} \\n                field='name' \\n                label='MCP \\u540D\\u79F0' \\n                style={{ width: '100%' }}\\n            />\\n            <Form.Input \\n                initValue={'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png'}\\n                rules={[\\n                    { required: true, message: '\\u8BF7\\u8F93\\u5165 MCP \\u56FE\\u6807 URL' },\\n                    { \\n                        validator: (rule, value) => {\\n                            const urlRegex = /^(?:https?:\\\\/\\\\/)?(?:www\\\\.)?[a-zA-Z0-9-]+(?:\\\\.[a-zA-Z0-9-]+)+(?:\\\\:\\\\d+)?(?:\\\\/[^\\\\s]*)?$/i;\\n                            return urlRegex.test(value);\\n                        },\\n                        message: '\\u8BF7\\u8F93\\u5165\\u6709\\u6548\\u7684 MCP \\u56FE\\u6807 URL'\\n                    }\\n                ]} \\n                field='src' \\n                label='MCP \\u56FE\\u6807 URL' \\n                style={{ width: '100%' }}\\n                \\n            />\\n            <Form.TextArea \\n                rules={[{ required: true, message: '\\u8BF7\\u8F93\\u5165 MCP \\u4ECB\\u7ECD' }]} \\n                field='desc' \\n                label=\\\"MCP \\u4ECB\\u7ECD\\\" \\n                style={{ width: '100%' }}\\n            />\\n        </Form>\\n    </Modal>);\\n};\\n\\nlet index = 1;\\n\\nconst containerStyle = {\\n    display: 'flex',\\n    height: '500px',\\n    border: '1px solid var(--semi-color-border)',\\n    borderRadius: 8,\\n    overflow: 'hidden',\\n    boxSizing: 'border-box'\\n};\\n\\nfunction McpConfigureDemo() {\\n    const [visible, setVisible] = useState(true);\\n    const toggleVisible = useCallback(() => {\\n        setVisible(visible => !visible);\\n    }, []);\\n    const [options, setOptions] = useState(defaultOptions);\\n    const [mVisible, setMVisible] = useState(false);\\n    const [customOptions, setCustomOptions] = useState([]);\\n    const formRef = useRef(null);\\n\\n    const handleOk = useCallback(() => {\\n        formRef.current.formApi.validate().then(values => {\\n            const newOptions = [...customOptions, {\\n                label: values.name,\\n                icon: values.src,\\n                value: `mcp-${index++}`,\\n                desc: values.desc\\n            }];\\n            setCustomOptions(newOptions);\\n            setMVisible(false);\\n        }).catch(errors => {\\n            console.log('errors', errors);\\n        });\\n    }, [customOptions]);\\n\\n    const showDialog = useCallback(() => {\\n        setMVisible(true);\\n    }, []);\\n\\n    const handleCancel = useCallback(() => {\\n        setMVisible(false);\\n    }, []);\\n\\n    const onStatusChange = useCallback((options, custom) => {\\n        if (custom) {\\n            setCustomOptions(options);\\n        } else {\\n            setOptions(options);\\n        }\\n    }, []);\\n\\n    const onAddClick = useCallback((e) => {\\n        showDialog();\\n    }, []);\\n\\n    const onConfigureClick = useCallback((e, option) => {\\n        console.log('configure click', option);\\n    }, []);\\n\\n    const onEditClick = useCallback((e, option) => {\\n        console.log('edit click', option);\\n    }, []);\\n\\n    return (<div style={containerStyle}>\\n        <div style={{ flexGrow: 1, flexShrink: 1, padding: 20 }}>\\n            <Button onClick={toggleVisible}>{visible ? '\\u5173\\u95ED' : '\\u5F00\\u59CB' } MCP \\u914D\\u7F6E </Button>\\n        </div>\\n        <MCPConfigure\\n            style={{ width: 500 }}\\n            resizable={false}\\n            visible={visible}\\n            onCancel={toggleVisible}\\n            options={options}\\n            customOptions={customOptions}\\n            onStatusChange={onStatusChange}\\n            onAddClick={onAddClick}\\n            onConfigureClick={onConfigureClick}\\n            onEditClick={onEditClick}\\n        />\\n        <CustomOptionCreateModel\\n            formRef={formRef}\\n            visible={mVisible}\\n            handleOk={handleOk}\\n            handleCancel={handleCancel}\\n        />\\n    </div>);\\n}\\n\\nrender(<McpConfigureDemo />);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u53C2\\u8003\\u6765\\u6E90\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Annotation\"), \" \\u7EC4\\u4EF6\\u53EF\\u4EE5\\u7BA1\\u7406\\u53C2\\u8003\\u6765\\u6E90\\u7684\\u5C55\\u793A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"activeKey\"), \"\\u914D\\u5408 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onChange\"), \" \\u7BA1\\u7406\\u5F53\\u524D\\u5C55\\u5F00\\u7684\\u9879\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"info\"), \" \\u8BBE\\u7F6E\\u53C2\\u8003\\u6765\\u6E90\\u7684\\u5177\\u4F53\\u5185\\u5BB9\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { Button, Annotation } from '@douyinfe/semi-ui';\\n\\nconst containerStyle = {\\n    display: 'flex',\\n    height: '500px',\\n    border: '1px solid var(--semi-color-border)',\\n    borderRadius: 8,\\n    overflow: 'hidden',\\n    boxSizing: 'border-box'\\n};\\n\\nconst defaultInfoList = [\\n    {\\n        header: 'Semi design introduction',\\n        key: '1',\\n        annotations: [\\n            {\\n                order: 1,\\n                type: 'video',\\n                duration: 4432,\\n                title: 'Semi Design is a design system designed',\\n                url: 'https://semi.design/',\\n                logo: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',\\n                siteName: 'Semi Design',\\n                detail: ' As a comprehensive, easy-to-use, and high-quality modern enterprise-level application UI solution',\\n                img: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg'\\n            },\\n            {\\n                order: 2,\\n                title: 'Quick start',\\n                type: 'video',\\n                duration: 56,\\n                url: 'https://semi.design/',\\n                detail: ' As a comprehensive, easy-to-use, and high-quality modern enterprise-level application UI solution',\\n                logo: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',\\n                siteName: 'Semi Design',\\n                img: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg'\\n            },\\n            {\\n                order: 3,\\n                title: 'Use components in a modular way',\\n                url: 'https://semi.design/',\\n                detail: `Semi provides esm format dist, and the css of the component is only imported by the corresponding js.\\nWhen used in Webpack, Rspack, create-react-app or Vite projects, there is no need to configure any compilation items.`,\\n                logo: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',\\n                siteName: 'Semi Design',\\n                img: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg'\\n            }\\n        ]\\n    },\\n    {\\n        header: 'Design resource',\\n        key: '2',\\n        annotations: [\\n            {\\n                order: 2,\\n                title: 'Semi Design resource',\\n                url: 'https://semi.design/',\\n                detail: 'Semi Design provides a wealth of design resources to help designers and developers collaborate efficiently. Whether you are a community user or a ByteDance internal designer, you can find UI Kit resource and Figma plug-ins that suit you here.',\\n                logo: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',\\n                siteName: 'Semi Design resource',\\n                img: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg'\\n            }\\n        ]\\n    },\\n];\\n\\nfunction Demo() {\\n    const [visible, setVisible] = useState(true);\\n    const [activeKey, setActiveKey] = useState('1');\\n\\n    const toggleVisible = useCallback(() => {\\n        setVisible(visible => !visible);\\n    }, []);\\n\\n    const onChange = useCallback((key) => {\\n        console.log('onChange', key);\\n        setActiveKey(key);\\n    }, []);\\n\\n    const onClick = useCallback((e, item) => {\\n        console.log('onClick', e, item);\\n    }, []);\\n\\n    return <div style={containerStyle}>\\n        <div style={{ flexGrow: 1, flexShrink: 1, padding: 20 }}>\\n            <Button onClick={toggleVisible}>{visible ? '\\u5173\\u95ED' : '\\u5C55\\u793A'}\\u53C2\\u8003\\u6765\\u6E90 </Button>\\n        </div>\\n        <Annotation\\n            defaultSize={{ width: 420 }}\\n            visible={visible}\\n            onCancel={toggleVisible}\\n            activeKey={activeKey}\\n            info={defaultInfoList}\\n            onChange={onChange}\\n            onClick={onClick}\\n        />\\n    </div>;\\n}\\n\\nrender(<Demo />);\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4EE3\\u7801\\u5C55\\u793A\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Sidebar\"), \" \\u4E2D\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CodeItem\"), \" \\u5C55\\u793A\\u4EE3\\u7801\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CodeItem\"), \" \\u57FA\\u4E8E \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/plus/jsonviewer\"\n  }, \"JsonViewer\"), \" \\u4EE5\\u53CA \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/plus/codehighlight\"\n  }, \"CodeHighlight\"), \" \\u5B9E\\u73B0\\u3002\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"content\"), \": \\u5185\\u5BB9\\u5B57\\u7B26\\u4E32\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"isJson\"), \": \\u662F\\u5426\\u4E3A json \"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"language\"), \": \\u7F16\\u7A0B\\u8BED\\u8A00\\u540D\\u79F0\\uFF0C\\u540C \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"CodeHighlight\"), \" \\u7684 language\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"JsonViewerProps\"), \": \\u914D\\u7F6E\\u5176\\u4ED6 JsonViewer \\u53C2\\u6570\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"CodeHighlightProps\"), \": \\u914D\\u7F6E\\u5176\\u4ED6 CodeHighlight \\u53C2\\u6570\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { Sidebar, RadioGroup, Radio } from '@douyinfe/semi-ui';\\n\\nconst { CodeItem } = Sidebar;\\n\\nconst code = `.semi-animation-react-demo-auto {\\n    button {\\n        height: 50px;\\n        border: 0;\\n        cursor: pointer !important;\\n        background: #777;\\n        color: white;\\n        outline: none;\\n        -webkit-appearance: none;\\n    }\\n\\n    button:hover {\\n        background: #878787;\\n    }\\n\\n    .auto-main {\\n        display: grid;\\n        grid-template-columns: repeat(3, 1fr);\\n        grid-template-rows: auto 1fr;\\n        background: #575757;\\n    }\\n\\n    .content {\\n        grid-column: span 3;\\n    }\\n\\n    .item {\\n        background: indianred;\\n        width: 100%;\\n        overflow: hidden;\\n        color: white;\\n    }\\n\\n    .item p {\\n        margin: 0;\\n        padding: 10px;\\n    }\\n}\\n`;\\n\\nconst json = `{\\n    \\\"axisX\\\": {\\n        \\\"title\\\": {\\n            \\\"visible\\\": false,\\n            \\\"position\\\": \\\"center\\\"\\n        },\\n        \\\"label\\\": {\\n            \\\"visible\\\": true,\\n            \\\"style\\\": {\\n                \\\"fontSize\\\": 12,\\n                \\\"fontWeight\\\": 400,\\n                \\\"lineHeight\\\": 16,\\n                \\\"fontFamily\\\": [\\n                    \\\"Inter\\\"\\n                ],\\n                \\\"fill\\\": \\\"rgba(0, 0, 0, 0.47843137254901963)\\\"\\n            },\\n            \\\"space\\\": 12\\n        }\\n    }\\n}`;\\n\\nconst codeProps = {\\n    content: code,\\n    language: 'css',\\n};\\n\\nconst jsonProps = {\\n    isJson: true,\\n    content: json,\\n};\\n\\nconst CodeDemo = () => {\\n    const [type, setType] = useState('json');\\n    const onRadioChange = useCallback((e) => {\\n        setType(e.target.value);\\n    }, []);\\n\\n    return <>\\n        <RadioGroup\\n            type='button'\\n            buttonSize='middle' \\n            value={type}\\n            onChange={onRadioChange}\\n            style={{ marginBottom: 10 }}\\n        >\\n            <Radio value={'json'}>JSON</Radio>\\n            <Radio value={'css'}>CSS</Radio>\\n        </RadioGroup>\\n        <div style={{ height: 200, overflow: 'auto' }}>\\n            <CodeItem\\n                {...(type === 'json' ? jsonProps : codeProps)}\\n            />\\n        </div>\\n    </>;\\n};\\n\\nrender(<CodeDemo />);\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4EE3\\u7801\\u5217\\u8868\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7528\\u6237\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Sidebar\"), \" \\u4E2D\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CodeContent\"), \" \\u7EC4\\u4EF6\\u5C55\\u793A\\u4EE3\\u7801\\u5217\\u8868\\u4FE1\\u606F\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { Sidebar } from '@douyinfe/semi-ui';\\n\\nconst { CodeContent } = Sidebar;\\n\\nconst defaultCodes = [\\n    {\\n        name: 'Component.js',\\n        key: 'code1',\\n        language: 'javascript',\\n        content: `import React from 'react';\\nimport { AutoComplete } from '@douyinfe/semi-ui';\\nimport { IconSearch } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const [stringData, setStringData] = useState([]);\\n    const [value, setValue] = useState('');\\n    const handleStringSearch = (value) => {\\n        let result;\\n        if (value) {\\n            result = ['gmail.com', '163.com', 'qq.com'].map(domain => value+domain);\\n        } else {\\n            result = [];\\n        }\\n        setStringData(result);\\n    };\\n\\n    const handleChange = (value) => {\\n        console.log('onChange', value);\\n        setValue(value);\\n    };\\n    return (\\n        <AutoComplete\\n            data={stringData}\\n            value={value}\\n            showClear\\n            prefix={<IconSearch />}\\n            placeholder=\\\"\\u641C\\u7D22... \\\"\\n            onSearch={handleStringSearch}\\n            onChange={handleChange}\\n            style={{ width: 200 }}\\n        />\\n    );\\n};\\n` \\n    }, \\n    {\\n        name: 'Style.css',\\n        key: 'code2',\\n        language: 'css',\\n        content: `.semi-animation-react-demo-auto {\\n    button {\\n        height: 50px;\\n        border: 0;\\n        cursor: pointer !important;\\n        background: #777;\\n        color: white;\\n        outline: none;\\n        -webkit-appearance: none;\\n    }\\n\\n    button:hover {\\n        background: #878787;\\n    }\\n\\n    .auto-main {\\n        display: grid;\\n        grid-template-columns: repeat(3, 1fr);\\n        grid-template-rows: auto 1fr;\\n        background: #575757;\\n    }\\n\\n    .content {\\n        grid-column: span 3;\\n    }\\n\\n    .item {\\n        background: indianred;\\n        width: 100%;\\n        overflow: hidden;\\n        color: white;\\n    }\\n\\n    .item p {\\n        margin: 0;\\n        padding: 10px;\\n    }\\n}\\n`\\n    },\\n    {\\n        name: 'Chart.json',\\n        key: 'code3',\\n        isJson: true,\\n        language: 'html',\\n        content: `{\\n    \\\"axisX\\\": {\\n        \\\"title\\\": {\\n            \\\"visible\\\": false,\\n            \\\"position\\\": \\\"center\\\"\\n        },\\n        \\\"label\\\": {\\n            \\\"visible\\\": true,\\n            \\\"style\\\": {\\n                \\\"fontSize\\\": 12,\\n                \\\"fontWeight\\\": 400,\\n                \\\"lineHeight\\\": 16,\\n                \\\"fontFamily\\\": [\\n                    \\\"Inter\\\"\\n                ],\\n                \\\"fill\\\": \\\"rgba(0, 0, 0, 0.47843137254901963)\\\"\\n            },\\n            \\\"space\\\": 12\\n        },\\n        \\\"domainLine\\\": {\\n            \\\"visible\\\": true,\\n            \\\"style\\\": {\\n                \\\"lineWidth\\\": 1,\\n                \\\"stroke\\\": \\\"rgba(0, 0, 0, 0.12156862745098039)\\\",\\n                \\\"lineDash\\\": []\\n            }\\n        },\\n        \\\"tick\\\": {\\n            \\\"visible\\\": false,\\n            \\\"style\\\": {\\n                \\\"lineWidth\\\": 1,\\n                \\\"stroke\\\": \\\"rgba(255, 255, 255, 0)\\\"\\n            }\\n        },\\n        \\\"subTick\\\": {\\n            \\\"visible\\\": false\\n        },\\n        \\\"grid\\\": {\\n            \\\"visible\\\": false\\n        },\\n        \\\"subGrid\\\": {\\n            \\\"visible\\\": false\\n        }\\n    }\\n}`\\n    },\\n];\\n\\nconst Demo = () => {\\n    const [activeKey, setActiveKey] = useState('code1');\\n\\n    const onChange = useCallback((key) => {\\n        setActiveKey(key);\\n    }, []);\\n\\n    return <div className='semi-sidebar-main'>\\n        <CodeContent\\n            style={{ width: 600 }}\\n            activeKey={activeKey}\\n            codes={defaultCodes}\\n            onChange={onChange}\\n        />\\n    </div>;\\n};\\n\\nrender(<Demo />);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5BCC\\u6587\\u672C\\u7F16\\u8F91\\u5668\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Sidebar\"), \" \\u4E2D\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"FileItem\"), \" \\u67E5\\u770B\\u3001\\u7F16\\u8F91\\u5BCC\\u6587\\u672C\\u5185\\u5BB9\\uFF0C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"FileItem\"), \" \\u57FA\\u4E8E \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://tiptap.dev/docs/editor/getting-started/overview\"\n  }, \"tiptap\"), \" \\u5B9E\\u73B0\\u3002\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"content\"), \"\\uFF1A\\u5BCC\\u6587\\u672C\\u5185\\u5BB9\\uFF0C \\u652F\\u6301\\u7C7B\\u578B\\u540C TiptapContent\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"editable\"), \": \\u8BBE\\u7F6E\\u662F\\u5426\\u53EF\\u7F16\\u8F91\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"imgUploadProps\"), \"\\uFF1A \\u8BBE\\u7F6E\\u56FE\\u7247\\u4E0A\\u4F20\\u8DEF\\u5F84\\u4EE5\\u53CA\\u56FE\\u7247\\u4E0A\\u4F20\\u540E src \\u7684\\u8BBE\\u7F6E\\uFF0C\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"action\"), \" \\u8BBE\\u7F6E\\u4E0A\\u4F20\\u5730\\u5740\\uFF0C\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"getUploadImageSrc\"), \" \\u51FD\\u6570\\u8FD4\\u56DE\\u56FE\\u7247\\u4E0A\\u4F20\\u540E\\u5730\\u5740\\uFF0C\\u7528\\u4E8E\\u5BCC\\u6587\\u672C\\u4E2D img \\u8282\\u70B9\\u7684 src\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { Button, Sidebar, RadioGroup } from '@douyinfe/semi-ui';\\n\\nconst { FileItem } = Sidebar;\\n\\nconst defaultFileContent = `<h2>\\n  Semi Design \\u4ECB\\u7ECD\\n</h2>\\n<p>\\n  Semi Design \\u662F\\u7531 <strong>\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F</strong>\\u548CMED\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u56E2\\u961F\\u8BBE\\u8BA1\\u3001\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684<em>\\u8BBE\\u8BA1\\u7CFB\\u7EDF</em>\\u3002\\u4F5C\\u4E3A\\u4E00\\u4E2A\\u5168\\u9762\\u3001\\u6613\\u7528\\u3001\\u4F18\\u8D28\\u7684\\u73B0\\u4EE3\\u5E94\\u7528UI\\u89E3\\u51B3\\u65B9\\u6848\\uFF0CSemi Design\\u4ECE\\u5B57\\u8282\\u8DF3\\u52A8\\u5404\\u4E1A\\u52A1\\u7EBF\\u7684\\u590D\\u6742\\u573A\\u666F\\u4E2D\\u63D0\\u70BC\\u800C\\u6765\\uFF0C\\u76EE\\u524D\\u5DF2\\u7ECF\\u652F\\u6491\\u4E86\\u8FD1\\u5343\\u4E2A\\u5E73\\u53F0\\u4EA7\\u54C1\\uFF0C\\u670D\\u52A1\\u4E86\\u5185\\u5916\\u90E8\\u8D85\\u8FC710\\u4E07\\u7528\\u6237\\uFF0C\\u8BE6\\u60C5\\u89C1https://semi.design/zh-CN/start/introduction\\u3002Semi Design\\u7684\\u7279\\u70B9\\u5305\\u62EC\\uFF1A\\n</p>\\n<ul>\\n  <li>\\n    \\u8BBE\\u8BA1\\u7B80\\u6D01\\u3001\\u73B0\\u4EE3\\u5316\\u3002\\n  </li>\\n  <li>\\n    \\u63D0\\u4F9B\\u4E3B\\u9898\\u65B9\\u6848\\uFF0C\\u53EF\\u6DF1\\u5EA6\\u6837\\u5F0F\\u5B9A\\u5236\\u3002\\n  </li>\\n</ul>\\n<p>\\n  \\u56FD\\u9645\\u5316\\uFF0C\\u8986\\u76D6\\u4E86\\u7B80/\\u7E41\\u4F53\\u4E2D\\u6587\\u3001\\u82F1\\u8BED\\u3001\\u65E5\\u8BED\\u3001\\u97E9\\u8BED\\u3001\\u8461\\u8404\\u7259\\u8BED\\u7B4920+\\u79CD\\u8BED\\u8A00\\uFF0C\\u65E5\\u671F\\u65F6\\u95F4\\u7EC4\\u4EF6\\u63D0\\u4F9B\\u5168\\u7403\\u65F6\\u533A\\u652F\\u6301\\uFF0C\\u5168\\u90E8\\u7EC4\\u4EF6\\u53EF\\u81EA\\u52A8\\u9002\\u914D\\u963F\\u62C9\\u4F2F\\u6587RTL\\u5E03\\u5C40\\u3002\\n</p>\\n<pre><code class=\\\"language-css\\\">body {\\n  display: none;\\n}</code></pre>\\n<p>\\n  \\u91C7\\u7528 Foundation \\u548C Adapter \\u8DE8\\u6846\\u67B6\\u6280\\u672F\\u65B9\\u6848\\uFF0C\\u65B9\\u4FBF\\u6269\\u5C55\\u3002\\n</p>\\n<blockquote>\\n  Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u548CMED\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u56E2\\u961F\\u8BBE\\u8BA1\\u3001\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\n  <br />\\n  \\u2014 Semi Design\\n</blockquote>`;\\n\\nconst imgUploadProps = {\\n    action: 'https://api.semi.design/upload',\\n    getUploadImageSrc: (response) => {\\n        // response \\u662F action \\u7ED3\\u679C\\u7684\\u8FD4\\u56DE\\u503C\\uFF0C\\u6B64\\u5904\\u4EC5\\u4E3A\\u793A\\u4F8B\\uFF0C\\u5B9E\\u9645\\u4F7F\\u7528\\u65F6\\u53EF response \\u8FD4\\u56DE\\u56FE\\u7247\\u4E0A\\u4F20\\u540E\\u7684 src\\n        return 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png';\\n    },\\n};\\n\\nconst FileDemo = () => {\\n    const [editable, setEditable] = useState(true);\\n    const [content, setContent] = useState(defaultFileContent);\\n    const toggleEditable = useCallback(() => {\\n        setEditable(editable => !editable);\\n    }, []);\\n\\n    return <>\\n        <Button onClick={toggleEditable}>\\u662F\\u5426\\u53EF\\u7F16\\u8F91: {editable ? '\\u662F' : '\\u5426'}</Button>\\n        <br /><br />\\n        <FileItem\\n            content={content}\\n            // onContentChange={(props) => { console.log('onContentChange', props); }}\\n            editable={editable}\\n            style={{ border: '1px solid var(--semi-color-border)', padding: 12 }}\\n            imgUploadProps={imgUploadProps}\\n        />\\n    </>;\\n};\\n\\nrender(<FileDemo />);\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5BCC\\u6587\\u672C\\u5217\\u8868\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7528\\u6237\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Sidebar\"), \" \\u4E2D\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"FileContent\"), \" \\u7EC4\\u4EF6\\u5C55\\u793A\\u5BCC\\u6587\\u672C\\u5217\\u8868\\u4FE1\\u606F\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { Sidebar } from '@douyinfe/semi-ui';\\n\\nconst { FileContent } = Sidebar;\\n\\nconst defaultFiles = [\\n    {\\n        key: 'file1',\\n        name: 'Semi Design \\u4ECB\\u7ECD',\\n        content: `\\n<h2>\\n  Semi Design \\u4ECB\\u7ECD\\n</h2>\\n<p>\\n  Semi Design \\u662F\\u7531 <strong>\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F</strong>\\u548CMED\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u56E2\\u961F\\u8BBE\\u8BA1\\u3001\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684<em>\\u8BBE\\u8BA1\\u7CFB\\u7EDF</em>\\u3002\\u4F5C\\u4E3A\\u4E00\\u4E2A\\u5168\\u9762\\u3001\\u6613\\u7528\\u3001\\u4F18\\u8D28\\u7684\\u73B0\\u4EE3\\u5E94\\u7528UI\\u89E3\\u51B3\\u65B9\\u6848\\uFF0CSemi Design\\u4ECE\\u5B57\\u8282\\u8DF3\\u52A8\\u5404\\u4E1A\\u52A1\\u7EBF\\u7684\\u590D\\u6742\\u573A\\u666F\\u4E2D\\u63D0\\u70BC\\u800C\\u6765\\uFF0C\\u76EE\\u524D\\u5DF2\\u7ECF\\u652F\\u6491\\u4E86\\u8FD1\\u5343\\u4E2A\\u5E73\\u53F0\\u4EA7\\u54C1\\uFF0C\\u670D\\u52A1\\u4E86\\u5185\\u5916\\u90E8\\u8D85\\u8FC710\\u4E07\\u7528\\u6237\\uFF0C\\u8BE6\\u60C5\\u89C1https://semi.design/zh-CN/start/introduction\\u3002Semi Design\\u7684\\u7279\\u70B9\\u5305\\u62EC\\uFF1A\\n</p>\\n<ul>\\n  <li>\\n    \\u8BBE\\u8BA1\\u7B80\\u6D01\\u3001\\u73B0\\u4EE3\\u5316\\u3002\\n  </li>\\n  <li>\\n    \\u63D0\\u4F9B\\u4E3B\\u9898\\u65B9\\u6848\\uFF0C\\u53EF\\u6DF1\\u5EA6\\u6837\\u5F0F\\u5B9A\\u5236\\u3002\\n  </li>\\n</ul>\\n<p>\\n  \\u56FD\\u9645\\u5316\\uFF0C\\u8986\\u76D6\\u4E86\\u7B80/\\u7E41\\u4F53\\u4E2D\\u6587\\u3001\\u82F1\\u8BED\\u3001\\u65E5\\u8BED\\u3001\\u97E9\\u8BED\\u3001\\u8461\\u8404\\u7259\\u8BED\\u7B4920+\\u79CD\\u8BED\\u8A00\\uFF0C\\u65E5\\u671F\\u65F6\\u95F4\\u7EC4\\u4EF6\\u63D0\\u4F9B\\u5168\\u7403\\u65F6\\u533A\\u652F\\u6301\\uFF0C\\u5168\\u90E8\\u7EC4\\u4EF6\\u53EF\\u81EA\\u52A8\\u9002\\u914D\\u963F\\u62C9\\u4F2F\\u6587RTL\\u5E03\\u5C40\\u3002\\n</p>\\n<pre><code class=\\\"language-css\\\">body {\\n  display: none;\\n}</code></pre>\\n<p>\\n  \\u91C7\\u7528 Foundation \\u548C Adapter \\u8DE8\\u6846\\u67B6\\u6280\\u672F\\u65B9\\u6848\\uFF0C\\u65B9\\u4FBF\\u6269\\u5C55\\u3002\\n</p>\\n<blockquote>\\n  Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u548CMED\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u56E2\\u961F\\u8BBE\\u8BA1\\u3001\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\n  <br />\\n  \\u2014 Semi Design\\n</blockquote>\\n<p>\\n  Semi Design \\u662F\\u7531 <strong>\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F</strong>\\u548CMED\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u56E2\\u961F\\u8BBE\\u8BA1\\u3001\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684<em>\\u8BBE\\u8BA1\\u7CFB\\u7EDF</em>\\u3002\\u4F5C\\u4E3A\\u4E00\\u4E2A\\u5168\\u9762\\u3001\\u6613\\u7528\\u3001\\u4F18\\u8D28\\u7684\\u73B0\\u4EE3\\u5E94\\u7528UI\\u89E3\\u51B3\\u65B9\\u6848\\uFF0CSemi Design\\u4ECE\\u5B57\\u8282\\u8DF3\\u52A8\\u5404\\u4E1A\\u52A1\\u7EBF\\u7684\\u590D\\u6742\\u573A\\u666F\\u4E2D\\u63D0\\u70BC\\u800C\\u6765\\uFF0C\\u76EE\\u524D\\u5DF2\\u7ECF\\u652F\\u6491\\u4E86\\u8FD1\\u5343\\u4E2A\\u5E73\\u53F0\\u4EA7\\u54C1\\uFF0C\\u670D\\u52A1\\u4E86\\u5185\\u5916\\u90E8\\u8D85\\u8FC710\\u4E07\\u7528\\u6237\\uFF0C\\u8BE6\\u60C5\\u89C1https://semi.design/zh-CN/start/introduction\\u3002Semi Design\\u7684\\u7279\\u70B9\\u5305\\u62EC\\uFF1A\\n</p>\\n<ul>\\n  <li>\\n    \\u8BBE\\u8BA1\\u7B80\\u6D01\\u3001\\u73B0\\u4EE3\\u5316\\u3002\\n  </li>\\n  <li>\\n    \\u63D0\\u4F9B\\u4E3B\\u9898\\u65B9\\u6848\\uFF0C\\u53EF\\u6DF1\\u5EA6\\u6837\\u5F0F\\u5B9A\\u5236\\u3002\\n  </li>\\n</ul>\\n<p>\\n  \\u56FD\\u9645\\u5316\\uFF0C\\u8986\\u76D6\\u4E86\\u7B80/\\u7E41\\u4F53\\u4E2D\\u6587\\u3001\\u82F1\\u8BED\\u3001\\u65E5\\u8BED\\u3001\\u97E9\\u8BED\\u3001\\u8461\\u8404\\u7259\\u8BED\\u7B4920+\\u79CD\\u8BED\\u8A00\\uFF0C\\u65E5\\u671F\\u65F6\\u95F4\\u7EC4\\u4EF6\\u63D0\\u4F9B\\u5168\\u7403\\u65F6\\u533A\\u652F\\u6301\\uFF0C\\u5168\\u90E8\\u7EC4\\u4EF6\\u53EF\\u81EA\\u52A8\\u9002\\u914D\\u963F\\u62C9\\u4F2F\\u6587RTL\\u5E03\\u5C40\\u3002\\n</p>\\n<pre><code class=\\\"language-css\\\">body {\\n  display: none;\\n}</code></pre>\\n<p>\\n  \\u91C7\\u7528 Foundation \\u548C Adapter \\u8DE8\\u6846\\u67B6\\u6280\\u672F\\u65B9\\u6848\\uFF0C\\u65B9\\u4FBF\\u6269\\u5C55\\u3002\\n</p>\\n<blockquote>\\n  Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u548CMED\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u56E2\\u961F\\u8BBE\\u8BA1\\u3001\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\n  <br />\\n  \\u2014 Semi Design\\n</blockquote>\\n<p>\\n  Semi Design \\u662F\\u7531 <strong>\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F</strong>\\u548CMED\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u56E2\\u961F\\u8BBE\\u8BA1\\u3001\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684<em>\\u8BBE\\u8BA1\\u7CFB\\u7EDF</em>\\u3002\\u4F5C\\u4E3A\\u4E00\\u4E2A\\u5168\\u9762\\u3001\\u6613\\u7528\\u3001\\u4F18\\u8D28\\u7684\\u73B0\\u4EE3\\u5E94\\u7528UI\\u89E3\\u51B3\\u65B9\\u6848\\uFF0CSemi Design\\u4ECE\\u5B57\\u8282\\u8DF3\\u52A8\\u5404\\u4E1A\\u52A1\\u7EBF\\u7684\\u590D\\u6742\\u573A\\u666F\\u4E2D\\u63D0\\u70BC\\u800C\\u6765\\uFF0C\\u76EE\\u524D\\u5DF2\\u7ECF\\u652F\\u6491\\u4E86\\u8FD1\\u5343\\u4E2A\\u5E73\\u53F0\\u4EA7\\u54C1\\uFF0C\\u670D\\u52A1\\u4E86\\u5185\\u5916\\u90E8\\u8D85\\u8FC710\\u4E07\\u7528\\u6237\\uFF0C\\u8BE6\\u60C5\\u89C1https://semi.design/zh-CN/start/introduction\\u3002Semi Design\\u7684\\u7279\\u70B9\\u5305\\u62EC\\uFF1A\\n</p>\\n<ul>\\n  <li>\\n    \\u8BBE\\u8BA1\\u7B80\\u6D01\\u3001\\u73B0\\u4EE3\\u5316\\u3002\\n  </li>\\n  <li>\\n    \\u63D0\\u4F9B\\u4E3B\\u9898\\u65B9\\u6848\\uFF0C\\u53EF\\u6DF1\\u5EA6\\u6837\\u5F0F\\u5B9A\\u5236\\u3002\\n  </li>\\n</ul>\\n<p>\\n  \\u56FD\\u9645\\u5316\\uFF0C\\u8986\\u76D6\\u4E86\\u7B80/\\u7E41\\u4F53\\u4E2D\\u6587\\u3001\\u82F1\\u8BED\\u3001\\u65E5\\u8BED\\u3001\\u97E9\\u8BED\\u3001\\u8461\\u8404\\u7259\\u8BED\\u7B4920+\\u79CD\\u8BED\\u8A00\\uFF0C\\u65E5\\u671F\\u65F6\\u95F4\\u7EC4\\u4EF6\\u63D0\\u4F9B\\u5168\\u7403\\u65F6\\u533A\\u652F\\u6301\\uFF0C\\u5168\\u90E8\\u7EC4\\u4EF6\\u53EF\\u81EA\\u52A8\\u9002\\u914D\\u963F\\u62C9\\u4F2F\\u6587RTL\\u5E03\\u5C40\\u3002\\n</p>\\n<pre><code class=\\\"language-css\\\">body {\\n  display: none;\\n}</code></pre>\\n<p>\\n  \\u91C7\\u7528 Foundation \\u548C Adapter \\u8DE8\\u6846\\u67B6\\u6280\\u672F\\u65B9\\u6848\\uFF0C\\u65B9\\u4FBF\\u6269\\u5C55\\u3002\\n</p>\\n<blockquote>\\n  Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u548CMED\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u56E2\\u961F\\u8BBE\\u8BA1\\u3001\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\n  <br />\\n  \\u2014 Semi Design\\n</blockquote>\\n`,\\n    },\\n    {\\n        key: 'file2',\\n        name: 'Semi Design DSM',\\n        content: `<h2>\\n  Semi Design DSM\\n</h2>\\n<p>Semi DSM is a design system management tool provided by Semi Design. It supports global and component-level style customization and keeps synchronization between Figma and front-end code. Suitable for teams of all sizes. Whether you need to simplify workflow, improve team collaboration, or increase productivity, we have features suitable for you.</p>\\n`\\n    },\\n    {\\n        key: 'file3',\\n        name: 'React v19 Adaptation',\\n        content: `<h2>\\n  React v19 Adaptation\\n</h2>\\n<p>Since the release of React v19, React has introduced numerous underlying mechanism and API changes, including upgrades and adjustments to the render mechanism, ref, context, TypeScript types, and related deprecated APIs. To ensure that the Semi Design component library is smoothly compatible with both React v19 and lower versions, we provide the original component package @douyinfe/semi-ui for React versions below v19, as well as a new package @douyinfe/semi-ui-19 specifically adapted for React v19, so users can choose as needed. This guide will help you understand how to install, use, and the precautions to take.\\nInstallation & Usage\\nIf your project is using React v19, please use @douyinfe/semi-ui-19. For React versions below v19, continue using @douyinfe/semi-ui as before.</p>\\n`\\n    },\\n];\\n\\nconst Demo = () => {\\n    const [activeKey, setActiveKey] = useState('file1');\\n\\n    const onChange = useCallback((key) => {\\n        setActiveKey(key);\\n    }, []);\\n\\n    return <div className='semi-sidebar-main'>\\n        <FileContent\\n            style={{ width: 600 }}\\n            activeKey={activeKey}\\n            files={defaultFiles}\\n            onChange={onChange}\\n        />\\n    </div>;\\n};\\n\\nrender(<Demo />);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4FA7\\u8FB9\\u4FE1\\u606F\\u680F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4FA7\\u8FB9\\u4FE1\\u606F\\u680F \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Sidebar\"), \" \\u6709\\u4E3B\\u89C6\\u56FE\\uFF08\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"mode\"), \" \\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"main\"), \"\\uFF09\\u548C\\u8BE6\\u60C5\\u89C6\\u56FE\\uFF08\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"mode\"), \" \\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"code\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"text\"), \" \\u53CA\\u5176\\u4ED6\\uFF09\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4E3B\\u89C6\\u56FE\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"title\"), \" \\u914D\\u7F6E\\u6807\\u9898\\uFF0C\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showClose\"), \" \\u51B3\\u5B9A\\u662F\\u5426\\u5C55\\u793A\\u5173\\u95ED\\u6309\\u94AE\\uFF0C\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"options\"), \" \\u8BBE\\u7F6E\\u9876\\u90E8\\u7684\\u6309\\u94AE\\u7EC4\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5BF9\\u4E8E\\u4E3B\\u89C6\\u56FE\\u7684\\u5185\\u5BB9\\u6E32\\u67D3\\uFF0C\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderMainContent\"), \" \\u4F20\\u5165\\u6E32\\u67D3\\u51FD\\u6570\\u3002\\u53EF\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Annotation\"), \" \\u4E2D\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"AnnotationContent\"), \" \\u6E32\\u67D3\\u53C2\\u8003\\u6765\\u6E90\\uFF0C\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Sidebar\"), \" \\u4E2D\\u5185\\u7F6E\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"FileContent\"), \" \\u6E32\\u67D3\\u5BCC\\u6587\\u672C, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CodeContent\"), \" \\u6E32\\u67D3\\u4EE3\\u7801\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5BF9\\u4E8E\\u8BE6\\u60C5\\u89C6\\u56FE\\uFF0C\\u5982\\u679C\\u662F\\u5BCC\\u6587\\u672C\\u6216\\u8005\\u4EE3\\u7801\\uFF0C\\u5206\\u522B\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"mode\"), \" \\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"code\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"text\"), \"\\uFF0C\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"detailContent\"), \" \\u8BBE\\u7F6E\\u663E\\u793A\\u5185\\u5BB9\\uFF0C\\u5373\\u53EF\\u901A\\u8FC7\\u5185\\u7F6E\\u7684\\u4EE3\\u7801\\u663E\\u793A\\u7EC4\\u4EF6\\uFF0C \\u5BCC\\u6587\\u672C\\u7F16\\u8F91\\u5668\\u8FDB\\u884C\\u663E\\u793A\\uFF0C\\u5982\\u679C\\u60F3\\u8981\\u81EA\\u5B9A\\u4E49\\u8BE6\\u60C5\\u89C6\\u56FE\\u7684\\u5C55\\u793A\\uFF0C\\u5219\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderDetailContent\"), \" \\u81EA\\u884C\\u5904\\u7406\\u6E32\\u67D3\\u5373\\u53EF\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { Sidebar, Annotation } from '@douyinfe/semi-ui';\\nimport { IconSearch, IconBriefStroked, IconCodeStroked, IconModalStroked } from '@douyinfe/semi-icons';\\n\\nconst { FileContent, CodeContent } = Sidebar;\\nconst { AnnotationContent } = Annotation;\\n\\nconst containerStyle = {\\n    display: 'flex',\\n    height: '800px',\\n    border: '1px solid var(--semi-color-border)',\\n    borderRadius: 8,\\n    overflow: 'hidden',\\n    boxSizing: 'border-box'\\n};\\n\\nconst optionList = [\\n    {\\n        icon: <IconSearch />,\\n        name: '\\u67E5\\u770B\\u641C\\u7D22',\\n        key: 'searchResult'\\n    },\\n    {\\n        icon: <IconBriefStroked />,\\n        name: '\\u6587\\u4EF6\\u9884\\u89C8',\\n        key: 'filePreview'\\n    },\\n    {\\n        icon: <IconCodeStroked />,\\n        name: '\\u4EE3\\u7801\\u9884\\u89C8',\\n        key: 'codePreview'\\n    },\\n    {\\n        icon: <IconModalStroked />,\\n        name: '\\u6D4F\\u89C8\\u5668',\\n        key: 'network'\\n    }\\n];\\n\\nconst defaultCodes = [\\n    {\\n        name: 'Component.js',\\n        key: 'code1',\\n        language: 'javascript',\\n        content: `import React from 'react';\\nimport { AutoComplete } from '@douyinfe/semi-ui';\\nimport { IconSearch } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const [stringData, setStringData] = useState([]);\\n    const [value, setValue] = useState('');\\n    const handleStringSearch = (value) => {\\n        let result;\\n        if (value) {\\n            result = ['gmail.com', '163.com', 'qq.com'].map(domain => value+domain);\\n        } else {\\n            result = [];\\n        }\\n        setStringData(result);\\n    };\\n\\n    const handleChange = (value) => {\\n        console.log('onChange', value);\\n        setValue(value);\\n    };\\n    return (\\n        <AutoComplete\\n            data={stringData}\\n            value={value}\\n            showClear\\n            prefix={<IconSearch />}\\n            placeholder=\\\"\\u641C\\u7D22... \\\"\\n            onSearch={handleStringSearch}\\n            onChange={handleChange}\\n            style={{ width: 200 }}\\n        />\\n    );\\n};\\n` \\n    }, \\n    {\\n        name: 'Style.css',\\n        key: 'code2',\\n        language: 'css',\\n        content: `.semi-animation-react-demo-auto {\\n    button {\\n        height: 50px;\\n        border: 0;\\n        cursor: pointer !important;\\n        background: #777;\\n        color: white;\\n        outline: none;\\n        -webkit-appearance: none;\\n    }\\n\\n    button:hover {\\n        background: #878787;\\n    }\\n\\n    .auto-main {\\n        display: grid;\\n        grid-template-columns: repeat(3, 1fr);\\n        grid-template-rows: auto 1fr;\\n        background: #575757;\\n    }\\n\\n    .content {\\n        grid-column: span 3;\\n    }\\n\\n    .item {\\n        background: indianred;\\n        width: 100%;\\n        overflow: hidden;\\n        color: white;\\n    }\\n\\n    .item p {\\n        margin: 0;\\n        padding: 10px;\\n    }\\n}\\n`\\n    },\\n    {\\n        name: 'Chart.json',\\n        key: 'code3',\\n        isJson: true,\\n        language: 'html',\\n        content: `{\\n    \\\"axisX\\\": {\\n        \\\"title\\\": {\\n            \\\"visible\\\": false,\\n            \\\"position\\\": \\\"center\\\"\\n        },\\n        \\\"label\\\": {\\n            \\\"visible\\\": true,\\n            \\\"style\\\": {\\n                \\\"fontSize\\\": 12,\\n                \\\"fontWeight\\\": 400,\\n                \\\"lineHeight\\\": 16,\\n                \\\"fontFamily\\\": [\\n                    \\\"Inter\\\"\\n                ],\\n                \\\"fill\\\": \\\"rgba(0, 0, 0, 0.47843137254901963)\\\"\\n            },\\n            \\\"space\\\": 12\\n        },\\n        \\\"domainLine\\\": {\\n            \\\"visible\\\": true,\\n            \\\"style\\\": {\\n                \\\"lineWidth\\\": 1,\\n                \\\"stroke\\\": \\\"rgba(0, 0, 0, 0.12156862745098039)\\\",\\n                \\\"lineDash\\\": []\\n            }\\n        },\\n        \\\"tick\\\": {\\n            \\\"visible\\\": false,\\n            \\\"style\\\": {\\n                \\\"lineWidth\\\": 1,\\n                \\\"stroke\\\": \\\"rgba(255, 255, 255, 0)\\\"\\n            }\\n        },\\n        \\\"subTick\\\": {\\n            \\\"visible\\\": false\\n        },\\n        \\\"grid\\\": {\\n            \\\"visible\\\": false\\n        },\\n        \\\"subGrid\\\": {\\n            \\\"visible\\\": false\\n        }\\n    }\\n}`\\n    },\\n];\\n\\nconst defaultFiles = [\\n    {\\n        key: 'file1',\\n        name: 'Semi Design \\u4ECB\\u7ECD',\\n        content: `\\n<h2>\\n  Semi Design \\u4ECB\\u7ECD\\n</h2>\\n<p>\\n  Semi Design \\u662F\\u7531 <strong>\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F</strong>\\u548CMED\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u56E2\\u961F\\u8BBE\\u8BA1\\u3001\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684<em>\\u8BBE\\u8BA1\\u7CFB\\u7EDF</em>\\u3002\\u4F5C\\u4E3A\\u4E00\\u4E2A\\u5168\\u9762\\u3001\\u6613\\u7528\\u3001\\u4F18\\u8D28\\u7684\\u73B0\\u4EE3\\u5E94\\u7528UI\\u89E3\\u51B3\\u65B9\\u6848\\uFF0CSemi Design\\u4ECE\\u5B57\\u8282\\u8DF3\\u52A8\\u5404\\u4E1A\\u52A1\\u7EBF\\u7684\\u590D\\u6742\\u573A\\u666F\\u4E2D\\u63D0\\u70BC\\u800C\\u6765\\uFF0C\\u76EE\\u524D\\u5DF2\\u7ECF\\u652F\\u6491\\u4E86\\u8FD1\\u5343\\u4E2A\\u5E73\\u53F0\\u4EA7\\u54C1\\uFF0C\\u670D\\u52A1\\u4E86\\u5185\\u5916\\u90E8\\u8D85\\u8FC710\\u4E07\\u7528\\u6237\\uFF0C\\u8BE6\\u60C5\\u89C1https://semi.design/zh-CN/start/introduction\\u3002Semi Design\\u7684\\u7279\\u70B9\\u5305\\u62EC\\uFF1A\\n</p>\\n<ul>\\n  <li>\\n    \\u8BBE\\u8BA1\\u7B80\\u6D01\\u3001\\u73B0\\u4EE3\\u5316\\u3002\\n  </li>\\n  <li>\\n    \\u63D0\\u4F9B\\u4E3B\\u9898\\u65B9\\u6848\\uFF0C\\u53EF\\u6DF1\\u5EA6\\u6837\\u5F0F\\u5B9A\\u5236\\u3002\\n  </li>\\n</ul>\\n<p>\\n  \\u56FD\\u9645\\u5316\\uFF0C\\u8986\\u76D6\\u4E86\\u7B80/\\u7E41\\u4F53\\u4E2D\\u6587\\u3001\\u82F1\\u8BED\\u3001\\u65E5\\u8BED\\u3001\\u97E9\\u8BED\\u3001\\u8461\\u8404\\u7259\\u8BED\\u7B4920+\\u79CD\\u8BED\\u8A00\\uFF0C\\u65E5\\u671F\\u65F6\\u95F4\\u7EC4\\u4EF6\\u63D0\\u4F9B\\u5168\\u7403\\u65F6\\u533A\\u652F\\u6301\\uFF0C\\u5168\\u90E8\\u7EC4\\u4EF6\\u53EF\\u81EA\\u52A8\\u9002\\u914D\\u963F\\u62C9\\u4F2F\\u6587RTL\\u5E03\\u5C40\\u3002\\n</p>\\n<pre><code class=\\\"language-css\\\">body {\\n  display: none;\\n}</code></pre>\\n<p>\\n  \\u91C7\\u7528 Foundation \\u548C Adapter \\u8DE8\\u6846\\u67B6\\u6280\\u672F\\u65B9\\u6848\\uFF0C\\u65B9\\u4FBF\\u6269\\u5C55\\u3002\\n</p>\\n<blockquote>\\n  Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u548CMED\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u56E2\\u961F\\u8BBE\\u8BA1\\u3001\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\n  <br />\\n  \\u2014 Semi Design\\n</blockquote>\\n<p>\\n  Semi Design \\u662F\\u7531 <strong>\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F</strong>\\u548CMED\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u56E2\\u961F\\u8BBE\\u8BA1\\u3001\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684<em>\\u8BBE\\u8BA1\\u7CFB\\u7EDF</em>\\u3002\\u4F5C\\u4E3A\\u4E00\\u4E2A\\u5168\\u9762\\u3001\\u6613\\u7528\\u3001\\u4F18\\u8D28\\u7684\\u73B0\\u4EE3\\u5E94\\u7528UI\\u89E3\\u51B3\\u65B9\\u6848\\uFF0CSemi Design\\u4ECE\\u5B57\\u8282\\u8DF3\\u52A8\\u5404\\u4E1A\\u52A1\\u7EBF\\u7684\\u590D\\u6742\\u573A\\u666F\\u4E2D\\u63D0\\u70BC\\u800C\\u6765\\uFF0C\\u76EE\\u524D\\u5DF2\\u7ECF\\u652F\\u6491\\u4E86\\u8FD1\\u5343\\u4E2A\\u5E73\\u53F0\\u4EA7\\u54C1\\uFF0C\\u670D\\u52A1\\u4E86\\u5185\\u5916\\u90E8\\u8D85\\u8FC710\\u4E07\\u7528\\u6237\\uFF0C\\u8BE6\\u60C5\\u89C1https://semi.design/zh-CN/start/introduction\\u3002Semi Design\\u7684\\u7279\\u70B9\\u5305\\u62EC\\uFF1A\\n</p>\\n<ul>\\n  <li>\\n    \\u8BBE\\u8BA1\\u7B80\\u6D01\\u3001\\u73B0\\u4EE3\\u5316\\u3002\\n  </li>\\n  <li>\\n    \\u63D0\\u4F9B\\u4E3B\\u9898\\u65B9\\u6848\\uFF0C\\u53EF\\u6DF1\\u5EA6\\u6837\\u5F0F\\u5B9A\\u5236\\u3002\\n  </li>\\n</ul>\\n<p>\\n  \\u56FD\\u9645\\u5316\\uFF0C\\u8986\\u76D6\\u4E86\\u7B80/\\u7E41\\u4F53\\u4E2D\\u6587\\u3001\\u82F1\\u8BED\\u3001\\u65E5\\u8BED\\u3001\\u97E9\\u8BED\\u3001\\u8461\\u8404\\u7259\\u8BED\\u7B4920+\\u79CD\\u8BED\\u8A00\\uFF0C\\u65E5\\u671F\\u65F6\\u95F4\\u7EC4\\u4EF6\\u63D0\\u4F9B\\u5168\\u7403\\u65F6\\u533A\\u652F\\u6301\\uFF0C\\u5168\\u90E8\\u7EC4\\u4EF6\\u53EF\\u81EA\\u52A8\\u9002\\u914D\\u963F\\u62C9\\u4F2F\\u6587RTL\\u5E03\\u5C40\\u3002\\n</p>\\n<pre><code class=\\\"language-css\\\">body {\\n  display: none;\\n}</code></pre>\\n<p>\\n  \\u91C7\\u7528 Foundation \\u548C Adapter \\u8DE8\\u6846\\u67B6\\u6280\\u672F\\u65B9\\u6848\\uFF0C\\u65B9\\u4FBF\\u6269\\u5C55\\u3002\\n</p>\\n<blockquote>\\n  Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u548CMED\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u56E2\\u961F\\u8BBE\\u8BA1\\u3001\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\n  <br />\\n  \\u2014 Semi Design\\n</blockquote>\\n<p>\\n  Semi Design \\u662F\\u7531 <strong>\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F</strong>\\u548CMED\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u56E2\\u961F\\u8BBE\\u8BA1\\u3001\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684<em>\\u8BBE\\u8BA1\\u7CFB\\u7EDF</em>\\u3002\\u4F5C\\u4E3A\\u4E00\\u4E2A\\u5168\\u9762\\u3001\\u6613\\u7528\\u3001\\u4F18\\u8D28\\u7684\\u73B0\\u4EE3\\u5E94\\u7528UI\\u89E3\\u51B3\\u65B9\\u6848\\uFF0CSemi Design\\u4ECE\\u5B57\\u8282\\u8DF3\\u52A8\\u5404\\u4E1A\\u52A1\\u7EBF\\u7684\\u590D\\u6742\\u573A\\u666F\\u4E2D\\u63D0\\u70BC\\u800C\\u6765\\uFF0C\\u76EE\\u524D\\u5DF2\\u7ECF\\u652F\\u6491\\u4E86\\u8FD1\\u5343\\u4E2A\\u5E73\\u53F0\\u4EA7\\u54C1\\uFF0C\\u670D\\u52A1\\u4E86\\u5185\\u5916\\u90E8\\u8D85\\u8FC710\\u4E07\\u7528\\u6237\\uFF0C\\u8BE6\\u60C5\\u89C1https://semi.design/zh-CN/start/introduction\\u3002Semi Design\\u7684\\u7279\\u70B9\\u5305\\u62EC\\uFF1A\\n</p>\\n<ul>\\n  <li>\\n    \\u8BBE\\u8BA1\\u7B80\\u6D01\\u3001\\u73B0\\u4EE3\\u5316\\u3002\\n  </li>\\n  <li>\\n    \\u63D0\\u4F9B\\u4E3B\\u9898\\u65B9\\u6848\\uFF0C\\u53EF\\u6DF1\\u5EA6\\u6837\\u5F0F\\u5B9A\\u5236\\u3002\\n  </li>\\n</ul>\\n<p>\\n  \\u56FD\\u9645\\u5316\\uFF0C\\u8986\\u76D6\\u4E86\\u7B80/\\u7E41\\u4F53\\u4E2D\\u6587\\u3001\\u82F1\\u8BED\\u3001\\u65E5\\u8BED\\u3001\\u97E9\\u8BED\\u3001\\u8461\\u8404\\u7259\\u8BED\\u7B4920+\\u79CD\\u8BED\\u8A00\\uFF0C\\u65E5\\u671F\\u65F6\\u95F4\\u7EC4\\u4EF6\\u63D0\\u4F9B\\u5168\\u7403\\u65F6\\u533A\\u652F\\u6301\\uFF0C\\u5168\\u90E8\\u7EC4\\u4EF6\\u53EF\\u81EA\\u52A8\\u9002\\u914D\\u963F\\u62C9\\u4F2F\\u6587RTL\\u5E03\\u5C40\\u3002\\n</p>\\n<pre><code class=\\\"language-css\\\">body {\\n  display: none;\\n}</code></pre>\\n<p>\\n  \\u91C7\\u7528 Foundation \\u548C Adapter \\u8DE8\\u6846\\u67B6\\u6280\\u672F\\u65B9\\u6848\\uFF0C\\u65B9\\u4FBF\\u6269\\u5C55\\u3002\\n</p>\\n<blockquote>\\n  Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u548CMED\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u56E2\\u961F\\u8BBE\\u8BA1\\u3001\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\n  <br />\\n  \\u2014 Semi Design\\n</blockquote>\\n`,\\n    },\\n    {\\n        key: 'file2',\\n        name: 'Semi Design DSM',\\n        content: `<h2>\\n  Semi Design DSM\\n</h2>\\n<p>Semi DSM is a design system management tool provided by Semi Design. It supports global and component-level style customization and keeps synchronization between Figma and front-end code. Suitable for teams of all sizes. Whether you need to simplify workflow, improve team collaboration, or increase productivity, we have features suitable for you.</p>\\n`\\n    },\\n    {\\n        key: 'file3',\\n        name: 'React v19 Adaptation',\\n        content: `<h2>\\n  React v19 Adaptation\\n</h2>\\n<p>Since the release of React v19, React has introduced numerous underlying mechanism and API changes, including upgrades and adjustments to the render mechanism, ref, context, TypeScript types, and related deprecated APIs. To ensure that the Semi Design component library is smoothly compatible with both React v19 and lower versions, we provide the original component package @douyinfe/semi-ui for React versions below v19, as well as a new package @douyinfe/semi-ui-19 specifically adapted for React v19, so users can choose as needed. This guide will help you understand how to install, use, and the precautions to take.\\nInstallation & Usage\\nIf your project is using React v19, please use @douyinfe/semi-ui-19. For React versions below v19, continue using @douyinfe/semi-ui as before.</p>\\n`\\n    },\\n];\\n\\nconst defaultInfoList = [\\n    {\\n        header: 'Semi design introduction',\\n        key: '1',\\n        annotations: [\\n            {\\n                order: 1,\\n                type: 'video',\\n                duration: 4432,\\n                title: 'Semi Design is a design system designed',\\n                url: 'https://semi.design/',\\n                logo: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',\\n                siteName: 'Semi Design',\\n                detail: ' As a comprehensive, easy-to-use, and high-quality modern enterprise-level application UI solution',\\n                img: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg'\\n            },\\n            {\\n                order: 2,\\n                title: 'Quick start',\\n                type: 'video',\\n                duration: 56,\\n                url: 'https://semi.design/',\\n                detail: ' As a comprehensive, easy-to-use, and high-quality modern enterprise-level application UI solution',\\n                logo: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',\\n                siteName: 'Semi Design',\\n                img: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg'\\n            },\\n            {\\n                order: 3,\\n                title: 'Use components in a modular way',\\n                url: 'https://semi.design/',\\n                detail: `Semi provides esm format dist, and the css of the component is only imported by the corresponding js.\\nWhen used in Webpack, Rspack, create-react-app or Vite projects, there is no need to configure any compilation items.`,\\n                logo: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',\\n                siteName: 'Semi Design',\\n                img: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg'\\n            }\\n        ]\\n    },\\n    {\\n        header: 'Design resource',\\n        key: '2',\\n        annotations: [\\n            {\\n                order: 2,\\n                title: 'Semi Design resource',\\n                url: 'https://semi.design/',\\n                detail: 'Semi Design provides a wealth of design resources to help designers and developers collaborate efficiently. Whether you are a community user or a ByteDance internal designer, you can find UI Kit resource and Figma plug-ins that suit you here.',\\n                logo: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',\\n                siteName: 'Semi Design resource',\\n                img: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg'\\n            }\\n        ]\\n    },\\n];\\n\\nconst imgUploadProps = {\\n    action: 'https://api.semi.design/upload',\\n    getUploadImageSrc: (response) => {\\n        // response is the result returned from action. This is only a demo.\\n        // In real use you can read response and return the actual image url.\\n        return 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png';\\n    },\\n};\\n\\nconst SideBarDemo = () => {\\n    const [mode, setMode] = useState('main');\\n    const [activeKey, setActiveKey] = useState('codePreview');\\n    const [activeCodeKey, setActiveCodeKey] = useState('code1');\\n    const [activeFileKey, setActiveFileKey] = useState('file1');\\n    const [activeReferKey, setActiveReferKey] = useState('1');\\n    const [currentDetail, setCurrentDetail] = useState();\\n\\n    const onExpand = useCallback((e, content, mode) => {\\n        setMode(mode);\\n        setCurrentDetail(content);\\n    }, []);\\n\\n    const onActiveCodeKeyChange = useCallback((codeKey) => {\\n        setActiveCodeKey(codeKey);\\n    }, []);\\n\\n    const onActiveFileKeyChange = useCallback((fileKey) => {\\n        setActiveFileKey(fileKey);\\n    }, []);\\n\\n    const onActiveReferKeyChange = useCallback((referKey) => {\\n        setActiveReferKey(referKey);\\n    }, []);\\n\\n    const renderMainContent = useCallback((activeKey) => {\\n        switch (activeKey) {\\n            case 'searchResult':\\n                return <AnnotationContent\\n                    activeKey={activeReferKey}\\n                    info={defaultInfoList}\\n                    onChange={onActiveReferKeyChange}\\n                />;\\n            case 'filePreview':\\n                return <FileContent\\n                    activeKey={activeFileKey}\\n                    files={defaultFiles}\\n                    onExpand={onExpand}\\n                    onChange={onActiveFileKeyChange}\\n                />;\\n            case 'codePreview':\\n                return <CodeContent\\n                    activeKey={activeCodeKey}\\n                    codes={defaultCodes}\\n                    onExpand={onExpand}\\n                    onChange={onActiveCodeKeyChange}\\n                />;\\n            case 'network':\\n                return <img\\n                    alt='network' \\n                    src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/test.jpg\\\"\\n                    style={{ width: '100%' }}\\n                />;\\n            default:\\n                return;\\n        } \\n    }, [activeCodeKey, activeFileKey, activeReferKey]);\\n\\n    const renderDetailContent = useCallback((mode) => {\\n        switch (mode) {\\n            default:\\n                return;\\n        }\\n    }, []);\\n    \\n    const onActiveOptionChange = useCallback((e, key) => {\\n        setActiveKey(key);\\n    }, []);\\n\\n    const onBackWard = useCallback((e, mode) => {\\n        setMode(mode);\\n    }, []);\\n\\n    return <div style={containerStyle}>\\n        <div style={{ flexGrow: 1, flexShrink: 1, padding: 20 }}>\\u5DE5\\u4F5C\\u533A\\u5360\\u4F4D</div>\\n        <Sidebar\\n            showClose={false}\\n            visible={true}\\n            motion={false}\\n            title=\\\"Agent \\u7684\\u5DE5\\u4F5C\\u7A7A\\u95F4\\\"\\n            mode={mode}\\n            defaultSize={{ width: '60%' }}\\n            onActiveOptionChange={onActiveOptionChange}\\n            activeKey={activeKey}\\n            options={optionList}\\n            onBackWard={onBackWard}\\n            renderMainContent={renderMainContent}\\n            renderDetailContent={renderDetailContent}\\n            onExpand={onExpand}\\n            detailContent={currentDetail}\\n            imgUploadProps={imgUploadProps}\\n        />\\n    </div>;\\n};\\n\\nrender(<SideBarDemo />);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Container\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"afterVisibleChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53EF\\u89C1\\u72B6\\u6001\\u53D8\\u5316\\u540E\\u7684\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(isVisible: boolean) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"containerRef\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BB9\\u5668\\u5143\\u7D20\\u7684 Ref \\u5F15\\u7528\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React.RefObject<HTMLDivElement\", \">\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultSize\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u5C3A\\u5BF8\\uFF08\\u5BBD\\u5EA6/\\u9AD8\\u5EA6\\uFF09, \\u4EC5\\u5728 resizable \\u4E3A true \\u65F6\\u751F\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{ width?: number \", \"|\", \" string; height?: number \", \"|\", \" string }\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"maxWidth\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6700\\u5927\\u5BBD\\u5EA6, \\u4EC5\\u5728 resizable \\u4E3A true \\u65F6\\u751F\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"minWidth\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6700\\u5C0F\\u5BBD\\u5EA6, \\u4EC5\\u5728 resizable \\u4E3A true \\u65F6\\u751F\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"motion\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5F00\\u542F\\u52A8\\u753B\\u6548\\u679C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onCancel\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53D6\\u6D88\\u64CD\\u4F5C\\u7684\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: any) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderHeader\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5934\\u90E8\\u6E32\\u67D3\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"resizable\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u53EF\\u62C9\\u4F38\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showClose\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u663E\\u793A\\u5173\\u95ED\\u6309\\u94AE\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"title\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6807\\u9898\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"visible\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u53EF\\u89C1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"MCPConfigure\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u652F\\u6301 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#Container\"\n  }, \"Container\"), \" \\u7684\\u6240\\u6709\\u53C2\\u6570\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"customOptions\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u9009\\u9879\\u5217\\u8868\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#MCPReactOption\"\n  }, \"MCPReactOption\"), \"[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"filter\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7B5B\\u9009\\u51FD\\u6570\\uFF0C\\u7528\\u4E8E\\u6839\\u636E\\u8F93\\u5165\\u503C\\u8FC7\\u6EE4\\u9009\\u9879\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(inputValue: string, option: MCPReactOption) => boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onAddClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65B0\\u589E\\u6309\\u94AE\\u70B9\\u51FB\\u4E8B\\u4EF6\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: MouseEvent) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onConfigureClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u914D\\u7F6E\\u6309\\u94AE\\u70B9\\u51FB\\u4E8B\\u4EF6\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: MouseEvent, option: MCPReactOption) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onEditClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7F16\\u8F91\\u6309\\u94AE\\u70B9\\u51FB\\u4E8B\\u4EF6\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: MouseEvent, option: MCPReactOption) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onSearch\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u641C\\u7D22\\u4E8B\\u4EF6\\u56DE\\u8C03\\uFF0C\\u8FD4\\u56DE\\u8F93\\u5165\\u503C\\u548C\\u662F\\u5426\\u4E3A\\u81EA\\u5B9A\\u4E49\\u6807\\u8BC6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(inputValue: string, custom: boolean) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onStatusChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u72B6\\u6001\\u53D8\\u5316\\u4E8B\\u4EF6\\u56DE\\u8C03\\uFF0C\\u8FD4\\u56DE\\u9009\\u9879\\u5217\\u8868\\u548C\\u662F\\u5426\\u4E3A\\u81EA\\u5B9A\\u4E49\\u6807\\u8BC6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(options: MCPReactOption[], custom: boolean) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"options\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u57FA\\u7840\\u9009\\u9879\\u5217\\u8868\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"MCPReactOption[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"placeholder\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8F93\\u5165\\u6846\\u5360\\u4F4D\\u63D0\\u793A\\u6587\\u5B57\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF7\\u8F93\\u5165\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderItem\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u9009\\u9879\\u6E32\\u67D3\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(option: MCPReactOption,custom: boolean) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"MCPReactOption\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"active\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5904\\u4E8E\\u6FC0\\u6D3B\\u72B6\\u6001\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"configure\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u663E\\u793A\\u914D\\u7F6E\\u76F8\\u5173\\u64CD\\u4F5C/\\u6807\\u8BC6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"desc\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u63CF\\u8FF0\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u7981\\u7528\\uFF0C\\u4E3A true \\u65F6\\u7528\\u6237\\u65E0\\u6CD5\\u66F4\\u6539\\u914D\\u7F6E\\u7684\\u6FC0\\u6D3B\\u4E0E\\u5426\\u72B6\\u6001\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"icon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u6807\\u5143\\u7D20\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"label\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6807\\u7B7E\\u6587\\u672C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BF9\\u5E94\\u7684\\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Annotation\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u652F\\u6301 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#Container\"\n  }, \"Container\"), \" \\u7684\\u6240\\u6709\\u53C2\\u6570\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"activeKey\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u524D\\u6FC0\\u6D3B\\u9879\\u7684\\u952E\\u503C\\uFF0C\\u652F\\u6301\\u5355\\u4E2A\\u6216\\u591A\\u4E2A\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" string[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"info\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6CE8\\u89E3\\u4FE1\\u606F\\u5217\\u8868\\uFF0C\\u5305\\u542B\\u5934\\u90E8\\u3001\\u952E\\u503C\\u3001\\u53C2\\u8003\\u6765\\u6E90\\u8BE6\\u60C5\\u7B49\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{ header: React.ReactNode; key: string; annotations: \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#AnnotationItem\"\n  }, \"AnnotationItem\"), \"[] }[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6FC0\\u6D3B\\u9879\\u53D8\\u66F4\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u8FD4\\u56DE\\u5F53\\u524D\\u6FC0\\u6D3B\\u7684\\u952E\\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(key: string \", \"|\", \" string[]) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB\\u53C2\\u8003\\u6765\\u6E90\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u8FD4\\u56DE\\u9F20\\u6807\\u4E8B\\u4EF6\\u548C\\u5BF9\\u5E94\\u7684\\u53C2\\u8003\\u6765\\u6E90\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: MouseEvent, item: AnnotationItem) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderItem\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u53C2\\u8003\\u6765\\u6E90\\u7684\\u6E32\\u67D3\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(annotation: AnnotationItem) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React.CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"AnnotationItem\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"detail\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5185\\u5BB9\\u8BE6\\u60C5/\\u8865\\u5145\\u8BF4\\u660E\\uFF08\\u5982\\u89C6\\u9891\\u7B80\\u4ECB\\u3001\\u6587\\u672C\\u5907\\u6CE8\\u7B49\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"duration\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65F6\\u957F\\uFF08\\u901A\\u5E38\\u4E3A\\u89C6\\u9891\\u65F6\\u957F\\uFF0C\\u5355\\u4F4D\\uFF1A\\u79D2\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"img\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u7247\\u5730\\u5740\\uFF08\\u5982\\u89C6\\u9891\\u5C01\\u9762\\u56FE\\u3001\\u6587\\u672C\\u914D\\u56FE\\u5730\\u5740\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"logo\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7AD9\\u70B9/\\u5185\\u5BB9\\u6240\\u5C5E\\u5E73\\u53F0\\u7684 logo \\u56FE\\u7247\\u5730\\u5740\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB\\u4E8B\\u4EF6\\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u8FD4\\u56DE\\u70B9\\u51FB\\u4E8B\\u4EF6\\u5BF9\\u8C61\\u548C\\u5F53\\u524D\\u53C2\\u8003\\u6765\\u6E90\\u6570\\u636E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(event: MouseEvent, item: AnnotationItem) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"order\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F15\\u7528\\u5E8F\\u53F7\\uFF08\\u7528\\u4E8E\\u5185\\u5BB9\\u6392\\u5E8F/\\u6807\\u6CE8\\u5E8F\\u53F7\\u5C55\\u793A\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"siteName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5185\\u5BB9\\u6240\\u5C5E\\u7684\\u7AD9\\u70B9/\\u5E73\\u53F0\\u540D\\u79F0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"title\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5185\\u5BB9\\u6807\\u9898\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5185\\u5BB9\\u7C7B\\u578B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'video' \", \"|\", \" 'text'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"url\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8D44\\u6E90\\u94FE\\u63A5\\uFF0C\\u70B9\\u51FB\\u53C2\\u8003\\u6765\\u6E90\\u5C06\\u8DF3\\u8F6C\\u6B64\\u5730\\u5740\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Sidebar\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"detailContent\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BE6\\u60C5\\u533A\\u57DF\\u7684\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(ApiType, {\n    detail: \"[CodeItemProps](#CodeItemProps) \\\\| [FileItemProps](#FileItemProps) \\\\| any\",\n    mdxType: \"ApiType\"\n  }, \"DetailContent\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"fileEditable\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6587\\u4EF6\\u5185\\u5BB9\\u662F\\u5426\\u53EF\\u7F16\\u8F91\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"imgUploadProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u7247\\u4E0A\\u4F20\\u76F8\\u5173\\u914D\\u7F6E\\u5C5E\\u6027\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ImageUploadNodeOptions\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"mode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C55\\u793A\\u6A21\\u5F0F\\uFF0C\\u53EF\\u9009\\u503C\\u4E3A main\\u3001code\\u3001file \\u6216\\u5176\\u4ED6\\u81EA\\u5B9A\\u4E49\\u5B57\\u7B26\\u4E32\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onActiveOptionChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6FC0\\u6D3B\\u9009\\u9879\\u53D8\\u66F4\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u8FD4\\u56DE\\u9F20\\u6807\\u4E8B\\u4EF6\\u548C\\u5F53\\u524D\\u6FC0\\u6D3B\\u9879\\u952E\\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: MouseEvent, activeKey: string) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onBackWard\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8FD4\\u56DE\\u64CD\\u4F5C\\u7684\\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u8FD4\\u56DE\\u9F20\\u6807\\u4E8B\\u4EF6\\u548C\\u5F53\\u524D\\u6A21\\u5F0F\\uFF0C\\u652F\\u6301\\u5F02\\u6B65\\u5904\\u7406\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: MouseEvent, mode: string) => void \", \"|\", \" Promise<any\", \">\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onDetailContentCopy\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BE6\\u60C5\\u5185\\u5BB9\\u590D\\u5236\\u64CD\\u4F5C\\u7684\\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u8FD4\\u56DE\\u9F20\\u6807\\u4E8B\\u4EF6\\u3001\\u590D\\u5236\\u7684\\u5185\\u5BB9\\u548C\\u590D\\u5236\\u7ED3\\u679C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: MouseEvent, content: string, res: boolean) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onFileContentChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6587\\u4EF6\\u5185\\u5BB9\\u53D8\\u66F4\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u8FD4\\u56DE\\u53D8\\u66F4\\u540E\\u7684\\u6587\\u4EF6\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(content: string) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderDetailContent\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u8BE6\\u60C5\\u533A\\u57DF\\u5185\\u5BB9\\u7684\\u6E32\\u67D3\\u51FD\\u6570\\uFF0C\\u63A5\\u6536\\u5F53\\u524D\\u6A21\\u5F0F\\u4F5C\\u4E3A\\u53C2\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(mode: string) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderDetailHeader\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u8BE6\\u60C5\\u533A\\u57DF\\u5934\\u90E8\\u7684\\u6E32\\u67D3\\u51FD\\u6570\\uFF0C\\u63A5\\u6536\\u5F53\\u524D\\u6A21\\u5F0F\\u4F5C\\u4E3A\\u53C2\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(mode: string, detailContent: \", mdx(ApiType, {\n    detail: \"[CodeItemProps](#CodeItemProps) \\\\| [FileItemProps](#FileItemProps) \\\\| any\",\n    mdxType: \"ApiType\"\n  }, \"DetailContent\"), \") => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderMainContent\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u4E3B\\u5185\\u5BB9\\u533A\\u57DF\\u7684\\u6E32\\u67D3\\u51FD\\u6570\\uFF0C\\u63A5\\u6536\\u5F53\\u524D\\u6FC0\\u6D3B\\u9879\\u952E\\u503C\\u4F5C\\u4E3A\\u53C2\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(activeKey: string) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React.CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Code\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"activeKey\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u524D\\u6FC0\\u6D3B\\u9879\\u7684\\u6807\\u8BC6\\uFF0C\\u652F\\u6301\\u5355\\u4E2A\\u5B57\\u7B26\\u4E32\\uFF08\\u5355\\u9009\\uFF09\\u6216\\u5B57\\u7B26\\u4E32\\u6570\\u7EC4\\uFF08\\u591A\\u9009\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" string[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7C7B\\u540D\\uFF0C\\u7528\\u4E8E\\u8986\\u76D6\\u7EC4\\u4EF6\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"codes\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4EE3\\u7801\\u8BE6\\u60C5\\u5217\\u8868\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#CodeItemProps\"\n  }, \"CodeItemProps\"), \"[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6FC0\\u6D3B\\u9879\\u53D8\\u66F4\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u8FD4\\u56DE\\u5F53\\u524D\\u6FC0\\u6D3B\\u7684\\u9879\\u6807\\u8BC6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(activeKey: string \", \"|\", \" string[]) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onExpand\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C55\\u5F00\\u64CD\\u4F5C\\u7684\\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u8FD4\\u56DE\\u9F20\\u6807\\u4E8B\\u4EF6\\u548C\\u5BF9\\u5E94\\u7684\\u4EE3\\u7801\\u8BE6\\u60C5\\u9879\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: MouseEvent, code: \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#CodeItemProps\"\n  }, \"CodeItemProps\"), \", mode: string) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React.CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"CodeItemProps\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"codeHighlightProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"codeHighlight \\u7684\\u53C2\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/plus/codehighlight#API\"\n  }, \"CodeHighlightProps\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"content\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4EE3\\u7801/\\u6587\\u672C\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"isJson\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u4E3A JSON \\u683C\\u5F0F\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"jsonViewerProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"JsonViewer \\u7684\\u53C2\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/plus/jsonviewer#JsonViewer\"\n  }, \"JsonViewerProps\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"language\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4EE3\\u7801\\u8BED\\u8A00\\u7C7B\\u578B\\uFF08\\u5982 js\\u3001ts\\u3001json \\u7B49\\uFF09\\uFF0C \\u540C codeHighlight \\u7684\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"File\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"FileContent\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"activeKey\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u524D\\u6FC0\\u6D3B\\u9879\\u7684\\u6807\\u8BC6\\uFF0C\\u652F\\u6301\\u5355\\u4E2A\\u5B57\\u7B26\\u4E32\\uFF08\\u5355\\u9009\\uFF09\\u6216\\u5B57\\u7B26\\u4E32\\u6570\\u7EC4\\uFF08\\u591A\\u9009\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" string[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7C7B\\u540D\\uFF0C\\u7528\\u4E8E\\u8986\\u76D6\\u7EC4\\u4EF6\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"files\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6587\\u4EF6\\u4FE1\\u606F\\u5217\\u8868\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#FileItemProps\"\n  }, \"FileItemProps\"), \"[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6FC0\\u6D3B\\u9879\\u53D8\\u66F4\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u8FD4\\u56DE\\u5F53\\u524D\\u6FC0\\u6D3B\\u7684\\u9879\\u6807\\u8BC6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(activeKey: string \", \"|\", \" string[]) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onExpand\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C55\\u5F00\\u6587\\u4EF6\\u9879\\u7684\\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u8FD4\\u56DE\\u9F20\\u6807\\u4E8B\\u4EF6\\u548C\\u5BF9\\u5E94\\u7684\\u6587\\u4EF6\\u4FE1\\u606F\\u9879\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: MouseEvent, file: FileItemProps, mode: string) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5185\\u8054\\u6837\\u5F0F\\uFF0C\\u7528\\u4E8E\\u8C03\\u6574\\u7EC4\\u4EF6\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React.CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"FileItemProps\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"content\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7F16\\u8F91\\u533A\\u57DF\\u7684\\u6587\\u672C/\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"editable\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u53EF\\u7F16\\u8F91\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"extensions\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6269\\u5C55\\u63D2\\u4EF6\\u5217\\u8868\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Extension[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"imgUploadProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u7247\\u4E0A\\u4F20\\u76F8\\u5173\\u914D\\u7F6E\\u5C5E\\u6027\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ImageUploadNodeOptions\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"key\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u552F\\u4E00\\u6807\\u8BC6\\u952E\\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u540D\\u79F0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onContentChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5185\\u5BB9\\u53D8\\u66F4\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u8FD4\\u56DE\\u53D8\\u66F4\\u540E\\u7684\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(content: string) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React.CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"))))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/ai/sidebar","next":null,"previous":{"fields":{"slug":"en-US/ai/sidebar"},"id":"780f68a3-c68c-574a-aa82-e42a6dd87e85","frontmatter":{"title":"Sidebar","localeCode":"en-US","icon":"doc-sidebar","showNew":true}}}},"staticQueryHashes":["1348983216308087","1477422646308087","3245198693308087","417590761308087","63159454308087"]}