npm - @kne-components/components-core - Versions diffs - 0.4.59 → 0.4.60 - Mend

@kne-components/components-core 0.4.59 → 0.4.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (116) hide show

package/build/static/js/7394.d52d668e.chunk.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- "use strict";(self.webpackChunk_kne_components_components_core=self.webpackChunk_kne_components_components_core\|\|[]).push([[2723,7394],{22978(n,t,e){e.d(t,{A:()=>o});var a=e(70703),d=e(55199);e(9056);const o={name:"button-group",summary:"<p>@kne/button-group \u662f\u4e00\u4e2a React \u6309\u94ae\u7ec4\u4ef6\u5e93\uff0c\u63d0\u4f9b\u4e86\u4e00\u7cfb\u5217\u529f\u80fd\u4e30\u5bcc\u7684\u6309\u94ae\u7ec4\u4ef6\uff0c\u7528\u4e8e\u7b80\u5316\u5e38\u89c1\u7684\u6309\u94ae\u4ea4\u4e92\u573a\u666f\u3002\u8be5\u5e93\u4e13\u6ce8\u4e8e\u63d0\u4f9b\u81ea\u9002\u5e94\u5e03\u5c40\u3001\u52a0\u8f7d\u72b6\u6001\u7ba1\u7406\u3001\u786e\u8ba4\u64cd\u4f5c\u548c\u6570\u636e\u8bf7\u6c42\u7b49\u529f\u80fd\uff0c\u4f7f\u5f00\u53d1\u8005\u80fd\u591f\u5feb\u901f\u5b9e\u73b0\u5404\u79cd\u590d\u6742\u7684\u6309\u94ae\u4ea4\u4e92\u9700\u6c42\u3002</p>\n<h3>ButtonGroup</h3>\n<p>\u81ea\u9002\u5e94\u6309\u94ae\u7ec4\u7ec4\u4ef6\uff0c\u80fd\u591f\u6839\u636e\u5bb9\u5668\u5bbd\u5ea6\u81ea\u52a8\u8c03\u6574\u663e\u793a\u7684\u6309\u94ae\u6570\u91cf\u3002\u5f53\u5bb9\u5668\u5bbd\u5ea6\u4e0d\u8db3\u4ee5\u663e\u793a\u6240\u6709\u6309\u94ae\u65f6\uff0c\u4f1a\u81ea\u52a8\u5c06\u591a\u4f59\u7684\u6309\u94ae\u653e\u5165\u4e0b\u62c9\u83dc\u5355\u4e2d\uff0c\u786e\u4fdd\u754c\u9762\u5e03\u5c40\u7f8e\u89c2\u4e14\u529f\u80fd\u5b8c\u6574\u3002</p>\n<p><strong>\u4e3b\u8981\u7279\u6027\uff1a</strong></p>\n<ul>\n<li>\u81ea\u52a8\u9002\u5e94\u5bb9\u5668\u5bbd\u5ea6</li>\n<li>\u652f\u6301\u7d27\u51d1\u6a21\u5f0f\uff08Space.Compact\uff09</li>\n<li>\u652f\u6301\u94fe\u63a5\u6837\u5f0f\uff08\u9002\u7528\u4e8e\u8868\u683c\u64cd\u4f5c\u5217\uff09</li>\n<li>\u53ef\u6307\u5b9a\u663e\u793a\u7684\u6309\u94ae\u6570\u91cf</li>\n<li>\u652f\u6301\u7981\u7528\u3001\u9690\u85cf\u72b6\u6001</li>\n<li>\u652f\u6301\u81ea\u5b9a\u4e49\u6309\u94ae\u6e32\u67d3</li>\n<li>\u652f\u6301\u7981\u7528\u6309\u94ae\u7684\u5de5\u5177\u63d0\u793a</li>\n</ul>\n<p><strong>\u9002\u7528\u573a\u666f\uff1a</strong></p>\n<ul>\n<li>\u64cd\u4f5c\u680f\u3001\u5de5\u5177\u680f</li>\n<li>\u8868\u683c\u64cd\u4f5c\u5217</li>\n<li>\u9762\u677f\u6807\u9898\u680f</li>\n<li>\u4efb\u4f55\u9700\u8981\u81ea\u9002\u5e94\u6309\u94ae\u5e03\u5c40\u7684\u573a\u666f</li>\n</ul>\n<h3>LoadingButton</h3>\n<p>\u5c01\u88c5\u4e86\u52a0\u8f7d\u72b6\u6001\u7684\u6309\u94ae\u7ec4\u4ef6\uff0c\u7b80\u5316\u4e86\u5f02\u6b65\u64cd\u4f5c\u7684\u5904\u7406\u3002\u901a\u8fc7\u5185\u7f6e\u7684\u72b6\u6001\u7ba1\u7406\uff0c\u5728\u5f02\u6b65\u64cd\u4f5c\u6267\u884c\u671f\u95f4\u81ea\u52a8\u663e\u793a\u52a0\u8f7d\u72b6\u6001\uff0c\u63d0\u5347\u7528\u6237\u4f53\u9a8c\u3002\u540c\u65f6\u63d0\u4f9b\u4e86 useLoading hook\uff0c\u65b9\u4fbf\u5728\u5176\u4ed6\u7ec4\u4ef6\u4e2d\u590d\u7528\u52a0\u8f7d\u72b6\u6001\u7ba1\u7406\u903b\u8f91\u3002</p>\n<p><strong>\u4e3b\u8981\u7279\u6027\uff1a</strong></p>\n<ul>\n<li>\u81ea\u52a8\u7ba1\u7406\u52a0\u8f7d\u72b6\u6001</li>\n<li>\u652f\u6301\u81ea\u5b9a\u4e49\u52a0\u8f7d\u6587\u6848</li>\n<li>\u81ea\u52a8\u5904\u7406\u9519\u8bef\u60c5\u51b5</li>\n<li>\u652f\u6301 loading \u5c5e\u6027\u624b\u52a8\u63a7\u5236</li>\n<li>\u63d0\u4f9b\u7684 useLoading Hook \u53ef\u5728\u5176\u4ed6\u7ec4\u4ef6\u4f7f\u7528</li>\n</ul>\n<p><strong>\u9002\u7528\u573a\u666f\uff1a</strong></p>\n<ul>\n<li>\u8868\u5355\u63d0\u4ea4\u6309\u94ae</li>\n<li>\u6570\u636e\u5bfc\u51fa\u6309\u94ae</li>\n<li>\u4efb\u4f55\u9700\u8981\u5f02\u6b65\u64cd\u4f5c\u7684\u6309\u94ae</li>\n<li>\u975e\u6309\u94ae\u7ec4\u4ef6\u7684\u5f02\u6b65\u72b6\u6001\u7ba1\u7406</li>\n</ul>\n<h3>ConfirmButton</h3>\n<p>\u5e26\u6709\u786e\u8ba4\u529f\u80fd\u7684\u6309\u94ae\u7ec4\u4ef6\uff0c\u652f\u6301\u5f39\u7a97\u786e\u8ba4\uff08Popconfirm\uff09\u548c\u6a21\u6001\u6846\u786e\u8ba4\uff08Modal\uff09\u4e24\u79cd\u6a21\u5f0f\u3002\u9002\u7528\u4e8e\u9700\u8981\u7528\u6237\u4e8c\u6b21\u786e\u8ba4\u7684\u64cd\u4f5c\uff0c\u5982\u5220\u9664\u3001\u63d0\u4ea4\u7b49\u91cd\u8981\u64cd\u4f5c\u3002\u540c\u65f6\u63d0\u4f9b\u4e86 ConfirmLink \u548c ConfirmText \u53d8\u4f53\uff0c\u4ee5\u53ca withConfirm \u9ad8\u9636\u7ec4\u4ef6\uff0c\u6ee1\u8db3\u4e0d\u540c\u573a\u666f\u7684\u786e\u8ba4\u9700\u6c42\u3002</p>\n<p><strong>\u4e3b\u8981\u7279\u6027\uff1a</strong></p>\n<ul>\n<li>\u652f\u6301 Popconfirm \u548c Modal \u4e24\u79cd\u786e\u8ba4\u6a21\u5f0f</li>\n<li>\u652f\u6301\u5371\u9669\u64cd\u4f5c\u6837\u5f0f\uff08\u7ea2\u8272\u6309\u94ae\uff09</li>\n<li>\u53ef\u81ea\u5b9a\u4e49\u786e\u8ba4\u548c\u53d6\u6d88\u6309\u94ae\u6587\u6848</li>\n<li>\u63d0\u4f9b ConfirmLink \u548c ConfirmText \u53d8\u4f53</li>\n<li>\u786e\u8ba4\u65f6\u81ea\u52a8\u663e\u793a\u52a0\u8f7d\u72b6\u6001</li>\n</ul>\n<p><strong>\u9002\u7528\u573a\u666f\uff1a</strong></p>\n<ul>\n<li>\u5220\u9664\u64cd\u4f5c</li>\n<li>\u6570\u636e\u63d0\u4ea4</li>\n<li>\u5ba1\u6838\u64cd\u4f5c</li>\n<li>\u8868\u683c\u884c\u64cd\u4f5c\uff08\u4f7f\u7528 ConfirmLink/ConfirmText\uff09</li>\n<li>\u4efb\u4f55\u9700\u8981\u7528\u6237\u4e8c\u6b21\u786e\u8ba4\u7684\u64cd\u4f5c</li>\n</ul>\n<h3>FetchButton</h3>\n<p>\u96c6\u6210\u4e86\u6570\u636e\u8bf7\u6c42\u529f\u80fd\u7684\u6309\u94ae\u7ec4\u4ef6\uff0c\u57fa\u4e8e @kne/react-fetch \u5e93\u5b9e\u73b0\u3002\u53ef\u4ee5\u76f4\u63a5\u5904\u7406 API \u8bf7\u6c42\uff0c\u5e76\u5728\u8bf7\u6c42\u8fc7\u7a0b\u4e2d\u81ea\u52a8\u7ba1\u7406\u52a0\u8f7d\u72b6\u6001\uff0c\u7b80\u5316\u4e86\u6570\u636e\u4ea4\u4e92\u7684\u5b9e\u73b0\u3002</p>\n<p><strong>\u4e3b\u8981\u7279\u6027\uff1a</strong></p>\n<ul>\n<li>\u81ea\u52a8\u7ba1\u7406\u8bf7\u6c42\u52a0\u8f7d\u72b6\u6001</li>\n<li>\u652f\u6301\u8bf7\u6c42\u6210\u529f/\u5931\u8d25\u56de\u8c03</li>\n<li>\u652f\u6301\u53c2\u6570\u4f20\u9012</li>\n<li>\u652f\u6301\u8bf7\u6c42\u62e6\u622a\uff08beforeFetch\uff09</li>\n<li>\u57fa\u4e8e @kne/react-fetch \u5b9e\u73b0</li>\n</ul>\n<p><strong>\u9002\u7528\u573a\u666f\uff1a</strong></p>\n<ul>\n<li>\u6570\u636e\u5237\u65b0\u6309\u94ae</li>\n<li>\u6587\u4ef6\u5bfc\u51fa\u6309\u94ae</li>\n<li>API \u8bf7\u6c42\u6309\u94ae</li>\n<li>\u4efb\u4f55\u6309\u94ae\u89e6\u53d1\u7684\u6570\u636e\u8bf7\u6c42\u573a\u666f</li>\n</ul>\n<h3>ButtonFooter</h3>\n<p>\u9875\u9762\u5e95\u90e8\u6309\u94ae\u533a\u57df\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u81ea\u52a8\u8ba1\u7b97\u9ad8\u5ea6\u5e76\u8bbe\u7f6e CSS \u53d8\u91cf\uff0c\u65b9\u4fbf\u9875\u9762\u5e03\u5c40\u548c\u6837\u5f0f\u8c03\u6574\u3002\u5728\u5c0f\u5c4f\u5e55\u4e0b\uff0c\u4f1a\u81ea\u52a8\u5c06\u5185\u5bb9\u6e32\u67d3\u5230 body\uff0c\u786e\u4fdd\u6309\u94ae\u59cb\u7ec8\u53ef\u89c1\u3002</p>\n<p><strong>\u4e3b\u8981\u7279\u6027\uff1a</strong></p>\n<ul>\n<li>\u81ea\u52a8\u8ba1\u7b97\u9ad8\u5ea6\u5e76\u8bbe\u7f6e CSS \u53d8\u91cf</li>\n<li>\u54cd\u5e94\u5f0f\u8bbe\u8ba1\uff0c\u5c0f\u5c4f\u5e55\u4e0b\u56fa\u5b9a\u5230\u5e95\u90e8</li>\n<li>\u652f\u6301\u591a\u79cd\u5e03\u5c40\u65b9\u5f0f\uff08\u5c45\u4e2d\u3001\u5de6\u53f3\u5206\u5e03\u7b49\uff09</li>\n<li>\u9002\u7528\u4e8e\u8868\u5355\u9875\u9762\u7684\u5e95\u90e8\u64cd\u4f5c\u533a</li>\n</ul>\n<p><strong>\u9002\u7528\u573a\u666f\uff1a</strong></p>\n<ul>\n<li>\u8868\u5355\u9875\u9762\u5e95\u90e8\u64cd\u4f5c\u6309\u94ae</li>\n<li>\u8be6\u60c5\u9875\u9762\u5e95\u90e8\u64cd\u4f5c\u6309\u94ae</li>\n<li>\u5bf9\u8bdd\u6846\u5e95\u90e8\u6309\u94ae</li>\n<li>\u4efb\u4f55\u9700\u8981\u56fa\u5b9a\u5728\u5e95\u90e8\u7684\u64cd\u4f5c\u6309\u94ae\u533a\u57df</li>\n</ul>\n<h2>\u7ec4\u4ef6\u5173\u7cfb</h2>\n<pre><code>ButtonGroup (\u81ea\u9002\u5e94\u5e03\u5c40)\n \u251c\u2500\u2500 LoadingButton (\u52a0\u8f7d\u72b6\u6001)\n \u251c\u2500\u2500 ConfirmButton (\u786e\u8ba4\u529f\u80fd)\n \u2502 \u251c\u2500\u2500 ConfirmLink (\u94fe\u63a5\u53d8\u4f53)\n \u2502 \u2514\u2500\u2500 ConfirmText (\u6587\u672c\u53d8\u4f53)\n \u2514\u2500\u2500 FetchButton (\u6570\u636e\u8bf7\u6c42)\n \u2514\u2500\u2500 \u57fa\u4e8e LoadingButton\n\nButtonFooter (\u5e95\u90e8\u56fa\u5b9a\u533a\u57df)\n</code></pre>\n<h2>\u8bbe\u8ba1\u7406\u5ff5</h2>\n<p>\u8be5\u7ec4\u4ef6\u5e93\u7684\u8bbe\u8ba1\u7406\u5ff5\u662f\u901a\u8fc7\u5c01\u88c5\u5e38\u89c1\u7684\u6309\u94ae\u4ea4\u4e92\u6a21\u5f0f\uff0c\u63d0\u4f9b\u5f00\u7bb1\u5373\u7528\u7684\u89e3\u51b3\u65b9\u6848\uff0c\u540c\u65f6\u4fdd\u6301\u8db3\u591f\u7684\u7075\u6d3b\u6027\u548c\u53ef\u6269\u5c55\u6027\uff1a</p>\n<ol>\n<li>\n<p><strong>\u5173\u6ce8\u70b9\u5206\u79bb</strong>\uff1a\u6bcf\u4e2a\u7ec4\u4ef6\u4e13\u6ce8\u4e8e\u89e3\u51b3\u7279\u5b9a\u7684\u95ee\u9898\uff0c\u5982 ButtonGroup \u4e13\u6ce8\u4e8e\u5e03\u5c40\uff0cLoadingButton \u4e13\u6ce8\u4e8e\u72b6\u6001\u7ba1\u7406\u3002</p>\n</li>\n<li>\n<p><strong>\u7ec4\u5408\u4f18\u4e8e\u7ee7\u627f</strong>\uff1a\u901a\u8fc7\u7ec4\u5408\u4e0d\u540c\u7684\u529f\u80fd\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u5b9e\u73b0\u590d\u6742\u7684\u4ea4\u4e92\u9700\u6c42\uff0c\u5982 FetchButton \u5c31\u662f LoadingButton \u4e0e\u6570\u636e\u8bf7\u6c42\u529f\u80fd\u7684\u7ec4\u5408\u3002</p>\n</li>\n<li>\n<p><strong>\u58f0\u660e\u5f0f API</strong>\uff1a\u63d0\u4f9b\u7b80\u6d01\u660e\u4e86\u7684 API\uff0c\u4f7f\u5f00\u53d1\u8005\u80fd\u591f\u4ee5\u58f0\u660e\u5f0f\u7684\u65b9\u5f0f\u63cf\u8ff0 UI \u548c\u4ea4\u4e92\u884c\u4e3a\u3002</p>\n</li>\n<li>\n<p><strong>\u6e10\u8fdb\u5f0f\u589e\u5f3a</strong>\uff1a\u57fa\u7840\u7ec4\u4ef6\u53ef\u4ee5\u72ec\u7acb\u4f7f\u7528\uff0c\u4e5f\u53ef\u4ee5\u4e0e\u5176\u4ed6\u7ec4\u4ef6\u7ec4\u5408\u4f7f\u7528\uff0c\u5b9e\u73b0\u66f4\u590d\u6742\u7684\u529f\u80fd\u3002</p>\n</li>\n<li>\n<p><strong>\u7528\u6237\u4f53\u9a8c\u4f18\u5148</strong>\uff1a\u6ce8\u91cd\u7ec6\u8282\uff0c\u5982\u81ea\u9002\u5e94\u5e03\u5c40\u3001\u52a0\u8f7d\u72b6\u6001\u53cd\u9988\u7b49\uff0c\u63d0\u5347\u6700\u7ec8\u7528\u6237\u7684\u4f7f\u7528\u4f53\u9a8c\u3002</p>\n</li>\n</ol>\n<h2>\u7279\u6027\u603b\u7ed3</h2>\n<ul>\n<li><strong>\u81ea\u9002\u5e94\u5e03\u5c40</strong>\uff1a\u6839\u636e\u5bb9\u5668\u5bbd\u5ea6\u81ea\u52a8\u8c03\u6574\u6309\u94ae\u663e\u793a\u65b9\u5f0f</li>\n<li><strong>\u52a0\u8f7d\u72b6\u6001\u7ba1\u7406</strong>\uff1a\u7b80\u5316\u5f02\u6b65\u64cd\u4f5c\u7684\u52a0\u8f7d\u72b6\u6001\u5904\u7406</li>\n<li><strong>\u64cd\u4f5c\u786e\u8ba4</strong>\uff1a\u63d0\u4f9b\u591a\u79cd\u786e\u8ba4\u6a21\u5f0f\uff0c\u589e\u5f3a\u7528\u6237\u64cd\u4f5c\u5b89\u5168\u6027</li>\n<li><strong>\u6570\u636e\u8bf7\u6c42\u96c6\u6210</strong>\uff1a\u7b80\u5316\u6309\u94ae\u4e0e\u540e\u7aef API \u7684\u4ea4\u4e92</li>\n<li><strong>\u56fd\u9645\u5316\u652f\u6301</strong>\uff1a\u5185\u7f6e\u4e2d\u82f1\u6587\u8bed\u8a00\u5305</li>\n<li><strong>\u9ad8\u5ea6\u53ef\u5b9a\u5236</strong>\uff1a\u7ec4\u4ef6\u63d0\u4f9b\u4e30\u5bcc\u7684\u914d\u7f6e\u9009\u9879</li>\n<li><strong>\u54cd\u5e94\u5f0f\u8bbe\u8ba1</strong>\uff1a\u9002\u914d\u4e0d\u540c\u5c4f\u5e55\u5c3a\u5bf8</li>\n<li><strong>TypeScript \u53cb\u597d</strong>\uff1a\u5b8c\u6574\u7684\u7c7b\u578b\u5b9a\u4e49</li>\n</ul>",api:"<p>\u81ea\u9002\u5e94\u6309\u94ae\u7ec4\u7ec4\u4ef6\uff0c\u80fd\u591f\u6839\u636e\u5bb9\u5668\u5bbd\u5ea6\u81ea\u52a8\u8c03\u6574\u663e\u793a\u7684\u6309\u94ae\u6570\u91cf\uff0c\u5e76\u5c06\u591a\u4f59\u7684\u6309\u94ae\u653e\u5165\u4e0b\u62c9\u83dc\u5355\u4e2d\u3002</p>\n<h3>\u5c5e\u6027</h3>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>list</td>\n<td>Array<object \| function></td>\n<td>[]</td>\n<td>\u6309\u94ae\u5217\u8868\uff0c\u53ef\u4ee5\u662f\u914d\u7f6e\u5bf9\u8c61\u6216\u6e32\u67d3\u51fd\u6570</td>\n</tr>\n<tr>\n<td>compact</td>\n<td>boolean</td>\n<td>false</td>\n<td>\u662f\u5426\u4f7f\u7528\u7d27\u51d1\u6a21\u5f0f\uff08Space.Compact\uff09</td>\n</tr>\n<tr>\n<td>showLength</td>\n<td>number</td>\n<td>-</td>\n<td>\u6307\u5b9a\u663e\u793a\u7684\u6309\u94ae\u6570\u91cf\uff0c\u4e0d\u6307\u5b9a\u5219\u81ea\u52a8\u8ba1\u7b97</td>\n</tr>\n<tr>\n<td>more</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\"\u66f4\u591a\"\u6309\u94ae</td>\n</tr>\n<tr>\n<td>moreType</td>\n<td>'default' \| 'link'</td>\n<td>'default'</td>\n<td>\u66f4\u591a\u6309\u94ae\u7c7b\u578b</td>\n</tr>\n<tr>\n<td>getPopupContainer</td>\n<td>function</td>\n<td>-</td>\n<td>\u4e0b\u62c9\u83dc\u5355\u6e32\u67d3\u7236\u8282\u70b9</td>\n</tr>\n<tr>\n<td>trigger</td>\n<td>string</td>\n<td>-</td>\n<td>\u4e0b\u62c9\u83dc\u5355\u89e6\u53d1\u65b9\u5f0f</td>\n</tr>\n<tr>\n<td>itemClassName</td>\n<td>string</td>\n<td>-</td>\n<td>\u6309\u94ae\u9879\u7684\u81ea\u5b9a\u4e49\u7c7b\u540d</td>\n</tr>\n<tr>\n<td>...SpaceProps</td>\n<td>-</td>\n<td>-</td>\n<td>Space \u7ec4\u4ef6\u7684\u5176\u4ed6\u5c5e\u6027\uff08size\u3001split\u3001align\u3001style\u7b49\uff09</td>\n</tr>\n</tbody>\n</table>\n<h3>list \u914d\u7f6e\u9879</h3>\n<p>\u5f53 list \u9879\u4e3a\u5bf9\u8c61\u65f6\uff0c\u652f\u6301\u4ee5\u4e0b\u5c5e\u6027\uff1a</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>\u6309\u94ae\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>type</td>\n<td>string</td>\n<td>-</td>\n<td>\u6309\u94ae\u7c7b\u578b\uff08primary\u3001default\u3001dashed\u3001link\u3001text\uff09</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>boolean</td>\n<td>false</td>\n<td>\u662f\u5426\u7981\u7528</td>\n</tr>\n<tr>\n<td>hidden</td>\n<td>boolean</td>\n<td>false</td>\n<td>\u662f\u5426\u9690\u85cf</td>\n</tr>\n<tr>\n<td>confirm</td>\n<td>boolean</td>\n<td>false</td>\n<td>\u662f\u5426\u9700\u8981\u786e\u8ba4</td>\n</tr>\n<tr>\n<td>message</td>\n<td>string \| ReactNode</td>\n<td>-</td>\n<td>\u786e\u8ba4\u63d0\u793a\u5185\u5bb9\uff08\u8bbe\u7f6e\u540e\u4f1a\u81ea\u52a8\u4f7f\u7528 ConfirmButton\uff09</td>\n</tr>\n<tr>\n<td>isDelete</td>\n<td>boolean</td>\n<td>false</td>\n<td>\u662f\u5426\u4e3a\u5220\u9664\u64cd\u4f5c\uff08\u7ea2\u8272\u6309\u94ae\uff09</td>\n</tr>\n<tr>\n<td>isModal</td>\n<td>boolean</td>\n<td>false</td>\n<td>\u662f\u5426\u4f7f\u7528\u6a21\u6001\u6846\u786e\u8ba4\uff08\u5728\u4e0b\u62c9\u83dc\u5355\u4e2d\u81ea\u52a8\u542f\u7528\uff09</td>\n</tr>\n<tr>\n<td>buttonComponent</td>\n<td>ReactComponent</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6309\u94ae\u7ec4\u4ef6</td>\n</tr>\n<tr>\n<td>tooltipProps</td>\n<td>object</td>\n<td>-</td>\n<td>Tooltip \u7ec4\u4ef6\u5c5e\u6027\uff08\u7981\u7528\u65f6\u663e\u793a\u63d0\u793a\uff09</td>\n</tr>\n<tr>\n<td>...ButtonProps</td>\n<td>-</td>\n<td>-</td>\n<td>Button \u7ec4\u4ef6\u7684\u5176\u4ed6\u5c5e\u6027</td>\n</tr>\n</tbody>\n</table>\n<p>\u5f53 list \u9879\u4e3a\u51fd\u6570\u65f6\uff0c\u51fd\u6570\u7b7e\u540d\u4e3a\uff1a</p>\n<pre><code class=\"language-typescript\">(props: { key: number; className: string }, context: { isDropdown: boolean }) => ReactNode\n</code></pre>\n<hr>\n<h2>LoadingButton</h2>\n<p>\u5c01\u88c5\u4e86\u52a0\u8f7d\u72b6\u6001\u7684\u6309\u94ae\u7ec4\u4ef6\uff0c\u7b80\u5316\u5f02\u6b65\u64cd\u4f5c\u7684\u5904\u7406\u3002</p>\n<h3>\u5c5e\u6027</h3>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>onClick</td>\n<td>function \| Promise</td>\n<td>-</td>\n<td>\u70b9\u51fb\u6309\u94ae\u65f6\u7684\u56de\u8c03\u51fd\u6570\uff0c\u53ef\u4ee5\u8fd4\u56de Promise</td>\n</tr>\n<tr>\n<td>loading</td>\n<td>boolean</td>\n<td>false</td>\n<td>\u662f\u5426\u663e\u793a\u52a0\u8f7d\u72b6\u6001</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>boolean</td>\n<td>false</td>\n<td>\u662f\u5426\u7981\u7528\u6309\u94ae</td>\n</tr>\n<tr>\n<td>children</td>\n<td>ReactNode \| function</td>\n<td>-</td>\n<td>\u6309\u94ae\u5185\u5bb9\uff0c\u53ef\u4ee5\u662f\u51fd\u6570\u63a5\u6536 loading \u72b6\u6001</td>\n</tr>\n<tr>\n<td>...ButtonProps</td>\n<td>-</td>\n<td>-</td>\n<td>Button \u7ec4\u4ef6\u7684\u5176\u4ed6\u5c5e\u6027</td>\n</tr>\n</tbody>\n</table>\n<h3>useLoading Hook</h3>\n<p>\u7528\u4e8e\u7ba1\u7406\u5f02\u6b65\u64cd\u4f5c\u52a0\u8f7d\u72b6\u6001\u7684 Hook\u3002</p>\n<h4>\u53c2\u6570</h4>\n<table>\n<thead>\n<tr>\n<th>\u53c2\u6570\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>callback</td>\n<td>function</td>\n<td>-</td>\n<td>\u5f02\u6b65\u56de\u8c03\u51fd\u6570</td>\n</tr>\n</tbody>\n</table>\n<h4>\u8fd4\u56de\u503c</h4>\n<table>\n<thead>\n<tr>\n<th>\u540d\u79f0</th>\n<th>\u7c7b\u578b</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>isLoading</td>\n<td>boolean</td>\n<td>\u5f53\u524d\u52a0\u8f7d\u72b6\u6001</td>\n</tr>\n<tr>\n<td>setIsLoading</td>\n<td>function</td>\n<td>\u8bbe\u7f6e\u52a0\u8f7d\u72b6\u6001\u7684\u51fd\u6570</td>\n</tr>\n<tr>\n<td>callback</td>\n<td>function</td>\n<td>\u5305\u88c5\u540e\u7684\u56de\u8c03\u51fd\u6570</td>\n</tr>\n</tbody>\n</table>\n<hr>\n<h2>ConfirmButton</h2>\n<p>\u5e26\u6709\u786e\u8ba4\u529f\u80fd\u7684\u6309\u94ae\u7ec4\u4ef6\uff0c\u652f\u6301\u5f39\u7a97\u786e\u8ba4\u548c\u6a21\u6001\u6846\u786e\u8ba4\u4e24\u79cd\u6a21\u5f0f\u3002</p>\n<h3>\u5c5e\u6027</h3>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>\u6309\u94ae\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>onClick</td>\n<td>function \| Promise</td>\n<td>-</td>\n<td>\u786e\u8ba4\u540e\u7684\u56de\u8c03\u51fd\u6570\uff0c\u53ef\u4ee5\u8fd4\u56de Promise</td>\n</tr>\n<tr>\n<td>title</td>\n<td>string \| ReactNode</td>\n<td>-</td>\n<td>\u786e\u8ba4\u6846\u6807\u9898</td>\n</tr>\n<tr>\n<td>message</td>\n<td>string \| ReactNode</td>\n<td>-</td>\n<td>\u786e\u8ba4\u6846\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>okText</td>\n<td>string</td>\n<td>-</td>\n<td>\u786e\u8ba4\u6309\u94ae\u6587\u5b57\uff08\u9ed8\u8ba4\u6839\u636e isDelete \u52a8\u6001\u663e\u793a\uff09</td>\n</tr>\n<tr>\n<td>cancelText</td>\n<td>string</td>\n<td>-</td>\n<td>\u53d6\u6d88\u6309\u94ae\u6587\u5b57</td>\n</tr>\n<tr>\n<td>isModal</td>\n<td>boolean</td>\n<td>false</td>\n<td>\u662f\u5426\u4f7f\u7528\u6a21\u6001\u6846\u786e\u8ba4\uff08\u9ed8\u8ba4\u4e3a Popconfirm\uff09</td>\n</tr>\n<tr>\n<td>isDelete</td>\n<td>boolean</td>\n<td>true</td>\n<td>\u662f\u5426\u4e3a\u5220\u9664\u64cd\u4f5c\uff08\u7ea2\u8272\u6309\u94ae\u3001\u786e\u8ba4\u6309\u94ae\uff09</td>\n</tr>\n<tr>\n<td>showCancel</td>\n<td>boolean</td>\n<td>true</td>\n<td>\u662f\u5426\u663e\u793a\u53d6\u6d88\u6309\u94ae</td>\n</tr>\n<tr>\n<td>placement</td>\n<td>string</td>\n<td>-</td>\n<td>Popconfirm \u7684\u4f4d\u7f6e</td>\n</tr>\n<tr>\n<td>getContainer</td>\n<td>function</td>\n<td>-</td>\n<td>\u786e\u8ba4\u6846\u6e32\u67d3\u5bb9\u5668</td>\n</tr>\n<tr>\n<td>renderModal</td>\n<td>function</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49 Modal \u6e32\u67d3\u51fd\u6570</td>\n</tr>\n<tr>\n<td>onCancel</td>\n<td>function</td>\n<td>-</td>\n<td>\u53d6\u6d88\u6309\u94ae\u7684\u56de\u8c03</td>\n</tr>\n<tr>\n<td>...ButtonProps</td>\n<td>-</td>\n<td>-</td>\n<td>Button \u7ec4\u4ef6\u7684\u5176\u4ed6\u5c5e\u6027</td>\n</tr>\n</tbody>\n</table>\n<h3>ConfirmLink</h3>\n<p>ConfirmButton \u7684\u94fe\u63a5\u6837\u5f0f\u53d8\u4f53\u3002</p>\n<h3>ConfirmText</h3>\n<p>ConfirmButton \u7684\u7eaf\u6587\u672c\u6837\u5f0f\u53d8\u4f53\u3002</p>\n<h3>withConfirm</h3>\n<p>\u9ad8\u9636\u7ec4\u4ef6\uff0c\u7528\u4e8e\u4e3a\u4efb\u610f\u7ec4\u4ef6\u6dfb\u52a0\u786e\u8ba4\u529f\u80fd\u3002</p>\n<blockquote>\n<p>\u26a0\ufe0f \u8be5 API \u5df2\u6807\u8bb0\u4e3a\u5e9f\u5f03\uff0c\u540e\u7eed\u7248\u672c\u53ef\u80fd\u5220\u9664\uff0c\u5efa\u8bae\u4e0d\u8981\u4f7f\u7528\u3002</p>\n</blockquote>\n<hr>\n<h2>FetchButton</h2>\n<p>\u96c6\u6210\u4e86\u6570\u636e\u8bf7\u6c42\u529f\u80fd\u7684\u6309\u94ae\u7ec4\u4ef6\uff0c\u57fa\u4e8e @kne/react-fetch \u5e93\u5b9e\u73b0\u3002</p>\n<h3>\u5c5e\u6027</h3>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>api</td>\n<td>object \| function</td>\n<td>-</td>\n<td>\u8bf7\u6c42 API \u914d\u7f6e</td>\n</tr>\n<tr>\n<td>params</td>\n<td>object</td>\n<td>-</td>\n<td>\u8bf7\u6c42\u53c2\u6570</td>\n</tr>\n<tr>\n<td>onSuccess</td>\n<td>function</td>\n<td>-</td>\n<td>\u8bf7\u6c42\u6210\u529f\u56de\u8c03\uff0c\u53c2\u6570\u4e3a <code>{ data }</code></td>\n</tr>\n<tr>\n<td>onError</td>\n<td>function</td>\n<td>-</td>\n<td>\u8bf7\u6c42\u5931\u8d25\u56de\u8c03</td>\n</tr>\n<tr>\n<td>beforeFetch</td>\n<td>function</td>\n<td>-</td>\n<td>\u8bf7\u6c42\u524d\u5904\u7406\u51fd\u6570\uff0c\u8fd4\u56de false \u53ef\u963b\u6b62\u8bf7\u6c42</td>\n</tr>\n<tr>\n<td>afterFetch</td>\n<td>function</td>\n<td>-</td>\n<td>\u8bf7\u6c42\u540e\u5904\u7406\u51fd\u6570</td>\n</tr>\n<tr>\n<td>fetchOptions</td>\n<td>object</td>\n<td>-</td>\n<td>\u4f20\u9012\u7ed9 fetch \u51fd\u6570\u7684\u9009\u9879</td>\n</tr>\n<tr>\n<td>onClick</td>\n<td>function</td>\n<td>-</td>\n<td>\u8bf7\u6c42\u6210\u529f\u540e\u7684\u56de\u8c03\uff08\u4e0e onSuccess \u76f8\u540c\uff09</td>\n</tr>\n<tr>\n<td>...LoadingButtonProps</td>\n<td>-</td>\n<td>-</td>\n<td>LoadingButton \u7ec4\u4ef6\u7684\u5176\u4ed6\u5c5e\u6027</td>\n</tr>\n</tbody>\n</table>\n<h3>api \u914d\u7f6e</h3>\n<p>api \u53ef\u4ee5\u662f\u5bf9\u8c61\u6216\u51fd\u6570\uff1a</p>\n<pre><code class=\"language-typescript\">// \u5bf9\u8c61\u5f62\u5f0f\napi: {\n loader: async ({ params }) => {\n return { data: 'response data' };\n }\n}\n\n// \u51fd\u6570\u5f62\u5f0f\napi: async ({ params }) => {\n return { data: 'response data' };\n}\n</code></pre>\n<hr>\n<h2>ButtonFooter</h2>\n<p>\u9875\u9762\u5e95\u90e8\u6309\u94ae\u533a\u57df\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u81ea\u52a8\u8ba1\u7b97\u9ad8\u5ea6\u5e76\u8bbe\u7f6e CSS \u53d8\u91cf\u3002</p>\n<h3>\u5c5e\u6027</h3>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>\u6309\u94ae\u533a\u57df\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>-</td>\n<td>\u5bb9\u5668\u7684\u81ea\u5b9a\u4e49\u7c7b\u540d</td>\n</tr>\n<tr>\n<td>innerClassName</td>\n<td>string</td>\n<td>-</td>\n<td>\u5185\u90e8\u5bb9\u5668\u7684\u81ea\u5b9a\u4e49\u7c7b\u540d</td>\n</tr>\n<tr>\n<td>target</td>\n<td>HTMLElement</td>\n<td>document.body</td>\n<td>\u79fb\u52a8\u7aef\u6e32\u67d3\u7684\u76ee\u6807\u5bb9\u5668</td>\n</tr>\n</tbody>\n</table>\n<h3>\u7279\u6027</h3>\n<ul>\n<li>\u5728\u5c0f\u5c4f\u5e55\uff08\u2264768px\uff09\u4e0b\uff0c\u4f1a\u5c06\u5185\u5bb9\u4f7f\u7528 Portal \u6e32\u67d3\u5230 body</li>\n<li>\u81ea\u52a8\u8ba1\u7b97\u9ad8\u5ea6\u5e76\u8bbe\u7f6e CSS \u53d8\u91cf</li>\n<li>\u9002\u7528\u4e8e\u56fa\u5b9a\u5728\u9875\u9762\u5e95\u90e8\u7684\u64cd\u4f5c\u6309\u94ae\u533a\u57df</li>\n</ul>",example:{isFull:!1,className:"",style:"",list:[{title:"ButtonGroup \u57fa\u7840\u7528\u6cd5",description:"ButtonGroup \u80fd\u591f\u6839\u636e\u5bb9\u5668\u5bbd\u5ea6\u81ea\u52a8\u8c03\u6574\u663e\u793a\u7684\u6309\u94ae\u6570\u91cf\uff0c\u5e76\u5c06\u591a\u4f59\u7684\u6309\u94ae\u653e\u5165\u4e0b\u62c9\u83dc\u5355\u4e2d\u3002\u9002\u7528\u4e8e\u64cd\u4f5c\u680f\u3001\u5de5\u5177\u680f\u7b49\u573a\u666f\u3002",code:"const { default: ButtonGroup } = _ButtonGroup;\nconst { Flex, Button, Space, Typography } = antd;\nconst { useState } = React;\nconst { Text } = Typography;\n\n// \u57fa\u7840\u7528\u6cd5 - \u81ea\u52a8\u9002\u5e94\u5bb9\u5668\u5bbd\u5ea6\nconst BasicExample = () => {\n const [width, setWidth] = useState(300);\n return (\n <Flex gap={16} vertical>\n <Text type=\"secondary\">\u8c03\u6574\u5bb9\u5668\u5bbd\u5ea6\u67e5\u770b\u81ea\u9002\u5e94\u6548\u679c</Text>\n <Flex gap={8}>\n <div style={{ width: `${width}px`, padding: '12px', background: '#f5f5f5', borderRadius: '8px' }}>\n <ButtonGroup\n list={[\n { type: 'primary', children: '\u65b0\u5efa' },\n { type: 'default', children: '\u7f16\u8f91' },\n { type: 'default', children: '\u5bfc\u51fa' },\n { type: 'default', children: '\u6253\u5370' },\n { children: '\u66f4\u591a\u64cd\u4f5c1', message: '\u786e\u5b9a\u6267\u884c\u5417\uff1f' },\n { children: '\u66f4\u591a\u64cd\u4f5c2', message: '\u786e\u5b9a\u6267\u884c\u5417\uff1f' }\n ]}\n />\n </div>\n </Flex>\n <Space>\n <Button onClick={() => setWidth(w => Math.max(200, w - 50))}>\u51cf\u5c11\u5bbd\u5ea6</Button>\n <Button onClick={() => setWidth(w => Math.min(600, w + 50))}>\u589e\u52a0\u5bbd\u5ea6</Button>\n </Space>\n </Flex>\n );\n};\n\n// \u7d27\u51d1\u6a21\u5f0f\nconst CompactExample = () => {\n return (\n <Flex gap={16} vertical>\n <Text type=\"secondary\">\u7d27\u51d1\u6a21\u5f0f\uff08\u9002\u7528\u4e8e\u5de5\u5177\u680f\uff09</Text>\n <ButtonGroup\n compact\n list={[\n { type: 'primary', children: '\u4fdd\u5b58' },\n { children: '\u64a4\u9500' },\n { children: '\u91cd\u505a' },\n { children: '\u5220\u9664', isDelete: true }\n ]}\n />\n </Flex>\n );\n};\n\n// \u94fe\u63a5\u6837\u5f0f - \u66f4\u591a\u6309\u94ae\nconst LinkStyleExample = () => {\n const [width, setWidth] = useState(200);\n return (\n <Flex gap={16} vertical>\n <Text type=\"secondary\">\u94fe\u63a5\u6837\u5f0f\uff08\u9002\u7528\u4e8e\u8868\u683c\u64cd\u4f5c\u680f\uff09</Text>\n <div style={{ width: `${width}px` }}>\n <ButtonGroup\n moreType=\"link\"\n list={[\n { children: '\u67e5\u770b', type: 'link' },\n { children: '\u7f16\u8f91', type: 'link' },\n { children: '\u5220\u9664', type: 'link', isDelete: true, message: '\u786e\u5b9a\u5220\u9664\u5417\uff1f' },\n { children: '\u5ba1\u6838', type: 'link' },\n { children: '\u9a73\u56de', type: 'link' }\n ]}\n />\n </div>\n <Space>\n <Button onClick={() => setWidth(w => Math.max(150, w - 30))}>-</Button>\n <Button onClick={() => setWidth(w => Math.min(400, w + 30))}>+</Button>\n </Space>\n </Flex>\n );\n};\n\n// \u6307\u5b9a\u663e\u793a\u6570\u91cf\nconst FixedLengthExample = () => {\n const [showLength, setShowLength] = useState(2);\n return (\n <Flex gap={16} vertical>\n <Text type=\"secondary\">\u6307\u5b9a\u663e\u793a\u6309\u94ae\u6570\u91cf\uff08showLength\uff09</Text>\n <Space>\n <Button\n type={showLength === 1 ? 'primary' : 'default'}\n onClick={() => setShowLength(1)}\n >\n \u663e\u793a1\u4e2a\n </Button>\n <Button\n type={showLength === 2 ? 'primary' : 'default'}\n onClick={() => setShowLength(2)}\n >\n \u663e\u793a2\u4e2a\n </Button>\n <Button\n type={showLength === 3 ? 'primary' : 'default'}\n onClick={() => setShowLength(3)}\n >\n \u663e\u793a3\u4e2a\n </Button>\n </Space>\n <ButtonGroup\n showLength={showLength}\n list={[\n { type: 'primary', children: '\u4e3b\u8981\u64cd\u4f5c' },\n { children: '\u6b21\u8981\u64cd\u4f5c1' },\n { children: '\u6b21\u8981\u64cd\u4f5c2' },\n { children: '\u6b21\u8981\u64cd\u4f5c3' },\n { children: '\u6b21\u8981\u64cd\u4f5c4' }\n ]}\n />\n </Flex>\n );\n};\n\n// \u81ea\u5b9a\u4e49\u6e32\u67d3\u51fd\u6570\nconst CustomRenderExample = () => {\n const CustomButton = (props) => (\n <Button {...props} style={{ borderRadius: '4px' }}>\n {props.children}\n </Button>\n );\n\n return (\n <Flex gap={16} vertical>\n <Text type=\"secondary\">\u81ea\u5b9a\u4e49\u6e32\u67d3\uff08\u652f\u6301\u51fd\u6570\u5f0f\u914d\u7f6e\uff09</Text>\n <div style={{ padding: '12px', background: '#f5f5f5', borderRadius: '8px', width: '280px' }}>\n <ButtonGroup\n moreType=\"link\"\n list={[\n (props) => <CustomButton {...props} type=\"primary\">\u81ea\u5b9a\u4e49\u6309\u94ae</CustomButton>,\n (props) => <CustomButton {...props}>\u6309\u94ae2</CustomButton>,\n (props) => <CustomButton {...props}>\u6309\u94ae3</CustomButton>,\n (props) => <CustomButton {...props}>\u6309\u94ae4</CustomButton>\n ]}\n />\n </div>\n </Flex>\n );\n};\n\n// \u7981\u7528\u72b6\u6001\u4e0e\u9690\u85cf\nconst StateExample = () => {\n const [disabled, setDisabled] = useState(true);\n const [hidden, setHidden] = useState(true);\n\n return (\n <Flex gap={16} vertical>\n <Text type=\"secondary\">\u7981\u7528\u4e0e\u9690\u85cf\u72b6\u6001</Text>\n <Space>\n <Button onClick={() => setDisabled(!disabled)}>\n {disabled ? '\u542f\u7528' : '\u7981\u7528'}\u64cd\u4f5c3\n </Button>\n <Button onClick={() => setHidden(!hidden)}>\n {hidden ? '\u663e\u793a' : '\u9690\u85cf'}\u64cd\u4f5c4\n </Button>\n </Space>\n <ButtonGroup\n list={[\n { type: 'primary', children: '\u64cd\u4f5c1' },\n { children: '\u64cd\u4f5c2' },\n { children: '\u64cd\u4f5c3', disabled },\n { children: '\u64cd\u4f5c4', hidden },\n { children: '\u64cd\u4f5c5', message: '\u786e\u5b9a\u5417\uff1f' }\n ]}\n />\n </Flex>\n );\n};\n\n// \u5de5\u5177\u63d0\u793a\nconst TooltipExample = () => {\n return (\n <Flex gap={16} vertical>\n <Text type=\"secondary\">\u7981\u7528\u6309\u94ae\u63d0\u793a\uff08tooltipProps\uff09</Text>\n <ButtonGroup\n list={[\n { type: 'primary', children: '\u53ef\u7528\u64cd\u4f5c' },\n {\n children: '\u5df2\u7981\u7528\u64cd\u4f5c',\n disabled: true,\n tooltipProps: {\n title: '\u6b64\u64cd\u4f5c\u6682\u65f6\u4e0d\u53ef\u7528\uff0c\u8bf7\u5148\u5b8c\u6210\u524d\u7f6e\u6b65\u9aa4',\n placement: 'bottom'\n }\n },\n {\n children: '\u9700\u8981\u6743\u9650',\n disabled: true,\n tooltipProps: {\n title: '\u60a8\u6ca1\u6709\u6267\u884c\u6b64\u64cd\u4f5c\u7684\u6743\u9650',\n placement: 'bottom'\n }\n }\n ]}\n />\n </Flex>\n );\n};\n\nconst BaseExample = () => {\n return (\n <Space direction=\"vertical\" size=\"large\">\n <Typography.Title level={3}>ButtonGroup \u81ea\u9002\u5e94\u6309\u94ae\u7ec4</Typography.Title>\n <Typography.Paragraph>\n ButtonGroup \u662f\u4e00\u4e2a\u81ea\u9002\u5e94\u6309\u94ae\u7ec4\u7ec4\u4ef6\uff0c\u80fd\u591f\u6839\u636e\u5bb9\u5668\u5bbd\u5ea6\u81ea\u52a8\u8c03\u6574\u663e\u793a\u7684\u6309\u94ae\u6570\u91cf\uff0c\n \u591a\u4f59\u7684\u6309\u94ae\u4f1a\u653e\u5165\u4e0b\u62c9\u83dc\u5355\u4e2d\u3002\u9002\u7528\u4e8e\u64cd\u4f5c\u680f\u3001\u5de5\u5177\u680f\u3001\u8868\u683c\u64cd\u4f5c\u5217\u7b49\u573a\u666f\u3002\n </Typography.Paragraph>\n\n <Flex vertical gap={32}>\n <div>\n <Typography.Title level={4}>\u57fa\u7840\u7528\u6cd5</Typography.Title>\n <BasicExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u7d27\u51d1\u6a21\u5f0f</Typography.Title>\n <CompactExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u94fe\u63a5\u6837\u5f0f</Typography.Title>\n <LinkStyleExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u6307\u5b9a\u663e\u793a\u6570\u91cf</Typography.Title>\n <FixedLengthExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u81ea\u5b9a\u4e49\u6e32\u67d3</Typography.Title>\n <CustomRenderExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u7981\u7528\u4e0e\u9690\u85cf</Typography.Title>\n <StateExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u7981\u7528\u63d0\u793a</Typography.Title>\n <TooltipExample />\n </div>\n </Flex>\n </Space>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_ButtonGroup",packageName:"@kne/button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:a},{name:"antd",packageName:"antd",component:d}]},{title:"LoadingButton \u52a0\u8f7d\u6309\u94ae",description:"LoadingButton \u5c01\u88c5\u4e86\u52a0\u8f7d\u72b6\u6001\uff0c\u7b80\u5316\u5f02\u6b65\u64cd\u4f5c\u7684\u5904\u7406\u3002\u70b9\u51fb\u6309\u94ae\u65f6\u81ea\u52a8\u663e\u793a\u52a0\u8f7d\u72b6\u6001\uff0c\u907f\u514d\u91cd\u590d\u63d0\u4ea4\u3002",code:'const { LoadingButton, useLoading } = _ButtonGroup;\nconst { Space, Button, Typography, message, Card, Alert, Flex } = antd;\nconst { useState } = React;\n\n// \u57fa\u7840\u7528\u6cd5 - \u81ea\u52a8\u52a0\u8f7d\u72b6\u6001\nconst BasicExample = () => {\n const handleClick = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n message.success(\'\u64cd\u4f5c\u6210\u529f\uff01\');\n resolve();\n }, 1500);\n });\n };\n\n return (\n <Space direction="vertical">\n <Typography.Text type="secondary">\u70b9\u51fb\u6309\u94ae\uff0c\u81ea\u52a8\u7ba1\u7406\u52a0\u8f7d\u72b6\u6001</Typography.Text>\n <Space wrap>\n <LoadingButton type="primary" onClick={handleClick}>\n \u4fdd\u5b58\u6570\u636e\n </LoadingButton>\n <LoadingButton onClick={handleClick}>\u63d0\u4ea4\u5ba1\u6838</LoadingButton>\n <LoadingButton danger onClick={handleClick}>\u5220\u9664</LoadingButton>\n </Space>\n </Space>\n );\n};\n\n// \u81ea\u5b9a\u4e49\u52a0\u8f7d\u6587\u6848\nconst CustomTextExample = () => {\n const handleClick = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n message.success(\'\u4e0a\u4f20\u5b8c\u6210\');\n resolve();\n }, 2000);\n });\n };\n\n return (\n <Space direction="vertical">\n <Typography.Text type="secondary">\u4f7f\u7528\u51fd\u6570\u81ea\u5b9a\u4e49\u52a0\u8f7d\u65f6\u7684\u6587\u6848</Typography.Text>\n <Space>\n <LoadingButton onClick={handleClick}>\n {(isLoading) => (isLoading ? \'\u6b63\u5728\u4e0a\u4f20...\' : \'\u4e0a\u4f20\u6587\u4ef6\')}\n </LoadingButton>\n <LoadingButton onClick={handleClick} type="primary">\n {(isLoading) => (isLoading ? \'\u63d0\u4ea4\u4e2d...\' : \'\u63d0\u4ea4\u8ba2\u5355\')}\n </LoadingButton>\n </Space>\n </Space>\n );\n};\n\n// \u9519\u8bef\u5904\u7406\nconst ErrorExample = () => {\n const [shouldFail, setShouldFail] = useState(false);\n\n const handleClick = () => {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n if (shouldFail) {\n message.error(\'\u64cd\u4f5c\u5931\u8d25\uff0c\u8bf7\u91cd\u8bd5\');\n reject(new Error(\'\u64cd\u4f5c\u5931\u8d25\'));\n } else {\n message.success(\'\u64cd\u4f5c\u6210\u529f\');\n resolve();\n }\n }, 1000);\n });\n };\n\n return (\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Typography.Text type="secondary">\n \u6f14\u793a\u9519\u8bef\u5904\u7406\uff1a\u52a0\u8f7d\u72b6\u6001\u4f1a\u81ea\u52a8\u89e3\u9664\n </Typography.Text>\n <Space>\n <Button onClick={() => setShouldFail(!shouldFail)}>\n {shouldFail ? \'\u5207\u6362\u4e3a\u6210\u529f\' : \'\u5207\u6362\u4e3a\u5931\u8d25\'}\n </Button>\n </Space>\n <Space>\n <LoadingButton onClick={handleClick}>\n {shouldFail ? \'\u4f1a\u5931\u8d25\u7684\u64cd\u4f5c\' : \'\u4f1a\u6210\u529f\u7684\u64cd\u4f5c\'}\n </LoadingButton>\n </Space>\n {shouldFail && <Alert message="\u5f53\u524d\u8bbe\u7f6e\u4e3a\u5931\u8d25\u6a21\u5f0f" type="warning" />}\n </Space>\n );\n};\n\n// \u624b\u52a8\u63a7\u5236\u52a0\u8f7d\u72b6\u6001\nconst ManualExample = () => {\n const [loading, setLoading] = useState(false);\n\n const handleClick = () => {\n setLoading(true);\n setTimeout(() => {\n setLoading(false);\n message.success(\'\u624b\u52a8\u63a7\u5236\u52a0\u8f7d\u5b8c\u6210\');\n }, 2000);\n };\n\n return (\n <Space direction="vertical">\n <Typography.Text type="secondary">\u901a\u8fc7 loading \u5c5e\u6027\u624b\u52a8\u63a7\u5236\u52a0\u8f7d\u72b6\u6001</Typography.Text>\n <LoadingButton loading={loading} onClick={handleClick}>\n \u624b\u52a8\u63a7\u5236\u52a0\u8f7d\n </LoadingButton>\n </Space>\n );\n};\n\n// useLoading Hook \u793a\u4f8b\nconst UseLoadingExample = () => {\n const { isLoading, callback } = useLoading(() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n message.success(\'Hook \u6a21\u5f0f\u64cd\u4f5c\u5b8c\u6210\');\n resolve();\n }, 1500);\n });\n });\n\n return (\n <Card title="useLoading Hook" style={{ width: 400 }}>\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Typography.Text type="secondary">\n \u5728\u975e\u6309\u94ae\u7ec4\u4ef6\u4e2d\u4f7f\u7528 useLoading \u7ba1\u7406\u5f02\u6b65\u72b6\u6001\n </Typography.Text>\n <Space>\n <Button onClick={callback} loading={isLoading}>\n \u4f7f\u7528 Hook\n </Button>\n <Button onClick={() => {}}>\n \u72ec\u7acb\u6309\u94ae\uff08\u4e0d\u53d7\u5f71\u54cd\uff09\n </Button>\n </Space>\n {isLoading && (\n <Alert message="\u5f53\u524d\u72b6\u6001\uff1a\u52a0\u8f7d\u4e2d" type="info" showIcon />\n )}\n </Space>\n </Card>\n );\n};\n\n// \u4e0d\u540c\u6309\u94ae\u7c7b\u578b\nconst ButtonTypesExample = () => {\n const handleClick = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n message.success(\'\u5b8c\u6210\');\n resolve();\n }, 1000);\n });\n };\n\n return (\n <Space direction="vertical">\n <Typography.Text type="secondary">\u652f\u6301\u6240\u6709 Ant Design Button \u7c7b\u578b</Typography.Text>\n <Space wrap>\n <LoadingButton type="primary" onClick={handleClick}>Primary</LoadingButton>\n <LoadingButton type="default" onClick={handleClick}>Default</LoadingButton>\n <LoadingButton type="dashed" onClick={handleClick}>Dashed</LoadingButton>\n <LoadingButton type="link" onClick={handleClick}>Link</LoadingButton>\n <LoadingButton type="text" onClick={handleClick}>Text</LoadingButton>\n </Space>\n <Space wrap>\n <LoadingButton type="primary" ghost onClick={handleClick}>Primary Ghost</LoadingButton>\n <LoadingButton type="default" ghost onClick={handleClick}>Default Ghost</LoadingButton>\n </Space>\n </Space>\n );\n};\n\n// \u56fe\u6807\u6309\u94ae\nconst IconExample = () => {\n const handleClick = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n message.success(\'\u64cd\u4f5c\u5b8c\u6210\');\n resolve();\n }, 1200);\n });\n };\n\n return (\n <Space direction="vertical">\n <Typography.Text type="secondary">\u652f\u6301\u56fe\u6807</Typography.Text>\n <Space>\n <LoadingButton type="primary" icon={<span>\u2b06\ufe0f</span>} onClick={handleClick}>\n \u4e0a\u4f20\n </LoadingButton>\n <LoadingButton icon={<span>\u2b07\ufe0f</span>} onClick={handleClick}>\n \u4e0b\u8f7d\n </LoadingButton>\n <LoadingButton danger icon={<span>\ud83d\uddd1\ufe0f</span>} onClick={handleClick}>\n \u5220\u9664\n </LoadingButton>\n </Space>\n </Space>\n );\n};\n\n// \u5b9e\u9645\u5e94\u7528\u573a\u666f - \u8868\u5355\u63d0\u4ea4\nconst FormSubmitExample = () => {\n const handleSubmit = async () => {\n // \u6a21\u62df\u8868\u5355\u9a8c\u8bc1\n await new Promise(resolve => setTimeout(resolve, 500));\n // \u6a21\u62df API \u8bf7\u6c42\n await new Promise((resolve) => {\n setTimeout(() => {\n message.success(\'\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff01\');\n resolve();\n }, 1500);\n });\n };\n\n return (\n <Card title="\u8868\u5355\u63d0\u4ea4\u573a\u666f" style={{ width: 400 }}>\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Typography.Text type="secondary">\n \u70b9\u51fb\u63d0\u4ea4\u6309\u94ae\uff0c\u81ea\u52a8\u9632\u6b62\u91cd\u590d\u63d0\u4ea4\n </Typography.Text>\n <Space>\n <LoadingButton type="primary" onClick={handleSubmit}>\n \u63d0\u4ea4\u8868\u5355\n </LoadingButton>\n <Button onClick={() => message.info(\'\u5df2\u53d6\u6d88\')}>\u53d6\u6d88</Button>\n </Space>\n </Space>\n </Card>\n );\n};\n\nconst BaseExample = () => {\n return (\n <Space direction="vertical" size="large">\n <Typography.Title level={3}>LoadingButton \u52a0\u8f7d\u6309\u94ae</Typography.Title>\n <Typography.Paragraph>\n LoadingButton \u5c01\u88c5\u4e86\u52a0\u8f7d\u72b6\u6001\uff0c\u7b80\u5316\u5f02\u6b65\u64cd\u4f5c\u7684\u5904\u7406\u3002\u70b9\u51fb\u6309\u94ae\u65f6\u81ea\u52a8\u663e\u793a\u52a0\u8f7d\u72b6\u6001\uff0c\n \u907f\u514d\u91cd\u590d\u63d0\u4ea4\uff0c\u540c\u65f6\u63d0\u4f9b useLoading Hook \u4f9b\u5176\u4ed6\u7ec4\u4ef6\u4f7f\u7528\u3002\n </Typography.Paragraph>\n\n <Flex vertical gap={32}>\n <div>\n <Typography.Title level={4}>\u57fa\u7840\u7528\u6cd5</Typography.Title>\n <BasicExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u81ea\u5b9a\u4e49\u52a0\u8f7d\u6587\u6848</Typography.Title>\n <CustomTextExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u9519\u8bef\u5904\u7406</Typography.Title>\n <ErrorExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u624b\u52a8\u63a7\u5236\u52a0\u8f7d\u72b6\u6001</Typography.Title>\n <ManualExample />\n </div>\n\n <div>\n <Typography.Title level={4}>useLoading Hook</Typography.Title>\n <UseLoadingExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u4e0d\u540c\u6309\u94ae\u7c7b\u578b</Typography.Title>\n <ButtonTypesExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u56fe\u6807\u6309\u94ae</Typography.Title>\n <IconExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u5b9e\u9645\u5e94\u7528\u573a\u666f</Typography.Title>\n <FormSubmitExample />\n </div>\n </Flex>\n </Space>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_ButtonGroup",packageName:"@kne/button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:a},{name:"antd",packageName:"antd",component:d}]},{title:"ConfirmButton \u786e\u8ba4\u6309\u94ae",description:"ConfirmButton \u5e26\u6709\u786e\u8ba4\u529f\u80fd\uff0c\u652f\u6301\u5f39\u7a97\u786e\u8ba4\u548c\u6a21\u6001\u6846\u786e\u8ba4\u4e24\u79cd\u6a21\u5f0f\u3002\u9002\u7528\u4e8e\u5220\u9664\u3001\u63d0\u4ea4\u7b49\u91cd\u8981\u64cd\u4f5c\u3002",code:'const { ConfirmButton, ConfirmLink, ConfirmText } = _ButtonGroup;\nconst { Flex, Space, Typography, message, Card, List, Tag, Button } = antd;\nconst { useState } = React;\n\n// \u57fa\u7840\u7528\u6cd5 - Popconfirm \u6a21\u5f0f\nconst BasicExample = () => {\n const handleDelete = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n message.success(\'\u5220\u9664\u6210\u529f\');\n resolve();\n }, 500);\n });\n };\n\n return (\n <Space direction="vertical">\n <Typography.Text type="secondary">\n Popconfirm \u6a21\u5f0f\uff08\u6c14\u6ce1\u786e\u8ba4\u6846\uff09\uff0c\u9002\u7528\u4e8e\u5feb\u901f\u786e\u8ba4\n </Typography.Text>\n <Space>\n <ConfirmButton message="\u786e\u5b9a\u8981\u5220\u9664\u5417\uff1f" onClick={handleDelete}>\n \u5220\u9664\n </ConfirmButton>\n <ConfirmButton message="\u786e\u5b9a\u8981\u63d0\u4ea4\u5417\uff1f" onClick={handleDelete}>\n \u63d0\u4ea4\n </ConfirmButton>\n </Space>\n </Space>\n );\n};\n\n// Modal \u6a21\u5f0f\nconst ModalExample = () => {\n const handleSubmit = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n message.success(\'\u63d0\u4ea4\u6210\u529f\');\n resolve();\n }, 500);\n });\n };\n\n return (\n <Space direction="vertical">\n <Typography.Text type="secondary">\n Modal \u6a21\u5f0f\uff08\u6a21\u6001\u6846\uff09\uff0c\u9002\u7528\u4e8e\u91cd\u8981\u64cd\u4f5c\u6216\u957f\u5185\u5bb9\u63d0\u793a\n </Typography.Text>\n <Space>\n <ConfirmButton\n isModal\n message="\u6b64\u64cd\u4f5c\u5c06\u6c38\u4e45\u5220\u9664\u8be5\u6570\u636e\uff0c\u5220\u9664\u540e\u65e0\u6cd5\u6062\u590d\u3002\u786e\u5b9a\u8981\u7ee7\u7eed\u5417\uff1f"\n onClick={handleSubmit}\n >\n \u5220\u9664\u6570\u636e\n </ConfirmButton>\n <ConfirmButton\n isModal\n title="\u63d0\u4ea4\u786e\u8ba4"\n message="\u63d0\u4ea4\u540e\u6570\u636e\u5c06\u8fdb\u5165\u5ba1\u6838\u6d41\u7a0b\uff0c\u786e\u8ba4\u8981\u63d0\u4ea4\u5417\uff1f"\n onClick={handleSubmit}\n >\n \u63d0\u4ea4\u5ba1\u6838\n </ConfirmButton>\n </Space>\n </Space>\n );\n};\n\n// \u5371\u9669\u64cd\u4f5c\u6837\u5f0f\nconst DangerExample = () => {\n const handleDelete = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n message.success(\'\u5df2\u5220\u9664\');\n resolve();\n }, 500);\n });\n };\n\n return (\n <Space direction="vertical">\n <Typography.Text type="secondary">\n \u4f7f\u7528 isDelete \u6807\u8bc6\u5371\u9669\u64cd\u4f5c\uff08\u7ea2\u8272\u6309\u94ae\uff09\n </Typography.Text>\n <Space>\n <ConfirmButton\n danger\n message="\u786e\u5b9a\u5220\u9664\u5417\uff1f"\n onClick={handleDelete}\n >\n \u666e\u901a\u6309\u94ae\n </ConfirmButton>\n <ConfirmButton\n isDelete\n message="\u786e\u5b9a\u5220\u9664\u5417\uff1f"\n onClick={handleDelete}\n >\n \u5220\u9664\u6309\u94ae\n </ConfirmButton>\n <ConfirmButton\n isDelete\n isModal\n message="\u6b64\u64cd\u4f5c\u65e0\u6cd5\u64a4\u9500\uff0c\u786e\u5b9a\u8981\u7ee7\u7eed\u5417\uff1f"\n onClick={handleDelete}\n >\n \u5220\u9664\uff08Modal\uff09\n </ConfirmButton>\n </Space>\n </Space>\n );\n};\n\n// \u81ea\u5b9a\u4e49\u786e\u8ba4\u6587\u6848\nconst CustomTextExample = () => {\n const handleAction = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n message.success(\'\u64cd\u4f5c\u5b8c\u6210\');\n resolve();\n }, 500);\n });\n };\n\n return (\n <Space direction="vertical">\n <Typography.Text type="secondary">\u81ea\u5b9a\u4e49\u786e\u8ba4\u548c\u53d6\u6d88\u6309\u94ae\u6587\u6848</Typography.Text>\n <Space>\n <ConfirmButton\n message="\u786e\u5b9a\u8981\u6267\u884c\u6b64\u64cd\u4f5c\u5417\uff1f"\n okText="\u786e\u8ba4\u6267\u884c"\n cancelText="\u6682\u4e0d\u6267\u884c"\n onClick={handleAction}\n >\n \u81ea\u5b9a\u4e49\u6587\u6848\n </ConfirmButton>\n <ConfirmButton\n isModal\n title="\u64cd\u4f5c\u786e\u8ba4"\n message="\u8bf7\u786e\u8ba4\u662f\u5426\u7ee7\u7eed\u6267\u884c\u6b64\u64cd\u4f5c"\n okText="\u662f\uff0c\u7ee7\u7eed"\n cancelText="\u5426\uff0c\u53d6\u6d88"\n onClick={handleAction}\n >\n Modal \u81ea\u5b9a\u4e49\u6587\u6848\n </ConfirmButton>\n </Space>\n </Space>\n );\n};\n\n// ConfirmLink \u548c ConfirmText\nconst LinkAndTextExample = () => {\n const handleAction = () => {\n message.success(\'\u64cd\u4f5c\u6210\u529f\');\n return Promise.resolve();\n };\n\n return (\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Typography.Text type="secondary">\n ConfirmLink \u548c ConfirmText \u53d8\u4f53\uff0c\u9002\u7528\u4e8e\u8868\u683c\u884c\u64cd\u4f5c\u7b49\u573a\u666f\n </Typography.Text>\n <List\n bordered\n style={{ width: 400 }}\n dataSource={[\n { id: 1, name: \'\u6570\u636e\u9879 A\', status: \'\u5df2\u63d0\u4ea4\' },\n { id: 2, name: \'\u6570\u636e\u9879 B\', status: \'\u8349\u7a3f\' },\n { id: 3, name: \'\u6570\u636e\u9879 C\', status: \'\u5df2\u5ba1\u6838\' }\n ]}\n renderItem={(item) => (\n <List.Item\n actions={[\n <ConfirmLink key="edit" message="\u786e\u5b9a\u7f16\u8f91\u5417\uff1f" onClick={handleAction}>\n \u7f16\u8f91\n </ConfirmLink>,\n <ConfirmLink key="delete" isDelete message="\u786e\u5b9a\u5220\u9664\u5417\uff1f" onClick={handleAction}>\n \u5220\u9664\n </ConfirmLink>\n ]}\n >\n <List.Item.Meta\n title={item.name}\n description={<Tag color={item.status === \'\u5df2\u63d0\u4ea4\' ? \'blue\' : \'default\'}>{item.status}</Tag>}\n />\n </List.Item>\n )}\n />\n <Space>\n <ConfirmText onClick={handleAction}>\u7eaf\u6587\u672c\u786e\u8ba4</ConfirmText>\n <Typography.Text type="secondary">\|</Typography.Text>\n <ConfirmText isDelete onClick={handleAction}>\u5220\u9664</ConfirmText>\n </Space>\n </Space>\n );\n};\n\n// \u7981\u7528\u72b6\u6001\nconst DisabledExample = () => {\n const [disabled, setDisabled] = useState(true);\n const handleDelete = () => {\n message.success(\'\u5df2\u5220\u9664\');\n return Promise.resolve();\n };\n\n return (\n <Space direction="vertical">\n <Typography.Text type="secondary">\u7981\u7528\u72b6\u6001\u4e0b\u4e0d\u4f1a\u89e6\u53d1\u786e\u8ba4</Typography.Text>\n <Space>\n <Button onClick={() => setDisabled(!disabled)}>\n {disabled ? \'\u542f\u7528\' : \'\u7981\u7528\'}\n </Button>\n </Space>\n <Space>\n <ConfirmButton disabled={disabled} message="\u786e\u5b9a\u5220\u9664\u5417\uff1f" onClick={handleDelete}>\n \u5220\u9664\n </ConfirmButton>\n <ConfirmLink disabled={disabled} message="\u786e\u5b9a\u5220\u9664\u5417\uff1f" onClick={handleDelete}>\n \u5220\u9664\n </ConfirmLink>\n </Space>\n </Space>\n );\n};\n\n// \u5b9e\u9645\u5e94\u7528\u573a\u666f - \u8868\u683c\u64cd\u4f5c\nconst TableActionExample = () => {\n const handleEdit = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n message.success(\'\u8fdb\u5165\u7f16\u8f91\u6a21\u5f0f\');\n resolve();\n }, 300);\n });\n };\n\n const handleDelete = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n message.success(\'\u5df2\u5220\u9664\');\n resolve();\n }, 300);\n });\n };\n\n const handleAudit = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n message.success(\'\u5ba1\u6838\u901a\u8fc7\');\n resolve();\n }, 300);\n });\n };\n\n return (\n <Card title="\u5b9e\u9645\u5e94\u7528\uff1a\u8868\u683c\u64cd\u4f5c\u680f" style={{ width: 500 }}>\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Typography.Text type="secondary">\n \u6a21\u62df\u8868\u683c\u4e2d\u7684\u64cd\u4f5c\u6309\u94ae\uff0c\u5305\u542b\u4e0d\u540c\u7684\u786e\u8ba4\u65b9\u5f0f\n </Typography.Text>\n <List\n bordered\n dataSource={[\n { id: 1, name: \'\u4ea7\u54c1 A\', price: \'\xa599.00\' },\n { id: 2, name: \'\u4ea7\u54c1 B\', price: \'\xa5199.00\' }\n ]}\n renderItem={(item) => (\n <List.Item\n actions={[\n <ConfirmButton key="edit" type="link" message={`\u786e\u5b9a\u7f16\u8f91 ${item.name} \u5417\uff1f`} onClick={handleEdit}>\n \u7f16\u8f91\n </ConfirmButton>,\n <ConfirmButton key="audit" type="link" message={`\u786e\u5b9a\u901a\u8fc7 ${item.name} \u7684\u5ba1\u6838\u5417\uff1f`} onClick={handleAudit}>\n \u5ba1\u6838\n </ConfirmButton>,\n <ConfirmButton\n key="delete"\n type="link"\n danger\n message={`\u786e\u5b9a\u5220\u9664 ${item.name} \u5417\uff1f\u6b64\u64cd\u4f5c\u65e0\u6cd5\u64a4\u9500\u3002`}\n onClick={handleDelete}\n >\n \u5220\u9664\n </ConfirmButton>\n ]}\n >\n <List.Item.Meta\n title={item.name}\n description={item.price}\n />\n </List.Item>\n )}\n />\n </Space>\n </Card>\n );\n};\n\n// \u6279\u91cf\u64cd\u4f5c\nconst BatchExample = () => {\n const [selectedCount, setSelectedCount] = useState(0);\n const handleBatchDelete = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n message.success(`\u5df2\u5220\u9664 ${selectedCount} \u6761\u6570\u636e`);\n setSelectedCount(0);\n resolve();\n }, 500);\n });\n };\n\n return (\n <Card title="\u6279\u91cf\u64cd\u4f5c\u573a\u666f" style={{ width: 450 }}>\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Space>\n <Typography.Text type="secondary">\u5df2\u9009\u62e9\uff1a</Typography.Text>\n <Typography.Text strong>{selectedCount} \u9879</Typography.Text>\n <Button size="small" onClick={() => setSelectedCount(Math.floor(Math.random() * 10))}>\n \u968f\u673a\u9009\u62e9\n </Button>\n </Space>\n <Space>\n <ConfirmButton\n type="primary"\n disabled={selectedCount === 0}\n isModal\n title="\u6279\u91cf\u5220\u9664\u786e\u8ba4"\n message={`\u786e\u5b9a\u8981\u5220\u9664\u9009\u4e2d\u7684 ${selectedCount} \u6761\u6570\u636e\u5417\uff1f\u6b64\u64cd\u4f5c\u65e0\u6cd5\u64a4\u9500\u3002`}\n onClick={handleBatchDelete}\n >\n \u6279\u91cf\u5220\u9664\n </ConfirmButton>\n <ConfirmButton\n disabled={selectedCount === 0}\n message={`\u786e\u5b9a\u5bfc\u51fa\u9009\u4e2d\u7684 ${selectedCount} \u6761\u6570\u636e\u5417\uff1f`}\n onClick={() => {\n message.success(`\u6b63\u5728\u5bfc\u51fa ${selectedCount} \u6761\u6570\u636e`);\n return Promise.resolve();\n }}\n >\n \u5bfc\u51fa\n </ConfirmButton>\n </Space>\n </Space>\n </Card>\n );\n};\n\nconst BaseExample = () => {\n return (\n <Space direction="vertical" size="large">\n <Typography.Title level={3}>ConfirmButton \u786e\u8ba4\u6309\u94ae</Typography.Title>\n <Typography.Paragraph>\n ConfirmButton \u63d0\u4f9b\u786e\u8ba4\u529f\u80fd\uff0c\u652f\u6301 Popconfirm\uff08\u6c14\u6ce1\u786e\u8ba4\u6846\uff09\u548c Modal\uff08\u6a21\u6001\u6846\uff09\u4e24\u79cd\u6a21\u5f0f\u3002\n \u8fd8\u63d0\u4f9b ConfirmLink \u548c ConfirmText \u53d8\u4f53\uff0c\u4ee5\u53ca withConfirm \u9ad8\u9636\u7ec4\u4ef6\u3002\n </Typography.Paragraph>\n\n <Flex vertical gap={32}>\n <div>\n <Typography.Title level={4}>Popconfirm \u6a21\u5f0f</Typography.Title>\n <BasicExample />\n </div>\n\n <div>\n <Typography.Title level={4}>Modal \u6a21\u5f0f</Typography.Title>\n <ModalExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u5371\u9669\u64cd\u4f5c\u6837\u5f0f</Typography.Title>\n <DangerExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u81ea\u5b9a\u4e49\u6587\u6848</Typography.Title>\n <CustomTextExample />\n </div>\n\n <div>\n <Typography.Title level={4}>Link \u548c Text \u53d8\u4f53</Typography.Title>\n <LinkAndTextExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u7981\u7528\u72b6\u6001</Typography.Title>\n <DisabledExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u5b9e\u9645\u5e94\u7528\u573a\u666f</Typography.Title>\n <TableActionExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u6279\u91cf\u64cd\u4f5c</Typography.Title>\n <BatchExample />\n </div>\n </Flex>\n </Space>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_ButtonGroup",packageName:"@kne/button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:a},{name:"antd",packageName:"antd",component:d}]},{title:"FetchButton \u8bf7\u6c42\u6309\u94ae",description:"FetchButton \u96c6\u6210\u4e86\u6570\u636e\u8bf7\u6c42\u529f\u80fd\uff0c\u81ea\u52a8\u7ba1\u7406\u52a0\u8f7d\u72b6\u6001\u548c\u8bf7\u6c42\u6d41\u7a0b\u3002\u9002\u7528\u4e8e\u6309\u94ae\u89e6\u53d1 API \u8bf7\u6c42\u7684\u573a\u666f\u3002",code:"const { FetchButton } = _ButtonGroup;\nconst { Space, Typography, message, Card, Alert, Form, Input, Select, Button, Flex } = antd;\nconst { useState } = React;\n\n// \u57fa\u7840\u7528\u6cd5\nconst BasicExample = () => {\n const handleSuccess = ({ data }) => {\n message.success(`\u83b7\u53d6\u6570\u636e\u6210\u529f: ${data}`);\n };\n\n return (\n <Space direction=\"vertical\" style={{ width: '100%' }}>\n <Typography.Text type=\"secondary\">\n \u70b9\u51fb\u6309\u94ae\u89e6\u53d1 API \u8bf7\u6c42\uff0c\u81ea\u52a8\u7ba1\u7406\u52a0\u8f7d\u72b6\u6001\n </Typography.Text>\n <FetchButton\n type=\"primary\"\n api={{\n loader: async () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({ data: '\u7528\u6237\u4fe1\u606f\u6570\u636e' });\n }, 1500);\n });\n }\n }}\n onClick={handleSuccess}\n >\n \u83b7\u53d6\u7528\u6237\u4fe1\u606f\n </FetchButton>\n </Space>\n );\n};\n\n// \u5e26\u53c2\u6570\u8bf7\u6c42\nconst WithParamsExample = () => {\n const [userId, setUserId] = useState('1');\n\n const handleSuccess = ({ data }) => {\n message.success(`\u83b7\u53d6\u6210\u529f: ${JSON.stringify(data)}`);\n };\n\n return (\n <Space direction=\"vertical\" style={{ width: '100%' }}>\n <Typography.Text type=\"secondary\">\u4f20\u9012\u53c2\u6570\u5230 API \u8bf7\u6c42</Typography.Text>\n <Space>\n <Select\n value={userId}\n onChange={setUserId}\n style={{ width: 120 }}\n options={[\n { value: '1', label: '\u7528\u62371' },\n { value: '2', label: '\u7528\u62372' },\n { value: '3', label: '\u7528\u62373' }\n ]}\n />\n <FetchButton\n params={{ userId }}\n api={{\n loader: async ({ params }) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({ data: { userId: params.userId, name: `\u7528\u6237${params.userId}`, role: '\u7ba1\u7406\u5458' } });\n }, 1000);\n });\n }\n }}\n onClick={handleSuccess}\n >\n \u83b7\u53d6\u7528\u6237\u8be6\u60c5\n </FetchButton>\n </Space>\n </Space>\n );\n};\n\n// \u6210\u529f\u548c\u5931\u8d25\u56de\u8c03\nconst CallbackExample = () => {\n const [status, setStatus] = useState('');\n const [shouldFail, setShouldFail] = useState(false);\n\n const handleSuccess = ({ data }) => {\n setStatus('success');\n message.success('\u6570\u636e\u52a0\u8f7d\u6210\u529f');\n console.log('\u6210\u529f\u6570\u636e:', data);\n };\n\n const handleError = (error) => {\n setStatus('error');\n message.error('\u6570\u636e\u52a0\u8f7d\u5931\u8d25');\n console.error('\u9519\u8bef\u4fe1\u606f:', error);\n };\n\n return (\n <Card title=\"\u6210\u529f\u4e0e\u5931\u8d25\u56de\u8c03\" style={{ width: 450 }}>\n <Space direction=\"vertical\" style={{ width: '100%' }}>\n <Space>\n <Button onClick={() => setShouldFail(!shouldFail)} size=\"small\">\n {shouldFail ? '\u5207\u6362\u4e3a\u6210\u529f' : '\u5207\u6362\u4e3a\u5931\u8d25'}\n </Button>\n </Space>\n <FetchButton\n type=\"primary\"\n api={{\n loader: async () => {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n if (shouldFail) {\n reject(new Error('\u6a21\u62df\u7684\u8bf7\u6c42\u5931\u8d25'));\n } else {\n resolve({ data: { message: '\u8bf7\u6c42\u6210\u529f', timestamp: Date.now() } });\n }\n }, 1000);\n });\n }\n }}\n onSuccess={handleSuccess}\n onError={handleError}\n >\n {shouldFail ? '\u5931\u8d25\u8bf7\u6c42' : '\u6210\u529f\u8bf7\u6c42'}\n </FetchButton>\n {status === 'success' && <Alert message=\"\u4e0a\u6b21\u8bf7\u6c42\uff1a\u6210\u529f\" type=\"success\" />}\n {status === 'error' && <Alert message=\"\u4e0a\u6b21\u8bf7\u6c42\uff1a\u5931\u8d25\" type=\"error\" />}\n </Space>\n </Card>\n );\n};\n\n// \u5bfc\u51fa\u6587\u4ef6\u573a\u666f\nconst ExportExample = () => {\n const handleExport = ({ data }) => {\n message.success(`\u5bfc\u51fa\u6210\u529f: ${data.url}`);\n };\n\n return (\n <Space direction=\"vertical\" style={{ width: '100%' }}>\n <Typography.Text type=\"secondary\">\u6a21\u62df\u6587\u4ef6\u5bfc\u51fa\u573a\u666f</Typography.Text>\n <Space>\n <FetchButton\n api={{\n loader: async () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({ data: { url: '/download/report.xlsx', size: '2.5MB' } });\n }, 2000);\n });\n }\n }}\n onClick={handleExport}\n >\n \u5bfc\u51fa\u62a5\u8868\n </FetchButton>\n <FetchButton\n type=\"primary\"\n api={{\n loader: async () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({ data: { url: '/download/data.csv', size: '1.2MB' } });\n }, 1500);\n });\n }\n }}\n onClick={handleExport}\n >\n \u5bfc\u51fa CSV\n </FetchButton>\n </Space>\n </Space>\n );\n};\n\n// \u8868\u5355\u63d0\u4ea4\u573a\u666f\nconst FormSubmitExample = () => {\n const [form] = Form.useForm();\n const [loading, setLoading] = useState(false);\n const [submittedData, setSubmittedData] = useState(null);\n\n const handleSubmit = ({ data }) => {\n setSubmittedData(data);\n message.success('\u8868\u5355\u63d0\u4ea4\u6210\u529f');\n };\n\n const onFinish = async () => {\n try {\n const values = await form.validateFields();\n setLoading(true);\n // \u4f7f\u7528 FetchButton \u5185\u90e8\u5904\u7406\uff0c\u8fd9\u91cc\u53ea\u662f\u6f14\u793a\n await new Promise(resolve => setTimeout(resolve, 1000));\n setLoading(false);\n message.success('\u9a8c\u8bc1\u901a\u8fc7');\n } catch (error) {\n message.error('\u8bf7\u68c0\u67e5\u8868\u5355\u5185\u5bb9');\n }\n };\n\n return (\n <Card title=\"\u8868\u5355\u63d0\u4ea4\u573a\u666f\" style={{ width: 450 }}>\n <Space direction=\"vertical\" style={{ width: '100%' }}>\n <Form\n form={form}\n layout=\"vertical\"\n >\n <Form.Item\n name=\"username\"\n label=\"\u7528\u6237\u540d\"\n rules={[{ required: true, message: '\u8bf7\u8f93\u5165\u7528\u6237\u540d' }]}\n >\n <Input placeholder=\"\u8bf7\u8f93\u5165\u7528\u6237\u540d\" />\n </Form.Item>\n <Form.Item\n name=\"email\"\n label=\"\u90ae\u7bb1\"\n rules={[{ required: true, message: '\u8bf7\u8f93\u5165\u90ae\u7bb1' }]}\n >\n <Input placeholder=\"\u8bf7\u8f93\u5165\u90ae\u7bb1\" />\n </Form.Item>\n </Form>\n <Space>\n <FetchButton\n type=\"primary\"\n api={{\n loader: async ({ params }) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({ data: { id: 123, ...params, createTime: new Date().toISOString() } });\n }, 1500);\n });\n }\n }}\n beforeFetch={() => {\n const values = form.getFieldsValue();\n if (!values.username \|\| !values.email) {\n message.error('\u8bf7\u586b\u5199\u5b8c\u6574\u4fe1\u606f');\n return false;\n }\n return true;\n }}\n onClick={handleSubmit}\n >\n \u63d0\u4ea4\u8868\u5355\n </FetchButton>\n <Button onClick={() => form.resetFields()}>\u91cd\u7f6e</Button>\n </Space>\n {submittedData && (\n <Alert\n message=\"\u63d0\u4ea4\u6210\u529f\"\n description={JSON.stringify(submittedData, null, 2)}\n type=\"success\"\n />\n )}\n </Space>\n </Card>\n );\n};\n\n// \u5237\u65b0\u6570\u636e\u573a\u666f\nconst RefreshExample = () => {\n const [data, setData] = useState(null);\n const [lastRefresh, setLastRefresh] = useState(null);\n\n const handleRefresh = ({ data: newData }) => {\n console.log(newData);\n setData(newData);\n setLastRefresh(new Date().toLocaleTimeString());\n message.success('\u6570\u636e\u5df2\u66f4\u65b0');\n };\n\n return (\n <Card title=\"\u5237\u65b0\u6570\u636e\u573a\u666f\" style={{ width: 450 }}>\n <Space direction=\"vertical\" style={{ width: '100%' }}>\n <Space>\n <Typography.Text type=\"secondary\">\u4e0a\u6b21\u5237\u65b0\uff1a</Typography.Text>\n <Typography.Text>{lastRefresh \|\| '\u4ece\u672a\u5237\u65b0'}</Typography.Text>\n </Space>\n <FetchButton\n api={{\n loader: async () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n users: [\n { id: 1, name: '\u7528\u6237A', status: '\u5728\u7ebf' },\n { id: 2, name: '\u7528\u6237B', status: '\u79bb\u7ebf' },\n { id: 3, name: '\u7528\u6237C', status: '\u5728\u7ebf' }\n ],\n total: 3\n });\n }, 1000);\n });\n }\n }}\n onClick={handleRefresh}\n >\n \u5237\u65b0\u6570\u636e\n </FetchButton>\n {data && (\n <Alert\n message={`\u5f53\u524d\u6570\u636e\uff1a${data.users?.length} \u4e2a\u7528\u6237\u5728\u7ebf`}\n type=\"info\"\n />\n )}\n </Space>\n </Card>\n );\n};\n\n// beforeFetch \u62e6\u622a\nconst BeforeFetchExample = () => {\n const [allowed, setAllowed] = useState(true);\n\n const handleFetch = ({ data }) => {\n message.success('\u8bf7\u6c42\u901a\u8fc7');\n };\n\n const beforeFetch = () => {\n if (!allowed) {\n message.warning('\u8bf7\u6c42\u88ab beforeFetch \u62e6\u622a');\n return false;\n }\n return true;\n };\n\n return (\n <Space direction=\"vertical\">\n <Typography.Text type=\"secondary\">beforeFetch \u53ef\u4ee5\u62e6\u622a\u8bf7\u6c42</Typography.Text>\n <Space>\n <Button onClick={() => setAllowed(!allowed)} size=\"small\">\n {allowed ? '\u62e6\u622a\u8bf7\u6c42' : '\u5141\u8bb8\u8bf7\u6c42'}\n </Button>\n </Space>\n <FetchButton\n api={{\n loader: async () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({ data: '\u8bf7\u6c42\u6210\u529f' });\n }, 800);\n });\n }\n }}\n beforeFetch={beforeFetch}\n onClick={handleFetch}\n >\n {allowed ? '\u53d1\u9001\u8bf7\u6c42' : '\u8bf7\u6c42\u5df2\u62e6\u622a'}\n </FetchButton>\n </Space>\n );\n};\n\nconst BaseExample = () => {\n return (\n <Space direction=\"vertical\" size=\"large\">\n <Typography.Title level={3}>FetchButton \u8bf7\u6c42\u6309\u94ae</Typography.Title>\n <Typography.Paragraph>\n FetchButton \u96c6\u6210\u4e86\u6570\u636e\u8bf7\u6c42\u529f\u80fd\uff0c\u57fa\u4e8e @kne/react-fetch \u5e93\u5b9e\u73b0\u3002\n \u81ea\u52a8\u7ba1\u7406\u52a0\u8f7d\u72b6\u6001\uff0c\u652f\u6301\u6210\u529f/\u5931\u8d25\u56de\u8c03\u3001\u53c2\u6570\u4f20\u9012\u3001\u8bf7\u6c42\u62e6\u622a\u7b49\u529f\u80fd\u3002\n </Typography.Paragraph>\n\n <Flex vertical gap={32}>\n <div>\n <Typography.Title level={4}>\u57fa\u7840\u7528\u6cd5</Typography.Title>\n <BasicExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u5e26\u53c2\u6570\u8bf7\u6c42</Typography.Title>\n <WithParamsExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u6210\u529f\u4e0e\u5931\u8d25\u56de\u8c03</Typography.Title>\n <CallbackExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u6587\u4ef6\u5bfc\u51fa\u573a\u666f</Typography.Title>\n <ExportExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u8868\u5355\u63d0\u4ea4\u573a\u666f</Typography.Title>\n <FormSubmitExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u5237\u65b0\u6570\u636e\u573a\u666f</Typography.Title>\n <RefreshExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u8bf7\u6c42\u62e6\u622a</Typography.Title>\n <BeforeFetchExample />\n </div>\n </Flex>\n </Space>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_ButtonGroup",packageName:"@kne/button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:a},{name:"antd",packageName:"antd",component:d}]},{title:"ButtonFooter \u5e95\u90e8\u6309\u94ae\u533a",description:"ButtonFooter \u662f\u9875\u9762\u5e95\u90e8\u6309\u94ae\u533a\u57df\u7ec4\u4ef6\uff0c\u5728\u5c0f\u5c4f\u5e55\u4e0b\u81ea\u52a8\u5c06\u5185\u5bb9\u6e32\u67d3\u5230 body\uff0c\u65b9\u4fbf\u8868\u5355\u9875\u9762\u7684\u64cd\u4f5c\u6309\u94ae\u5e03\u5c40\u3002",code:'const { ButtonFooter } = _ButtonGroup;\nconst { Flex, Button, Space, Typography, Card, Form, Input } = antd;\nconst { useState } = React;\n\n// \u57fa\u7840\u7528\u6cd5\nconst BasicExample = () => {\n return (\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Typography.Text type="secondary">\n ButtonFooter \u56fa\u5b9a\u5728\u9875\u9762\u5e95\u90e8\uff0c\u5728\u5c0f\u5c4f\u5e55\uff08\u2264768px\uff09\u4e0b\u81ea\u52a8\u6e32\u67d3\u5230 body\n </Typography.Text>\n <Card\n title="\u9875\u9762\u5185\u5bb9\u533a\u57df"\n style={{ width: 400, minHeight: 200 }}\n >\n <Typography.Paragraph>\n \u8fd9\u662f\u9875\u9762\u7684\u4e3b\u8981\u5185\u5bb9\u533a\u57df\u3002ButtonFooter \u4f1a\u81ea\u52a8\u8ba1\u7b97\u9ad8\u5ea6\u5e76\u8bbe\u7f6e CSS \u53d8\u91cf\uff0c\n \u65b9\u4fbf\u9875\u9762\u5e03\u5c40\u8c03\u6574\u3002\n </Typography.Paragraph>\n <Typography.Paragraph>\n \u5728\u79fb\u52a8\u7aef\uff0c\u6309\u94ae\u4f1a\u81ea\u52a8\u56fa\u5b9a\u5728\u5c4f\u5e55\u5e95\u90e8\uff0c\u786e\u4fdd\u64cd\u4f5c\u6309\u94ae\u59cb\u7ec8\u53ef\u89c1\u3002\n </Typography.Paragraph>\n </Card>\n <ButtonFooter>\n <Flex justify="flex-end" gap={8} style={{ padding: \'16px 24px\', background: \'#fff\', borderTop: \'1px solid #f0f0f0\' }}>\n <Button>\u53d6\u6d88</Button>\n <Button type="primary">\u4fdd\u5b58</Button>\n </Flex>\n </ButtonFooter>\n </Space>\n );\n};\n\n// \u8868\u5355\u63d0\u4ea4\u573a\u666f\nconst FormExample = () => {\n const [form] = Form.useForm();\n const [loading, setLoading] = useState(false);\n\n const handleSave = () => {\n setLoading(true);\n setTimeout(() => {\n setLoading(false);\n message.success(\'\u4fdd\u5b58\u6210\u529f\');\n }, 1000);\n };\n\n const handleSubmit = () => {\n setLoading(true);\n setTimeout(() => {\n setLoading(false);\n message.success(\'\u63d0\u4ea4\u6210\u529f\');\n }, 1000);\n };\n\n return (\n <Card title="\u8868\u5355\u5e95\u90e8\u64cd\u4f5c" style={{ width: 500 }}>\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Typography.Text type="secondary">\n \u9002\u7528\u4e8e\u8868\u5355\u9875\u9762\u7684\u5e95\u90e8\u64cd\u4f5c\u6309\u94ae\n </Typography.Text>\n <Form form={form} layout="vertical">\n <Form.Item name="name" label="\u540d\u79f0">\n <Input placeholder="\u8bf7\u8f93\u5165\u540d\u79f0" />\n </Form.Item>\n <Form.Item name="desc" label="\u63cf\u8ff0">\n <Input.TextArea placeholder="\u8bf7\u8f93\u5165\u63cf\u8ff0" rows={4} />\n </Form.Item>\n </Form>\n <ButtonFooter>\n <Flex justify="flex-end" gap={8} style={{ padding: \'16px 0\', borderTop: \'1px solid #f0f0f0\' }}>\n <Button onClick={() => form.resetFields()}>\u91cd\u7f6e</Button>\n <Button onClick={handleSave}>\u4fdd\u5b58\u8349\u7a3f</Button>\n <Button type="primary" loading={loading} onClick={handleSubmit}>\n \u63d0\u4ea4\n </Button>\n </Flex>\n </ButtonFooter>\n </Space>\n </Card>\n );\n};\n\n// \u5c45\u4e2d\u5bf9\u9f50\nconst CenterExample = () => {\n return (\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Typography.Text type="secondary">\u6309\u94ae\u5c45\u4e2d\u5bf9\u9f50</Typography.Text>\n <Card title="\u5bf9\u8bdd\u6846" style={{ width: 400 }}>\n <Typography.Paragraph>\n \u8fd9\u662f\u5bf9\u8bdd\u6846\u7684\u5185\u5bb9\u533a\u57df\uff0c\u5e95\u90e8\u6309\u94ae\u5c45\u4e2d\u5bf9\u9f50\u3002\n </Typography.Paragraph>\n </Card>\n <ButtonFooter>\n <Flex justify="center" gap={8} style={{ padding: \'16px 24px\', background: \'#fff\', borderTop: \'1px solid #f0f0f0\' }}>\n <Button>\u5173\u95ed</Button>\n <Button type="primary">\u786e\u8ba4</Button>\n </Flex>\n </ButtonFooter>\n </Space>\n );\n};\n\n// \u591a\u6309\u94ae\u5e03\u5c40\nconst MultipleButtonsExample = () => {\n return (\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Typography.Text type="secondary">\u591a\u4e2a\u64cd\u4f5c\u6309\u94ae</Typography.Text>\n <Card title="\u8be6\u60c5\u9875\u9762" style={{ width: 450 }}>\n <Typography.Paragraph>\n \u9875\u9762\u8be6\u60c5\u5185\u5bb9\u533a\u57df...\n </Typography.Paragraph>\n <Typography.Paragraph>\n \u652f\u6301\u591a\u4e2a\u6309\u94ae\u5e03\u5c40\uff0c\u5305\u62ec\u4e3b\u8981\u64cd\u4f5c\u3001\u6b21\u8981\u64cd\u4f5c\u7b49\u3002\n </Typography.Paragraph>\n </Card>\n <ButtonFooter>\n <Flex justify="space-between" align="middle" style={{ padding: \'12px 24px\', background: \'#fff\', borderTop: \'1px solid #f0f0f0\' }}>\n <Space>\n <Button type="text" danger>\u5220\u9664</Button>\n <Button type="text">\u5bfc\u51fa</Button>\n </Space>\n <Space>\n <Button>\u7f16\u8f91</Button>\n <Button type="primary">\u63d0\u4ea4\u5ba1\u6838</Button>\n </Space>\n </Flex>\n </ButtonFooter>\n </Space>\n );\n};\n\n// \u7d27\u51d1\u6837\u5f0f\nconst CompactExample = () => {\n return (\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Typography.Text type="secondary">\u7d27\u51d1\u6837\u5f0f</Typography.Text>\n <Card title="\u8bbe\u7f6e\u9875\u9762" style={{ width: 400 }}>\n <Typography.Paragraph>\n \u7cfb\u7edf\u8bbe\u7f6e\u5185\u5bb9\u533a\u57df...\n </Typography.Paragraph>\n </Card>\n <ButtonFooter>\n <Flex justify="flex-end" gap={8} style={{ padding: \'8px 0\', borderTop: \'1px solid #f0f0f0\' }}>\n <Button size="small">\u53d6\u6d88</Button>\n <Button size="small" type="primary">\u4fdd\u5b58\u8bbe\u7f6e</Button>\n </Flex>\n </ButtonFooter>\n </Space>\n );\n};\n\n// \u7981\u7528\u72b6\u6001\nconst DisabledExample = () => {\n const [disabled, setDisabled] = useState(true);\n\n return (\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Typography.Text type="secondary">\u6309\u94ae\u7981\u7528\u72b6\u6001</Typography.Text>\n <Space>\n <Button onClick={() => setDisabled(!disabled)} size="small">\n {disabled ? \'\u542f\u7528\u6309\u94ae\' : \'\u7981\u7528\u6309\u94ae\'}\n </Button>\n </Space>\n <Card title="\u8be6\u60c5\u9875" style={{ width: 400 }}>\n <Typography.Paragraph>\n \u5185\u5bb9\u533a\u57df...\n </Typography.Paragraph>\n </Card>\n <ButtonFooter>\n <Flex justify="flex-end" gap={8} style={{ padding: \'16px 0\', borderTop: \'1px solid #f0f0f0\' }}>\n <Button disabled={disabled}>\u7f16\u8f91</Button>\n <Button type="primary" disabled={disabled}>\n \u63d0\u4ea4\n </Button>\n </Flex>\n </ButtonFooter>\n </Space>\n );\n};\n\n// \u6b65\u9aa4\u6761\u573a\u666f\nconst StepsExample = () => {\n const [currentStep, setCurrentStep] = useState(0);\n const totalSteps = 3;\n\n const nextStep = () => {\n if (currentStep < totalSteps - 1) {\n setCurrentStep(currentStep + 1);\n }\n };\n\n const prevStep = () => {\n if (currentStep > 0) {\n setCurrentStep(currentStep - 1);\n }\n };\n\n const stepContent = [\n \'\u7b2c\u4e00\u6b65\uff1a\u586b\u5199\u57fa\u672c\u4fe1\u606f\',\n \'\u7b2c\u4e8c\u6b65\uff1a\u4e0a\u4f20\u76f8\u5173\u6587\u4ef6\',\n \'\u7b2c\u4e09\u6b65\uff1a\u786e\u8ba4\u63d0\u4ea4\u4fe1\u606f\'\n ];\n\n return (\n <Card title="\u6b65\u9aa4\u64cd\u4f5c" style={{ width: 450 }}>\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Typography.Text type="secondary">\n \u5f53\u524d\u6b65\u9aa4\uff1a{currentStep + 1} / {totalSteps}\n </Typography.Text>\n <div style={{ padding: \'24px\', background: \'#f5f5f5\', borderRadius: \'8px\', minHeight: \'100px\' }}>\n <Typography.Text>{stepContent[currentStep]}</Typography.Text>\n </div>\n <ButtonFooter>\n <Flex justify="space-between" style={{ padding: \'16px 0\', borderTop: \'1px solid #f0f0f0\' }}>\n <Button disabled={currentStep === 0} onClick={prevStep}>\n \u4e0a\u4e00\u6b65\n </Button>\n <Button\n type="primary"\n onClick={currentStep === totalSteps - 1 ? () => message.success(\'\u63d0\u4ea4\u6210\u529f\') : nextStep}\n >\n {currentStep === totalSteps - 1 ? \'\u63d0\u4ea4\' : \'\u4e0b\u4e00\u6b65\'}\n </Button>\n </Flex>\n </ButtonFooter>\n </Space>\n </Card>\n );\n};\n\n// \u5b9e\u9645\u5e94\u7528\u573a\u666f - \u5b8c\u6574\u9875\u9762\nconst FullPageExample = () => {\n const [form] = Form.useForm();\n\n const handleSubmit = () => {\n message.success(\'\u63d0\u4ea4\u6210\u529f\');\n };\n\n const handleSave = () => {\n message.success(\'\u5df2\u4fdd\u5b58\u8349\u7a3f\');\n };\n\n return (\n <Card title="\u5b8c\u6574\u9875\u9762\u793a\u4f8b" style={{ width: 500 }}>\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Typography.Text type="secondary">\n \u6a21\u62df\u4e00\u4e2a\u5b8c\u6574\u7684\u8868\u5355\u9875\u9762\uff0c\u5305\u542b\u6807\u9898\u3001\u5185\u5bb9\u533a\u548c\u5e95\u90e8\u64cd\u4f5c\u6309\u94ae\n </Typography.Text>\n <div style={{ minHeight: \'200px\', padding: \'20px\', background: \'#fafafa\', borderRadius: \'8px\' }}>\n <Typography.Title level={5}>\u7528\u6237\u4fe1\u606f\u7f16\u8f91</Typography.Title>\n <Form form={form} layout="vertical">\n <Form.Item name="username" label="\u7528\u6237\u540d">\n <Input placeholder="\u8bf7\u8f93\u5165\u7528\u6237\u540d" />\n </Form.Item>\n <Form.Item name="email" label="\u90ae\u7bb1">\n <Input placeholder="\u8bf7\u8f93\u5165\u90ae\u7bb1" />\n </Form.Item>\n </Form>\n </div>\n <ButtonFooter>\n <Flex justify="flex-end" gap={12} style={{ padding: \'16px 24px\', background: \'#fff\', borderTop: \'1px solid #f0f0f0\' }}>\n <Button onClick={() => form.resetFields()}>\u91cd\u7f6e</Button>\n <Button onClick={handleSave}>\u4fdd\u5b58\u8349\u7a3f</Button>\n <Button type="primary" onClick={handleSubmit}>\u63d0\u4ea4</Button>\n </Flex>\n </ButtonFooter>\n </Space>\n </Card>\n );\n};\n\nconst BaseExample = () => {\n return (\n <Space direction="vertical" size="large">\n <Typography.Title level={3}>ButtonFooter \u5e95\u90e8\u6309\u94ae\u533a</Typography.Title>\n <Typography.Paragraph>\n ButtonFooter \u662f\u9875\u9762\u5e95\u90e8\u6309\u94ae\u533a\u57df\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u81ea\u52a8\u8ba1\u7b97\u9ad8\u5ea6\u5e76\u8bbe\u7f6e CSS \u53d8\u91cf\u3002\n \u5728\u5c0f\u5c4f\u5e55\uff08\u2264768px\uff09\u4e0b\uff0c\u4f1a\u5c06\u5185\u5bb9\u6e32\u67d3\u5230 body\uff0c\u786e\u4fdd\u6309\u94ae\u59cb\u7ec8\u53ef\u89c1\u3002\n \u9002\u7528\u4e8e\u8868\u5355\u9875\u9762\u3001\u8be6\u60c5\u9875\u9762\u3001\u5bf9\u8bdd\u6846\u7b49\u573a\u666f\u3002\n </Typography.Paragraph>\n\n <Flex vertical gap={32}>\n <div>\n <Typography.Title level={4}>\u57fa\u7840\u7528\u6cd5</Typography.Title>\n <BasicExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u8868\u5355\u63d0\u4ea4\u573a\u666f</Typography.Title>\n <FormExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u5c45\u4e2d\u5bf9\u9f50</Typography.Title>\n <CenterExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u591a\u6309\u94ae\u5e03\u5c40</Typography.Title>\n <MultipleButtonsExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u7d27\u51d1\u6837\u5f0f</Typography.Title>\n <CompactExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u7981\u7528\u72b6\u6001</Typography.Title>\n <DisabledExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u6b65\u9aa4\u64cd\u4f5c</Typography.Title>\n <StepsExample />\n </div>\n\n <div>\n <Typography.Title level={4}>\u5b8c\u6574\u9875\u9762\u793a\u4f8b</Typography.Title>\n <FullPageExample />\n </div>\n </Flex>\n </Space>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_ButtonGroup",packageName:"@kne/button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:a},{name:"antd",packageName:"antd",component:d}]}]}}},62902(n,t,e){e.d(t,{A:()=>i});var a=e(43856),d=e(3382),o=e(55199),r=e(87558),l=e(65317);const i={name:"Common",summary:"<p>\u4e3a\u7ec4\u4ef6\u5e93\u63d0\u4f9b\u901a\u7528\u7684\u7ec4\u4ef6\u3001\u65b9\u6cd5\u3001hooks</p>\n<h3>\u7ec4\u4ef6</h3>\n<ol>\n<li><strong>FetchButton</strong> - Button\u89e6\u53d1\u52a0\u8f7d\u6570\u636e\uff0c\u652f\u6301\u5f39\u7a97\u5c55\u793a\u52a0\u8f7d\u7ed3\u679c</li>\n<li><strong>ScrollLoader</strong> - \u4e0b\u62c9\u6eda\u52a8\u52a0\u8f7d\u7ec4\u4ef6\uff0c\u914d\u5408 Fetch \u5b9e\u73b0\u5206\u9875\u52a0\u8f7d</li>\n<li><strong>SearchInput</strong> - \u63d0\u4f9b\u9632\u6296\u7684\u67e5\u8be2\u8f93\u5165\u6846</li>\n<li><strong>SimpleBarBox</strong> - \u81ea\u5b9a\u4e49\u6eda\u52a8\u6761\u5bb9\u5668\uff08\u5df2\u5e9f\u5f03\uff0c\u8bf7\u52ff\u4f7f\u7528\uff09</li>\n<li><strong>TreeField</strong> - \u6811\u5f62\u9009\u62e9\u7ec4\u4ef6\uff0c\u652f\u6301\u5355\u9009\u548c\u591a\u9009</li>\n<li><strong>CascaderField</strong> - \u7ea7\u8054\u9009\u62e9\u7ec4\u4ef6\uff0c\u652f\u6301\u591a\u7ea7\u8054\u52a8\u9009\u62e9</li>\n<li><strong>TypeDateRangePickerField</strong> - \u7c7b\u578b\u65e5\u671f\u8303\u56f4\u9009\u62e9\u5668\uff0c\u652f\u6301\u6309\u65e5\u3001\u5468\u3001\u6708\u9009\u62e9</li>\n<li><strong>SuperSelectField</strong> - \u65b0\u7248\u9ad8\u7ea7\u9009\u62e9\u7ec4\u4ef6\uff0c\u63d0\u4f9b\u66f4\u5f3a\u7684\u81ea\u5b9a\u4e49\u80fd\u529b</li>\n<li><strong>SuperSelectUserField</strong> - \u7528\u6237\u9009\u62e9\u7ec4\u4ef6\uff0c\u5c55\u793a\u7528\u6237\u5934\u50cf\u548c\u63cf\u8ff0</li>\n<li><strong>SuperSelectTableListField</strong> - \u8868\u683c\u5217\u8868\u9009\u62e9\u7ec4\u4ef6</li>\n<li><strong>SuperSelectTreeField</strong> - \u6811\u5f62\u9009\u62e9\u7ec4\u4ef6</li>\n<li><strong>AdvancedSelectField</strong> - \u9ad8\u7ea7\u9009\u62e9\u7ec4\u4ef6\uff0c\u652f\u6301\u7528\u6237\u9009\u62e9\u3001\u5217\u8868\u9009\u62e9</li>\n<li><strong>UserField</strong> - \u7528\u6237\u9009\u62e9\u7ec4\u4ef6\uff08\u65e7\u7248\uff09</li>\n<li><strong>TableField</strong> - \u8868\u683c\u9009\u62e9\u7ec4\u4ef6</li>\n<li><strong>AddressSelectField</strong> - \u5730\u5740\u9009\u62e9\u7ec4\u4ef6</li>\n<li><strong>AddressInputField</strong> - \u5730\u5740\u8f93\u5165\u7ec4\u4ef6</li>\n<li><strong>AddressEnum</strong> - \u5730\u5740\u679a\u4e3e\u5c55\u793a</li>\n<li><strong>FunctionSelectField</strong> - \u804c\u80fd\u9009\u62e9\u7ec4\u4ef6</li>\n<li><strong>FunctionEnum</strong> - \u804c\u80fd\u679a\u4e3e\u5c55\u793a</li>\n<li><strong>IndustrySelectField</strong> - \u884c\u4e1a\u9009\u62e9\u7ec4\u4ef6</li>\n<li><strong>IndustryEnum</strong> - \u884c\u4e1a\u679a\u4e3e\u5c55\u793a</li>\n</ol>\n<h3>\u65b9\u6cd5</h3>\n<ol>\n<li><strong>changeMoneyToChinese</strong> - \u5c06\u91d1\u989d\u8f6c\u5316\u4e3a\u5927\u5199\u7684\u4eba\u6c11\u5e01\u91d1\u989d</li>\n<li><strong>getPopupContainer</strong> - \u83b7\u53d6\u5f39\u7a97\u5bb9\u5668</li>\n<li><strong>getContainerBody</strong> - \u83b7\u53d6 body \u5bb9\u5668</li>\n<li><strong>accept</strong> - \u6587\u4ef6\u7c7b\u578b\u9a8c\u8bc1</li>\n<li><strong>createDeferred</strong> - \u521b\u5efa\u5ef6\u8fdf\u5bf9\u8c61</li>\n<li><strong>isNotEmpty</strong> - \u975e\u7a7a\u5224\u65ad</li>\n<li><strong>pxToNumber</strong> - px \u8f6c\u6570\u5b57</li>\n<li><strong>numberToPx</strong> - \u6570\u5b57\u8f6c px</li>\n<li><strong>validateIDCard</strong> - \u8eab\u4efd\u8bc1\u53f7\u9a8c\u8bc1</li>\n</ol>\n<h3>HOC (\u9ad8\u9636\u7ec4\u4ef6)</h3>\n<ol>\n<li><strong>withInputFile</strong> - \u6587\u4ef6\u4e0a\u4f20\u9ad8\u9636\u7ec4\u4ef6</li>\n<li><strong>useFileUpload</strong> - \u6587\u4ef6\u4e0a\u4f20 Hook</li>\n<li><strong>InputFileButton</strong> - \u6587\u4ef6\u4e0a\u4f20\u6309\u94ae\u7ec4\u4ef6</li>\n<li><strong>InputFileLink</strong> - \u6587\u4ef6\u4e0a\u4f20\u94fe\u63a5\u7ec4\u4ef6</li>\n<li><strong>InputFileText</strong> - \u6587\u4ef6\u4e0a\u4f20\u6587\u672c\u7ec4\u4ef6</li>\n<li><strong>withOSSFile</strong> - OSS \u6587\u4ef6\u4e0a\u4f20\u9ad8\u9636\u7ec4\u4ef6</li>\n</ol>\n<h3>Hooks</h3>\n<ol>\n<li><strong>useResize</strong> - \u76d1\u542c\u5143\u7d20\u5c3a\u5bf8\u53d8\u5316</li>\n<li><strong>usePreset</strong> - \u83b7\u53d6\u9884\u8bbe\u914d\u7f6e</li>\n</ol>\n<h3>\u5176\u4ed6\u5de5\u5177</h3>\n<ol>\n<li><strong>createTreeUtils</strong> - \u521b\u5efa\u6811\u5f62\u6570\u636e\u5de5\u5177\u51fd\u6570</li>\n<li><strong>getScrollEl</strong> - \u83b7\u53d6\u6eda\u52a8\u5143\u7d20</li>\n<li><strong>Scroller</strong> - \u6a2a\u5411\u6eda\u52a8\u7ec4\u4ef6</li>\n<li><strong>SelectInnerInput</strong> - \u5185\u90e8\u9009\u62e9\u8f93\u5165\u6846\u57fa\u7840\u7ec4\u4ef6</li>\n</ol>",api:'<h2>FetchButton</h2>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>api</td>\n<td>API\u914d\u7f6e\u5bf9\u8c61\uff0c\u5305\u542bloader\u7b49\u63a5\u53e3\u65b9\u6cd5</td>\n<td><code>{ loader: Function }</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>modalProps</td>\n<td>\u5f39\u7a97\u5c5e\u6027\u914d\u7f6e\u51fd\u6570\uff0c\u63a5\u6536 contextProps \u53c2\u6570</td>\n<td><code>(contextProps) => ModalProps</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>modalFunc</td>\n<td>\u5f39\u7a97\u529f\u80fd\u51fd\u6570\uff0c\u63a5\u6536 modalApi \u53c2\u6570</td>\n<td><code>(modalApi) => void</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onError</td>\n<td>\u9519\u8bef\u5904\u7406\u51fd\u6570</td>\n<td><code>(error) => void</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>...ButtonProps</td>\n<td>\u7ee7\u627f Button \u7ec4\u4ef6\u6240\u6709\u5c5e\u6027</td>\n<td>-</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h2>ScrollLoader</h2>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>isLoading</td>\n<td>\u662f\u5426\u6b63\u5728\u52a0\u8f7d</td>\n<td><code>boolean</code></td>\n<td>false</td>\n</tr>\n<tr>\n<td>noMore</td>\n<td>\u662f\u5426\u5df2\u52a0\u8f7d\u5b8c\u6bd5</td>\n<td><code>boolean</code></td>\n<td>false</td>\n</tr>\n<tr>\n<td>onLoader</td>\n<td>\u52a0\u8f7d\u66f4\u591a\u56de\u8c03\u51fd\u6570</td>\n<td><code>() => Promise<void></code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>completeTips</td>\n<td>\u5b8c\u6210\u63d0\u793a\u6587\u672c</td>\n<td><code>string</code></td>\n<td>"\u6ca1\u6709\u66f4\u591a\u4e86"</td>\n</tr>\n<tr>\n<td>className</td>\n<td>\u6837\u5f0f\u7c7b\u540d</td>\n<td><code>string</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u5b50\u5143\u7d20</td>\n<td><code>ReactNode</code></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h2>SearchInput</h2>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>\u8f93\u5165\u6846\u503c</td>\n<td><code>string</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onSearch</td>\n<td>\u641c\u7d22\u56de\u8c03\u51fd\u6570\uff0c\u5df2\u9632\u6296</td>\n<td><code>(value: string) => void</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>debounce</td>\n<td>\u9632\u6296\u5ef6\u8fdf\u65f6\u95f4\uff08\u6beb\u79d2\uff09</td>\n<td><code>number</code></td>\n<td>500</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>\u5360\u4f4d\u7b26</td>\n<td><code>string</code></td>\n<td>"\u8bf7\u8f93\u5165"</td>\n</tr>\n<tr>\n<td>isPopup</td>\n<td>\u662f\u5426\u5728\u5f39\u7a97\u4e2d\u4f7f\u7528</td>\n<td><code>boolean</code></td>\n<td>false</td>\n</tr>\n<tr>\n<td>...InputProps</td>\n<td>\u7ee7\u627f Input.Search \u7ec4\u4ef6\u6240\u6709\u5c5e\u6027</td>\n<td>-</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h2>TreeField</h2>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>api</td>\n<td>API\u914d\u7f6e\u5bf9\u8c61</td>\n<td><code>{ loader: Function }</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>value</td>\n<td>\u5f53\u524d\u9009\u4e2d\u7684\u503c</td>\n<td><code>Array<any></code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u53d8\u5316\u56de\u8c03</td>\n<td><code>(value: Array<any>) => void</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>fieldNames</td>\n<td>\u5b57\u6bb5\u540d\u79f0\u6620\u5c04</td>\n<td><code>{ key, title, children }</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>\u5360\u4f4d\u7b26</td>\n<td><code>string</code></td>\n<td>"\u8bf7\u9009\u62e9"</td>\n</tr>\n<tr>\n<td>single</td>\n<td>\u662f\u5426\u5355\u9009</td>\n<td><code>boolean</code></td>\n<td>false</td>\n</tr>\n<tr>\n<td>maxLength</td>\n<td>\u6700\u5927\u9009\u62e9\u6570\u91cf</td>\n<td><code>number</code></td>\n<td>MAX_VALUE</td>\n</tr>\n<tr>\n<td>isPopup</td>\n<td>\u662f\u5426\u5f39\u7a97\u5c55\u793a</td>\n<td><code>boolean</code></td>\n<td>true</td>\n</tr>\n<tr>\n<td>checkStrictly</td>\n<td>\u7236\u5b50\u8282\u70b9\u662f\u5426\u4e0d\u5173\u8054</td>\n<td><code>boolean</code></td>\n<td>false</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>\u641c\u7d22\u6846\u5360\u4f4d\u7b26</td>\n<td><code>string</code></td>\n<td>"\u641c\u7d22"</td>\n</tr>\n</tbody>\n</table>\n<h2>CascaderField</h2>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>api</td>\n<td>API\u914d\u7f6e\u5bf9\u8c61</td>\n<td><code>{ loader: Function }</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>value</td>\n<td>\u5f53\u524d\u9009\u4e2d\u7684\u503c</td>\n<td><code>Array<any></code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u53d8\u5316\u56de\u8c03</td>\n<td><code>(value: Array<any>) => void</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>\u5360\u4f4d\u7b26</td>\n<td><code>string</code></td>\n<td>"\u8bf7\u9009\u62e9"</td>\n</tr>\n<tr>\n<td>maxLength</td>\n<td>\u6700\u5927\u9009\u62e9\u6570\u91cf</td>\n<td><code>number</code></td>\n<td>MAX_VALUE</td>\n</tr>\n<tr>\n<td>isPopup</td>\n<td>\u662f\u5426\u5f39\u7a97\u5c55\u793a</td>\n<td><code>boolean</code></td>\n<td>true</td>\n</tr>\n<tr>\n<td>overlayWidth</td>\n<td>\u5f39\u7a97\u5bbd\u5ea6</td>\n<td><code>string</code></td>\n<td>"460px"</td>\n</tr>\n<tr>\n<td>menuItemWidth</td>\n<td>\u83dc\u5355\u9879\u5bbd\u5ea6</td>\n<td><code>string</code></td>\n<td>"180px"</td>\n</tr>\n<tr>\n<td>openLoadData</td>\n<td>\u662f\u5426\u5f00\u542f\u61d2\u52a0\u8f7d</td>\n<td><code>boolean</code></td>\n<td>false</td>\n</tr>\n<tr>\n<td>onlyAllowLastLevel</td>\n<td>\u662f\u5426\u53ea\u5141\u8bb8\u9009\u62e9\u6700\u540e\u4e00\u7ea7</td>\n<td><code>boolean</code></td>\n<td>false</td>\n</tr>\n<tr>\n<td>parentIdKey</td>\n<td>\u7236\u7ea7ID\u5b57\u6bb5\u540d</td>\n<td><code>string</code></td>\n<td>"id"</td>\n</tr>\n<tr>\n<td>selectLevel</td>\n<td>\u9009\u62e9\u5c42\u7ea7</td>\n<td><code>number</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>\u641c\u7d22\u6846\u5360\u4f4d\u7b26</td>\n<td><code>string</code></td>\n<td>"\u641c\u7d22"</td>\n</tr>\n<tr>\n<td>onSearch</td>\n<td>\u641c\u7d22\u56de\u8c03\u51fd\u6570</td>\n<td><code>(text: string, options) => Array</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>dataFormat</td>\n<td>\u6570\u636e\u683c\u5f0f\u5316\u51fd\u6570</td>\n<td><code>(data) => object</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>nodeFormat</td>\n<td>\u8282\u70b9\u683c\u5f0f\u5316\u51fd\u6570</td>\n<td><code>(node) => object</code></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h2>TypeDateRangePickerField</h2>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>\u5f53\u524d\u503c\uff0c\u683c\u5f0f\u4e3a <code>{ type: string, value: [Date, Date] }</code></td>\n<td><code>object</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u53d8\u5316\u56de\u8c03</td>\n<td><code>(value: object) => void</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>\u5360\u4f4d\u7b26\u6570\u7ec4</td>\n<td><code>[string, string]</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>...RangePickerProps</td>\n<td>\u7ee7\u627f DatePicker.RangePicker \u7ec4\u4ef6\u6240\u6709\u5c5e\u6027</td>\n<td>-</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h2>SuperSelectField</h2>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>api</td>\n<td>API\u914d\u7f6e\u5bf9\u8c61</td>\n<td><code>{ loader: Function }</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>value</td>\n<td>\u5f53\u524d\u9009\u4e2d\u7684\u503c</td>\n<td><code>Array<any></code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u53d8\u5316\u56de\u8c03</td>\n<td><code>(value: any) => void</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>\u5360\u4f4d\u7b26</td>\n<td><code>string</code></td>\n<td>"\u8bf7\u9009\u62e9"</td>\n</tr>\n<tr>\n<td>getSearchProps</td>\n<td>\u83b7\u53d6\u641c\u7d22\u5c5e\u6027</td>\n<td><code>(text: string) => object</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>allowSelectedAll</td>\n<td>\u662f\u5426\u5141\u8bb8\u5168\u9009</td>\n<td><code>boolean</code></td>\n<td>false</td>\n</tr>\n<tr>\n<td>isPopup</td>\n<td>\u662f\u5426\u5f39\u7a97\u5c55\u793a</td>\n<td><code>boolean</code></td>\n<td>true</td>\n</tr>\n<tr>\n<td>showSelectedTag</td>\n<td>\u662f\u5426\u663e\u793a\u5df2\u9009\u4e2d\u6807\u7b7e</td>\n<td><code>boolean</code></td>\n<td>true</td>\n</tr>\n<tr>\n<td>onConfirm</td>\n<td>\u786e\u8ba4\u56de\u8c03</td>\n<td><code>(value) => void</code></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h2>SuperSelectUserField</h2>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>api</td>\n<td>API\u914d\u7f6e\u5bf9\u8c61</td>\n<td><code>{ loader: Function }</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>value</td>\n<td>\u5f53\u524d\u9009\u4e2d\u7684\u503c</td>\n<td><code>Array<any></code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u53d8\u5316\u56de\u8c03</td>\n<td><code>(value: any) => void</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>\u5360\u4f4d\u7b26</td>\n<td><code>string</code></td>\n<td>"\u8bf7\u9009\u62e9\u7528\u6237"</td>\n</tr>\n<tr>\n<td>getSearchProps</td>\n<td>\u83b7\u53d6\u641c\u7d22\u5c5e\u6027</td>\n<td><code>(text: string) => object</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>allowSelectedAll</td>\n<td>\u662f\u5426\u5141\u8bb8\u5168\u9009</td>\n<td><code>boolean</code></td>\n<td>false</td>\n</tr>\n<tr>\n<td>labelKey</td>\n<td>\u6807\u7b7e\u5b57\u6bb5\u540d</td>\n<td><code>string</code></td>\n<td>"label"</td>\n</tr>\n<tr>\n<td>avatarKey</td>\n<td>\u5934\u50cf\u5b57\u6bb5\u540d</td>\n<td><code>string</code></td>\n<td>"avatar"</td>\n</tr>\n<tr>\n<td>descriptionKey</td>\n<td>\u63cf\u8ff0\u5b57\u6bb5\u540d</td>\n<td><code>string</code></td>\n<td>"description"</td>\n</tr>\n</tbody>\n</table>\n<h2>SuperSelectTableListField</h2>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>options</td>\n<td>\u9009\u9879\u6570\u636e\u6570\u7ec4</td>\n<td><code>Array<object></code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>columns</td>\n<td>\u8868\u683c\u5217\u914d\u7f6e</td>\n<td><code>Array<object></code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>value</td>\n<td>\u5f53\u524d\u9009\u4e2d\u7684\u503c</td>\n<td><code>Array<any></code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u53d8\u5316\u56de\u8c03</td>\n<td><code>(value: any) => void</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>\u5360\u4f4d\u7b26</td>\n<td><code>string</code></td>\n<td>"\u8bf7\u9009\u62e9"</td>\n</tr>\n<tr>\n<td>labelKey</td>\n<td>\u6807\u7b7e\u5b57\u6bb5\u540d</td>\n<td><code>string</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>valueKey</td>\n<td>\u503c\u5b57\u6bb5\u540d</td>\n<td><code>string</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>isPopup</td>\n<td>\u662f\u5426\u5f39\u7a97\u5c55\u793a</td>\n<td><code>boolean</code></td>\n<td>true</td>\n</tr>\n<tr>\n<td>getSearchCallback</td>\n<td>\u641c\u7d22\u56de\u8c03\u51fd\u6570</td>\n<td><code>(searchProps, item, contextProps) => boolean</code></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h2>SuperSelectTreeField</h2>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>api</td>\n<td>API\u914d\u7f6e\u5bf9\u8c61</td>\n<td><code>{ loader: Function }</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>value</td>\n<td>\u5f53\u524d\u9009\u4e2d\u7684\u503c</td>\n<td><code>Array<any></code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u53d8\u5316\u56de\u8c03</td>\n<td><code>(value: any) => void</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>\u5360\u4f4d\u7b26</td>\n<td><code>string</code></td>\n<td>"\u8bf7\u9009\u62e9"</td>\n</tr>\n<tr>\n<td>...TreeProps</td>\n<td>\u7ee7\u627f Tree \u7ec4\u4ef6\u6240\u6709\u5c5e\u6027</td>\n<td>-</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h2>AdvancedSelectField</h2>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>api</td>\n<td>API\u914d\u7f6e\u5bf9\u8c61</td>\n<td><code>{ loader: Function }</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>value</td>\n<td>\u5f53\u524d\u9009\u4e2d\u7684\u503c</td>\n<td><code>Array<any></code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u53d8\u5316\u56de\u8c03</td>\n<td><code>(value: any) => void</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>\u5360\u4f4d\u7b26</td>\n<td><code>string</code></td>\n<td>"\u8bf7\u9009\u62e9"</td>\n</tr>\n<tr>\n<td>allowSelectAll</td>\n<td>\u662f\u5426\u5141\u8bb8\u5168\u9009</td>\n<td><code>boolean</code></td>\n<td>false</td>\n</tr>\n<tr>\n<td>showSelectedCount</td>\n<td>\u662f\u5426\u663e\u793a\u9009\u4e2d\u6570\u91cf</td>\n<td><code>boolean</code></td>\n<td>false</td>\n</tr>\n<tr>\n<td>countUnit</td>\n<td>\u6570\u91cf\u5355\u4f4d</td>\n<td><code>string</code></td>\n<td>"\u4e2a"</td>\n</tr>\n<tr>\n<td>allLabel</td>\n<td>\u5168\u9009\u9879\u6807\u7b7e</td>\n<td><code>string</code></td>\n<td>"\u5168\u90e8"</td>\n</tr>\n<tr>\n<td>showSelectedTag</td>\n<td>\u662f\u5426\u663e\u793a\u9009\u4e2d\u6807\u7b7e</td>\n<td><code>boolean</code></td>\n<td>true</td>\n</tr>\n<tr>\n<td>single</td>\n<td>\u662f\u5426\u5355\u9009</td>\n<td><code>boolean</code></td>\n<td>false</td>\n</tr>\n<tr>\n<td>getSearchProps</td>\n<td>\u83b7\u53d6\u641c\u7d22\u5c5e\u6027</td>\n<td><code>(text: string) => object</code></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h2>UserField (AdvancedSelect)</h2>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>api</td>\n<td>API\u914d\u7f6e\u5bf9\u8c61</td>\n<td><code>{ loader: Function }</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultValue</td>\n<td>\u9ed8\u8ba4\u503c</td>\n<td><code>Array<any></code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u53d8\u5316\u56de\u8c03</td>\n<td><code>(value: any) => void</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>getSearchProps</td>\n<td>\u83b7\u53d6\u641c\u7d22\u5c5e\u6027</td>\n<td><code>(text: string) => object</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>allowSelectAll</td>\n<td>\u662f\u5426\u5141\u8bb8\u5168\u9009</td>\n<td><code>boolean</code></td>\n<td>false</td>\n</tr>\n<tr>\n<td>showSelectedCount</td>\n<td>\u662f\u5426\u663e\u793a\u9009\u4e2d\u6570\u91cf</td>\n<td><code>boolean</code></td>\n<td>false</td>\n</tr>\n<tr>\n<td>countUnit</td>\n<td>\u6570\u91cf\u5355\u4f4d</td>\n<td><code>string</code></td>\n<td>"\u4eba"</td>\n</tr>\n<tr>\n<td>allLabel</td>\n<td>\u5168\u9009\u9879\u6807\u7b7e</td>\n<td><code>string</code></td>\n<td>"\u6240\u6709\u4eba"</td>\n</tr>\n<tr>\n<td>showSelectedTag</td>\n<td>\u662f\u5426\u663e\u793a\u9009\u4e2d\u6807\u7b7e</td>\n<td><code>boolean</code></td>\n<td>true</td>\n</tr>\n</tbody>\n</table>\n<h2>AddressEnum</h2>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5730\u5740\u7f16\u7801</td>\n<td><code>string</code></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h2>FunctionEnum</h2>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u804c\u80fd\u7f16\u7801</td>\n<td><code>string</code></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h2>IndustryEnum</h2>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u884c\u4e1a\u7f16\u7801</td>\n<td><code>string</code></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h2>InputFileButton / InputFileLink / InputFileText</h2>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>accept</td>\n<td>\u63a5\u53d7\u7684\u6587\u4ef6\u7c7b\u578b</td>\n<td><code>string</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>multiple</td>\n<td>\u662f\u5426\u591a\u9009</td>\n<td><code>boolean</code></td>\n<td>false</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u6587\u4ef6\u9009\u62e9\u56de\u8c03</td>\n<td><code>(file: File) => void</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>...TypographyProps</td>\n<td>\u7ee7\u627f Typography \u7ec4\u4ef6\u6240\u6709\u5c5e\u6027</td>\n<td>-</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h2>changeMoneyToChinese</h2>\n<table>\n<thead>\n<tr>\n<th>\u53c2\u6570\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>money</td>\n<td>\u91d1\u989d\u6570\u503c</td>\n<td><code>number \| string</code></td>\n</tr>\n</tbody>\n</table>\n<table>\n<thead>\n<tr>\n<th>\u8fd4\u56de\u503c</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>chineseStr</td>\n<td>\u5927\u5199\u91d1\u989d\u5b57\u7b26\u4e32</td>\n<td><code>string</code></td>\n</tr>\n</tbody>\n</table>\n<p>\u6700\u5927\u5904\u7406\u6570\u5b57\uff1a999999999999999.999999</p>',example:{isFull:!1,className:"Common_d13bc",style:".Common_d13bc .scroll-list {\n max-height: 300px;\n}",list:[{title:"FetchButton",description:"Button\u89e6\u53d1\u52a0\u8f7d\u6570\u636e\uff0c\u52a0\u8f7d\u6570\u636e\u540e\u5728\u5f39\u7a97\u4e2d\u5c55\u793a",code:'const {FetchButton} = _Common;\nconst {Typography, App} = _antd;\n\nconst {useModal} = _Modal;\n\nconst BaseExample = () => {\n const modal = useModal();\n\n return (<FetchButton\n api={{\n loader: () => {\n return [{id: 1, name: "\u524d\u7aef\u5f00\u53d1\u7ec4", count: 8, description: "\u8d1f\u8d23\u6240\u6709\u524d\u7aef\u9875\u9762\u5f00\u53d1"}, {\n id: 2,\n name: "\u540e\u7aef\u5f00\u53d1\u7ec4",\n count: 12,\n description: "\u8d1f\u8d23 API \u548c\u670d\u52a1\u5668\u5f00\u53d1"\n }, {id: 3, name: "\u6d4b\u8bd5\u7ec4", count: 5, description: "\u8d1f\u8d23\u529f\u80fd\u6d4b\u8bd5\u548c\u8d28\u91cf\u4fdd\u8bc1"}, {\n id: 4,\n name: "\u8fd0\u7ef4\u7ec4",\n count: 3,\n description: "\u8d1f\u8d23\u7cfb\u7edf\u90e8\u7f72\u548c\u7ef4\u62a4"\n },];\n },\n }}\n modalProps={(contextProps) => {\n const {data, fetchApi} = contextProps;\n return {\n title: "\u56e2\u961f\u4fe1\u606f", children: (<div>\n <Typography.Paragraph>\u5f53\u524d\u9879\u76ee\u56e2\u961f\u6784\u6210\uff1a</Typography.Paragraph>\n {data.map((item) => (<div key={item.id} style={{marginBottom: 16}}>\n <Typography.Text strong style={{fontSize: 15}}>\n {item.name}\n </Typography.Text>\n <div style={{marginTop: 4, color: \'#666\'}}>\n <Typography.Text>\u4eba\u6570\uff1a{item.count} \u4eba</Typography.Text>\n <Typography.Text style={{marginLeft: 16}}>\n \u8bf4\u660e\uff1a{item.description}\n </Typography.Text>\n </div>\n </div>))}\n </div>),\n };\n }}\n modalFunc={modal}\n >\n \u67e5\u770b\u56e2\u961f\u4fe1\u606f\n </FetchButton>);\n};\n\nrender(<BaseExample/>);\n\n',scope:[{name:"_Common",packageName:"@components/Common",component:a},{name:"_Modal",packageName:"@components/Modal",component:d},{name:"_antd",packageName:"antd",component:o}]},{title:"Enum",description:"\u679a\u4e3e\u5c55\u793a\u7ec4\u4ef6\uff0c\u5c55\u793a\u5730\u5740\u3001\u804c\u80fd\u3001\u884c\u4e1a\u7b49\u679a\u4e3e\u4fe1\u606f",code:'const Common = _Common;\nconst { Space } = _antd;\n\nconst { AddressEnum, FunctionEnum, IndustryEnum } = Common;\n\nconst BaseExample = () => {\n return (\n <Space direction={"vertical"}>\n <AddressEnum name={"010"} />\n <FunctionEnum name={"010"} />\n <IndustryEnum name={"010"} />\n </Space>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Common",packageName:"@components/Common",component:a},{name:"_antd",packageName:"antd",component:o}]},{title:"ScrollLoader",description:"\u4e0b\u62c9\u6eda\u52a8\u52a0\u8f7d\u7ec4\u4ef6\uff0c\u914d\u5408 Fetch \u5b9e\u73b0\u5206\u9875\u52a0\u8f7d",code:'const { get, merge, range } = lodash;\nconst { ScrollLoader } = _Common;\nconst { default: Fetch } = _reactFetch;\nconst { Card, List, Avatar, Typography, Space, Tag } = _antd;\n\nconst BaseExample = () => {\n const mockUsers = [\n { name: "\u5f20\u4e09", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=zhang", role: "\u4ea7\u54c1\u7ecf\u7406" },\n { name: "\u674e\u56db", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=li", role: "UI\u8bbe\u8ba1\u5e08" },\n { name: "\u738b\u4e94", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=wang", role: "\u524d\u7aef\u5f00\u53d1" },\n { name: "\u8d75\u516d", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=zhao", role: "\u540e\u7aef\u5f00\u53d1" },\n { name: "\u5b59\u4e03", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=sun", role: "\u6d4b\u8bd5\u5de5\u7a0b\u5e08" },\n { name: "\u5468\u516b", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=zhou", role: "\u8fd0\u7ef4\u5de5\u7a0b\u5e08" },\n ];\n\n const mockComments = [\n "\u8fd9\u4e2a\u529f\u80fd\u5f88\u5b9e\u7528\uff0c\u671f\u5f85\u4e0a\u7ebf\uff01",\n "\u754c\u9762\u8bbe\u8ba1\u7b80\u6d01\u7f8e\u89c2\uff0c\u7528\u6237\u4f53\u9a8c\u4e0d\u9519\u3002",\n "\u5efa\u8bae\u589e\u52a0\u6279\u91cf\u64cd\u4f5c\u529f\u80fd\u3002",\n "\u52a0\u8f7d\u901f\u5ea6\u5f88\u5feb\uff0c\u6027\u80fd\u5f88\u597d\u3002",\n "\u6587\u6863\u6e05\u6670\uff0c\u4e0a\u624b\u5bb9\u6613\u3002",\n ];\n\n return (\n <Card title="\u56e2\u961f\u8bc4\u8bba\u5217\u8868" style={{ maxWidth: 600 }}>\n <Fetch\n loader={({ data }) => {\n const params = Object.assign(\n {\n perPage: 10,\n currentPage: 1,\n },\n data\n );\n return new Promise((resolve) => {\n const start = (params.currentPage - 1) * params.perPage;\n setTimeout(() => {\n resolve({\n totalCount: 50,\n pageData: range(start, start + params.perPage).map((key) => {\n const user = mockUsers[key % mockUsers.length];\n const comment = mockComments[key % mockComments.length];\n const hours = Math.floor(key / 3);\n return {\n id: key + 1,\n user: user.name,\n avatar: user.avatar,\n role: user.role,\n content: comment,\n time: `${hours}\u5c0f\u65f6\u524d`,\n likes: Math.floor(Math.random() * 50) + 1,\n };\n }),\n });\n }, 500);\n });\n }}\n render={(fetchApi) => {\n const pagination = {\n paramsType: "data",\n current: "currentPage",\n pageSize: "perPage",\n defaultPageSize: 10,\n };\n const current = get(\n fetchApi.requestParams,\n [pagination.paramsType, pagination.current],\n 1\n ),\n pageSize =\n get(fetchApi.requestParams, [\n pagination.paramsType,\n pagination.pageSize,\n ]) \|\| pagination.defaultPageSize;\n\n const formatData = {\n list: fetchApi.data.pageData \|\| [],\n total: fetchApi.data.totalCount \|\| 0,\n };\n return (\n <ScrollLoader\n completeTips=""\n className="scroll-list"\n isLoading={!fetchApi.isComplete}\n noMore={!formatData.total \|\| current * pageSize >= formatData.total}\n onLoader={async () => {\n await fetchApi.loadMore(\n merge({\n data: {\n [pagination.pageSize]: pageSize,\n [pagination.current]: current + 1,\n },\n }),\n (data, newData) => {\n return Object.assign({}, newData, {\n pageData: data.pageData.concat(newData.pageData),\n });\n }\n );\n }}\n >\n <List\n dataSource={formatData.list}\n renderItem={(item) => (\n <List.Item style={{ padding: "12px 0", borderBottom: "1px solid #f0f0f0" }}>\n <List.Item.Meta\n avatar={<Avatar src={item.avatar} />}\n title={\n <Space>\n <Typography.Text strong>{item.user}</Typography.Text>\n <Tag color="blue" style={{ fontSize: 12 }}>{item.role}</Tag>\n <Typography.Text type="secondary" style={{ fontSize: 12 }}>{item.time}</Typography.Text>\n </Space>\n }\n description={\n <Space direction="vertical" size={4}>\n <Typography.Text>{item.content}</Typography.Text>\n <Typography.Text type="secondary" style={{ fontSize: 12 }}>\n \ud83d\udc4d {item.likes} \u4eba\u8d5e\u540c\n </Typography.Text>\n </Space>\n }\n />\n </List.Item>\n )}\n />\n </ScrollLoader>\n );\n }}\n />\n </Card>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Common",packageName:"@components/Common",component:a},{name:"_reactFetch",packageName:"@kne/react-fetch",component:r},{name:"lodash",packageName:"lodash",component:l},{name:"_antd",packageName:"antd",component:o}]},{title:"SearchInput",description:"\u63d0\u4f9b\u9632\u6296\u7684\u67e5\u8be2\u8f93\u5165\u6846\u7ec4\u4ef6",code:'const Common = _Common;\n\nconst { SearchInput } = Common;\nconst { useState } = React;\n\nconst BaseExample = () => {\n const [value, setValue] = useState("");\n return (\n <SearchInput\n value={value}\n onSearch={(value) => {\n setValue(value);\n console.log(value);\n }}\n />\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Common",packageName:"@components/Common",component:a}]},{title:"AdvancedSelect",description:"\u9ad8\u7ea7\u9009\u62e9\u7ec4\u4ef6\uff0c\u652f\u6301\u7528\u6237\u9009\u62e9\u3001\u5217\u8868\u9009\u62e9\u7b49\u529f\u80fd",code:'const { UserField } = _Common;\nconst { Space, Typography } = _antd;\n\nconst BaseExample = () => {\n const [value, setValue] = React.useState([]);\n\n return (\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Typography.Text>\n \u5df2\u9009\u62e9 {value.length} \u4eba\n </Typography.Text>\n <UserField\n value={value}\n onChange={setValue}\n getSearchProps={(text) => {\n return {\n data: { keyword: text },\n };\n }}\n allowSelectAll\n showSelectedCount\n countUnit="\u4eba"\n allLabel="\u6240\u6709\u4eba"\n placeholder="\u9009\u62e9\u56e2\u961f\u6210\u5458"\n api={{\n loader: () => {\n return {\n pageData: [\n {\n label: "\u5f20\u4e09",\n value: 1,\n avatar: "avatar-001",\n description: "\u524d\u7aef\u5de5\u7a0b\u5e08",\n },\n {\n label: "\u674e\u56db",\n value: 2,\n avatar: "avatar-002",\n description: "\u540e\u7aef\u5de5\u7a0b\u5e08",\n },\n {\n label: "\u738b\u4e94",\n value: 3,\n avatar: "avatar-003",\n description: "\u4ea7\u54c1\u7ecf\u7406",\n },\n {\n label: "\u8d75\u516d",\n value: 4,\n avatar: "avatar-004",\n description: "UI\u8bbe\u8ba1\u5e08",\n },\n {\n label: "\u94b1\u4e03",\n value: 5,\n avatar: "avatar-005",\n description: "\u6d4b\u8bd5\u5de5\u7a0b\u5e08",\n },\n ],\n };\n },\n }}\n />\n </Space>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Common",packageName:"@components/Common",component:a},{name:"_antd",packageName:"antd",component:o}]},{title:"SuperSelect",description:"\u65b0\u7248\u9ad8\u7ea7\u9009\u62e9\u7ec4\u4ef6\uff0c\u63d0\u4f9b\u66f4\u5f3a\u7684\u81ea\u5b9a\u4e49\u80fd\u529b",code:'const { SuperSelectField, SuperSelectTableListField, SuperSelectUserField } = _Common;\nconst { Space, Typography } = _antd;\nconst { useState } = React;\n\nconst BaseExample = () => {\n const [userValue, setUserValue] = useState([]);\n const [deptValue, setDeptValue] = useState([]);\n\n return (\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Typography.Text strong>\u7528\u6237\u9009\u62e9</Typography.Text>\n <SuperSelectUserField\n value={userValue}\n onChange={setUserValue}\n allowSelectedAll\n placeholder="\u9009\u62e9\u7528\u6237"\n api={{\n loader: () => {\n return {\n pageData: [\n {\n label: "\u5f20\u4e09",\n value: 1,\n avatar: { src: "https://api.dicebear.com/7.x/avataaars/svg?seed=zhang" },\n description: "\u9ad8\u7ea7\u524d\u7aef\u5de5\u7a0b\u5e08",\n },\n {\n label: "\u674e\u56db",\n value: 2,\n avatar: { src: "https://api.dicebear.com/7.x/avataaars/svg?seed=li" },\n description: "\u8d44\u6df1\u540e\u7aef\u5de5\u7a0b\u5e08",\n },\n {\n label: "\u738b\u4e94",\n value: 3,\n avatar: { src: "https://api.dicebear.com/7.x/avataaars/svg?seed=wang" },\n description: "\u4ea7\u54c1\u7ecf\u7406",\n },\n {\n label: "\u8d75\u516d",\n value: 4,\n avatar: { src: "https://api.dicebear.com/7.x/avataaars/svg?seed=zhao" },\n description: "UI\u8bbe\u8ba1\u5e08",\n },\n {\n label: "\u94b1\u4e03",\n value: 5,\n avatar: { src: "https://api.dicebear.com/7.x/avataaars/svg?seed=qian" },\n description: "\u6d4b\u8bd5\u5de5\u7a0b\u5e08",\n },\n ],\n };\n },\n }}\n />\n\n <Typography.Text strong>\u90e8\u95e8\u9009\u62e9</Typography.Text>\n <SuperSelectField\n isPopup={false}\n value={deptValue}\n onChange={setDeptValue}\n allowSelectedAll\n placeholder="\u9009\u62e9\u90e8\u95e8"\n api={{\n loader: () => {\n return {\n pageData: [\n {\n label: "\u6280\u672f\u90e8",\n value: "tech",\n description: "\u8d1f\u8d23\u4ea7\u54c1\u6280\u672f\u5b9e\u73b0",\n },\n {\n label: "\u4ea7\u54c1\u90e8",\n value: "product",\n description: "\u8d1f\u8d23\u4ea7\u54c1\u89c4\u5212\u548c\u8bbe\u8ba1",\n },\n {\n label: "\u8bbe\u8ba1\u90e8",\n value: "design",\n description: "\u8d1f\u8d23 UI/UX \u8bbe\u8ba1",\n },\n {\n label: "\u5e02\u573a\u90e8",\n value: "marketing",\n description: "\u8d1f\u8d23\u5e02\u573a\u63a8\u5e7f\u548c\u8fd0\u8425",\n },\n ],\n };\n },\n }}\n />\n\n <Typography.Text strong>\u9879\u76ee\u5217\u8868\u9009\u62e9</Typography.Text>\n <SuperSelectTableListField\n isPopup={false}\n labelKey="name"\n valueKey="id"\n placeholder="\u9009\u62e9\u9879\u76ee"\n getSearchCallback={(searchProps, item, contextProps) => {\n const { props } = contextProps;\n const { labelKey } = props;\n if (!searchProps.searchText) {\n return true;\n }\n return item[labelKey].indexOf(searchProps.searchText) > -1;\n }}\n options={[\n { id: 1, name: "\u7535\u5546\u5e73\u53f0", count: 15, description: "\u5728\u7ebf\u8d2d\u7269\u5e73\u53f0", disabled: false },\n { id: 2, name: "OA\u7cfb\u7edf", count: 8, description: "\u529e\u516c\u81ea\u52a8\u5316\u7cfb\u7edf", disabled: true },\n { id: 3, name: "CRM\u7cfb\u7edf", count: 10, description: "\u5ba2\u6237\u5173\u7cfb\u7ba1\u7406", disabled: false },\n { id: 4, name: "\u6570\u636e\u5927\u5c4f", count: 5, description: "\u6570\u636e\u53ef\u89c6\u5316\u5c55\u793a", disabled: false },\n { id: 5, name: "\u79fb\u52a8APP", count: 12, description: "\u79fb\u52a8\u7aef\u5e94\u7528", disabled: false },\n { id: 6, name: "\u5c0f\u7a0b\u5e8f", count: 6, description: "\u5fae\u4fe1\u5c0f\u7a0b\u5e8f", disabled: false },\n ]}\n columns={[\n {\n name: "name",\n title: "\u9879\u76ee\u540d\u79f0",\n span: 8,\n },\n {\n name: "count",\n title: "\u56e2\u961f\u4eba\u6570",\n span: 8,\n },\n {\n name: "description",\n title: "\u9879\u76ee\u63cf\u8ff0",\n span: 8,\n },\n ]}\n />\n </Space>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Common",packageName:"@components/Common",component:a},{name:"_antd",packageName:"antd",component:o}]},{title:"TreeField",description:"\u6811\u5f62\u9009\u62e9\u7ec4\u4ef6\uff0c\u652f\u6301\u5355\u9009\u548c\u591a\u9009",code:"const { TreeField } = _Common;\nconst { Space, Typography, Button } = _antd;\nconst { useState } = React;\n\nconst BaseExample = () => {\n const [value, setValue] = useState([]);\n\n return (\n <Space direction=\"vertical\" style={{ width: '100%' }}>\n <Typography.Text strong>\u7ec4\u7ec7\u67b6\u6784\u9009\u62e9\uff08\u591a\u9009\uff09</Typography.Text>\n <Typography.Text type=\"secondary\" style={{ fontSize: 12 }}>\n \u5df2\u9009\u62e9: {value.length} \u4e2a\u90e8\u95e8\n </Typography.Text>\n <TreeField\n api={{\n loader: () => {\n return [\n {\n key: 'tech',\n title: '\u6280\u672f\u90e8',\n children: [\n {\n key: 'frontend',\n title: '\u524d\u7aef\u7ec4',\n children: [\n { key: 'fe-web', title: 'Web\u524d\u7aef' },\n { key: 'fe-mobile', title: '\u79fb\u52a8\u7aef' },\n ],\n },\n {\n key: 'backend',\n title: '\u540e\u7aef\u7ec4',\n children: [\n { key: 'be-java', title: 'Java\u540e\u7aef' },\n { key: 'be-node', title: 'Node.js\u540e\u7aef' },\n ],\n },\n ],\n },\n {\n key: 'product',\n title: '\u4ea7\u54c1\u90e8',\n children: [\n { key: 'pm-web', title: 'Web\u4ea7\u54c1' },\n { key: 'pm-mobile', title: '\u79fb\u52a8\u4ea7\u54c1' },\n ],\n },\n {\n key: 'design',\n title: '\u8bbe\u8ba1\u90e8',\n children: [\n { key: 'ui', title: 'UI\u8bbe\u8ba1' },\n { key: 'ux', title: 'UX\u8bbe\u8ba1' },\n ],\n },\n {\n key: 'marketing',\n title: '\u5e02\u573a\u90e8',\n children: [\n { key: 'market', title: '\u5e02\u573a\u63a8\u5e7f' },\n { key: 'operation', title: '\u8fd0\u8425' },\n ],\n },\n ];\n },\n }}\n value={value}\n onChange={setValue}\n placeholder=\"\u8bf7\u9009\u62e9\u90e8\u95e8\"\n single={false}\n />\n <Button onClick={() => setValue([])}>\u6e05\u7a7a\u9009\u62e9</Button>\n </Space>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_Common",packageName:"@components/Common",component:a},{name:"_antd",packageName:"antd",component:o}]},{title:"CascaderField",description:"\u7ea7\u8054\u9009\u62e9\u7ec4\u4ef6\uff0c\u652f\u6301\u591a\u7ea7\u8054\u52a8\u9009\u62e9",code:"const { CascaderField } = _Common;\nconst { Space, Typography, Button } = _antd;\nconst { useState } = React;\n\nconst BaseExample = () => {\n const [value, setValue] = useState([]);\n\n return (\n <Space direction=\"vertical\" style={{ width: '100%' }}>\n <Typography.Text strong>\u7701\u5e02\u533a\u7ea7\u8054\u9009\u62e9\uff08\u6700\u591a3\u4e2a\uff09</Typography.Text>\n <Typography.Text type=\"secondary\" style={{ fontSize: 12 }}>\n \u5df2\u9009\u62e9: {value.length} \u4e2a\u533a\u57df\n </Typography.Text>\n <CascaderField\n api={{\n loader: () => {\n return [\n {\n id: 'zhejiang',\n label: '\u6d59\u6c5f\u7701',\n children: [\n {\n id: 'hangzhou',\n label: '\u676d\u5dde\u5e02',\n children: [\n { id: 'xihu', label: '\u897f\u6e56\u533a' },\n { id: 'gongshu', label: '\u62f1\u5885\u533a' },\n { id: 'jianggan', label: '\u6c5f\u5e72\u533a' },\n { id: 'binjiang', label: '\u6ee8\u6c5f\u533a' },\n ],\n },\n {\n id: 'ningbo',\n label: '\u5b81\u6ce2\u5e02',\n children: [\n { id: 'haishu', label: '\u6d77\u66d9\u533a' },\n { id: 'jiangbei', label: '\u6c5f\u5317\u533a' },\n { id: 'yinzhou', label: '\u911e\u5dde\u533a' },\n ],\n },\n ],\n },\n {\n id: 'jiangsu',\n label: '\u6c5f\u82cf\u7701',\n children: [\n {\n id: 'nanjing',\n label: '\u5357\u4eac\u5e02',\n children: [\n { id: 'xuanwu', label: '\u7384\u6b66\u533a' },\n { id: 'jianye', label: '\u5efa\u90ba\u533a' },\n { id: 'gulou', label: '\u9f13\u697c\u533a' },\n ],\n },\n {\n id: 'suzhou',\n label: '\u82cf\u5dde\u5e02',\n children: [\n { id: 'gusu', label: '\u59d1\u82cf\u533a' },\n { id: 'wuzhong', label: '\u5434\u4e2d\u533a' },\n ],\n },\n ],\n },\n {\n id: 'guangdong',\n label: '\u5e7f\u4e1c\u7701',\n children: [\n {\n id: 'guangzhou',\n label: '\u5e7f\u5dde\u5e02',\n children: [\n { id: 'yuexiu', label: '\u8d8a\u79c0\u533a' },\n { id: 'tianhe', label: '\u5929\u6cb3\u533a' },\n { id: 'baiyun', label: '\u767d\u4e91\u533a' },\n ],\n },\n {\n id: 'shenzhen',\n label: '\u6df1\u5733\u5e02',\n children: [\n { id: 'futian', label: '\u798f\u7530\u533a' },\n { id: 'nanshan', label: '\u5357\u5c71\u533a' },\n { id: 'baoan', label: '\u5b9d\u5b89\u533a' },\n ],\n },\n ],\n },\n ];\n },\n }}\n value={value}\n onChange={setValue}\n placeholder=\"\u8bf7\u9009\u62e9\u7701\u5e02\u533a\"\n maxLength={3}\n isPopup={true}\n />\n <Button onClick={() => setValue([])}>\u6e05\u7a7a\u9009\u62e9</Button>\n </Space>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_Common",packageName:"@components/Common",component:a},{name:"_antd",packageName:"antd",component:o}]},{title:"TypeDateRangePicker",description:"\u7c7b\u578b\u65e5\u671f\u8303\u56f4\u9009\u62e9\u5668\uff0c\u652f\u6301\u6309\u65e5\u3001\u5468\u3001\u6708\u9009\u62e9",code:"const { TypeDateRangePickerField } = _Common;\nconst { Space, Typography } = _antd;\nconst { useState } = React;\n\nconst BaseExample = () => {\n const [value, setValue] = useState({\n type: 'date',\n value: [],\n });\n\n return (\n <Space direction=\"vertical\" style={{ width: '100%' }}>\n <Typography.Text>\u5f53\u524d\u503c: {JSON.stringify(value)}</Typography.Text>\n <TypeDateRangePickerField\n value={value}\n onChange={setValue}\n placeholder={['\u5f00\u59cb\u65e5\u671f', '\u7ed3\u675f\u65e5\u671f']}\n />\n </Space>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_Common",packageName:"@components/Common",component:a},{name:"_antd",packageName:"antd",component:o}]},{title:"InputFile",description:"\u6587\u4ef6\u4e0a\u4f20\u7ec4\u4ef6\uff0c\u652f\u6301\u6309\u94ae\u3001\u94fe\u63a5\u3001\u6587\u672c\u7b49\u591a\u79cd\u5f62\u5f0f",code:'const { InputFileButton, InputFileLink, InputFileText } = _Common;\nconst { Space, Typography, message, Alert } = _antd;\n\nconst BaseExample = () => {\n const handleFileChange = (file) => {\n console.log(\'\u9009\u62e9\u7684\u6587\u4ef6:\', file);\n const sizeInMB = (file.size / 1024 / 1024).toFixed(2);\n message.success(`\u5df2\u9009\u62e9\u6587\u4ef6: ${file.name} (${sizeInMB}MB)`);\n };\n\n return (\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Typography.Text strong>\u6587\u4ef6\u4e0a\u4f20\u7ec4\u4ef6\u793a\u4f8b</Typography.Text>\n <Alert\n message="\u652f\u6301\u4e0a\u4f20\u56fe\u7247\uff08JPG\u3001PNG\uff09\u548c PDF \u6587\u6863\uff0c\u5355\u4e2a\u6587\u4ef6\u4e0d\u8d85\u8fc7 10MB"\n type="info"\n showIcon\n style={{ marginBottom: 16 }}\n />\n <Typography.Text>\u6309\u94ae\u5f62\u5f0f\u4e0a\u4f20\uff1a</Typography.Text>\n <InputFileButton\n accept=".jpg,.png,.pdf"\n onChange={handleFileChange}\n >\n \u70b9\u51fb\u4e0a\u4f20\u6587\u4ef6\n </InputFileButton>\n\n <Typography.Text style={{ marginTop: 8 }}>\u94fe\u63a5\u5f62\u5f0f\u4e0a\u4f20\uff1a</Typography.Text>\n <InputFileLink\n accept=".jpg,.png,.pdf"\n onChange={handleFileChange}\n >\n \u9009\u62e9\u8981\u4e0a\u4f20\u7684\u6587\u4ef6\n </InputFileLink>\n\n <Typography.Text style={{ marginTop: 8 }}>\u6587\u672c\u5f62\u5f0f\u4e0a\u4f20\uff1a</Typography.Text>\n <InputFileText\n accept=".jpg,.png,.pdf"\n onChange={handleFileChange}\n >\n \u6d4f\u89c8\u6587\u4ef6\n </InputFileText>\n </Space>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Common",packageName:"@components/Common",component:a},{name:"_antd",packageName:"antd",component:o}]},{title:"changeMoneyToChinese",description:"\u91d1\u989d\u8f6c\u5927\u5199\u4e2d\u6587\u5de5\u5177\u51fd\u6570",code:"const { changeMoneyToChinese } = _Common;\nconst { Space, Typography, Input, Button, Card } = _antd;\nconst { useState } = React;\n\nconst BaseExample = () => {\n const [amount, setAmount] = useState('');\n const chineseAmount = changeMoneyToChinese(amount);\n\n return (\n <Space direction=\"vertical\" style={{ width: '400px' }}>\n <Typography.Text strong style={{ fontSize: 16 }}>\n \u91d1\u989d\u8f6c\u5927\u5199\u4e2d\u6587\n </Typography.Text>\n <Input\n placeholder=\"\u8bf7\u8f93\u5165\u91d1\u989d\"\n value={amount}\n onChange={(e) => setAmount(e.target.value)}\n type=\"number\"\n prefix=\"\xa5\"\n size=\"large\"\n addonAfter=\"\u5143\"\n />\n <Card size=\"small\" style={{ marginTop: 8 }}>\n <Typography.Text strong style={{ fontSize: 14 }}>\n \u5927\u5199\u91d1\u989d\uff1a\n </Typography.Text>\n <Typography.Text\n style={{\n fontSize: 18,\n fontWeight: 500,\n marginLeft: 8,\n color: '#1890ff'\n }}\n >\n {chineseAmount \|\| '\u7b49\u5f85\u8f93\u5165...'}\n </Typography.Text>\n </Card>\n <Space wrap>\n <Button onClick={() => setAmount('123456.78')}>\n \u5e38\u7528\u91d1\u989d\uff1a123,456.78\n </Button>\n <Button onClick={() => setAmount('10000')}>\n \u6574\u6570\uff1a10,000\n </Button>\n <Button onClick={() => setAmount('0')}>\n \u96f6\u503c\uff1a0\n </Button>\n <Button onClick={() => setAmount('')}>\n \u6e05\u7a7a\n </Button>\n </Space>\n <Typography.Text type=\"secondary\" style={{ fontSize: 12 }}>\n * \u6700\u5927\u652f\u6301\u91d1\u989d\uff1a999,999,999,999,999.999999\n </Typography.Text>\n </Space>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_Common",packageName:"@components/Common",component:a},{name:"_antd",packageName:"antd",component:o}]}]}}},56026(n,t,e){e.d(t,{A:()=>l});var a=e(25963),d=e(72752),o=e(55199),r=e(65317);const l={name:"Drawer",summary:"<p>\u5c4f\u5e55\u8fb9\u7f18\u6ed1\u51fa\u7684\u6d6e\u5c42\u9762\u677f\uff0c\u9002\u7528\u4e8e\u5c55\u793a\u8be6\u7ec6\u4fe1\u606f\u3001\u8868\u5355\u7f16\u8f91\u3001\u6570\u636e\u67e5\u770b\u7b49\u573a\u666f\u3002\u652f\u6301\u4e09\u79cd\u4f7f\u7528\u65b9\u5f0f\uff1a\u53d7\u63a7\u7ec4\u4ef6\u3001Hook \u8c03\u7528\u3001\u6309\u94ae\u89e6\u53d1\u3002</p>\n<p>\u6838\u5fc3\u7279\u6027\u5305\u62ec\uff1a</p>\n<ul>\n<li><strong>\u7075\u6d3b\u7684\u6253\u5f00\u65b9\u5f0f</strong>\uff1a\u652f\u6301\u53d7\u63a7\u6a21\u5f0f\u3001\u51fd\u6570\u8c03\u7528\u548c\u6309\u94ae\u89e6\u53d1\u4e09\u79cd\u65b9\u5f0f</li>\n<li><strong>\u591a\u79cd\u5c3a\u5bf8\u89c4\u683c</strong>\uff1a\u63d0\u4f9b small\uff08600px\uff09\u3001default\uff081000px\uff09\u3001large\uff08\u5168\u5c4f-64px\uff09\u4e09\u79cd\u9884\u8bbe\u5c3a\u5bf8</li>\n<li><strong>\u4e30\u5bcc\u7684\u81ea\u5b9a\u4e49\u80fd\u529b</strong>\uff1a\u652f\u6301\u81ea\u5b9a\u4e49\u5e95\u90e8\u6309\u94ae\u3001\u88c5\u9970\u5668\u4fee\u9970\u3001\u5f02\u6b65\u64cd\u4f5c\u7b49</li>\n<li><strong>\u6570\u636e\u52a0\u8f7d\u96c6\u6210</strong>\uff1aDrawerButton \u7ec4\u4ef6\u7ed3\u5408\u6570\u636e\u52a0\u8f7d\uff0c\u81ea\u52a8\u5728\u52a0\u8f7d\u5b8c\u6210\u540e\u6253\u5f00\u62bd\u5c49</li>\n<li><strong>\u4f18\u96c5\u7684\u4ea4\u4e92\u4f53\u9a8c</strong>\uff1a\u5185\u7f6e\u6eda\u52a8\u6761\u7f8e\u5316\u3001\u52a0\u8f7d\u72b6\u6001\u652f\u6301\u3001\u5f02\u6b65\u64cd\u4f5c\u53cd\u9988</li>\n</ul>\n<p>\u9002\u7528\u4e8e\u7528\u6237\u8be6\u60c5\u67e5\u770b\u3001\u8868\u5355\u7f16\u8f91\u3001\u4fe1\u606f\u5c55\u793a\u3001\u64cd\u4f5c\u786e\u8ba4\u7b49\u591a\u79cd\u4e1a\u52a1\u573a\u666f\u3002</p>",api:'<h3>Drawer</h3>\n<p>\u5c4f\u5e55\u8fb9\u7f18\u6ed1\u51fa\u7684\u6d6e\u5c42\u9762\u677f\uff0c\u7528\u4e8e\u5c55\u793a\u8be6\u7ec6\u4fe1\u606f\u3001\u8868\u5355\u7f16\u8f91\u7b49\u573a\u666f\u3002</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>title</td>\n<td>\u62bd\u5c49\u6807\u9898</td>\n<td>ReactNode</td>\n<td>-</td>\n</tr>\n<tr>\n<td>size</td>\n<td>\u62bd\u5c49\u5c3a\u5bf8\uff0c\u53ef\u9009\u503c\uff1a<code>small</code>(600px)\u3001<code>default</code>(1000px)\u3001<code>large</code>(calc(100vw-64px))</td>\n<td>string</td>\n<td><code>small</code></td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u62bd\u5c49\u5185\u5bb9\uff0c\u53ef\u4ee5\u662f JSX \u6216\u51fd\u6570\uff0c\u51fd\u6570\u65f6\u53ef\u63a5\u6536 close \u65b9\u6cd5\u548c props</td>\n<td>ReactNode \| function</td>\n<td>-</td>\n</tr>\n<tr>\n<td>footer</td>\n<td>\u62bd\u5c49\u5e95\u90e8\u5185\u5bb9\uff0c\u8bbe\u4e3a null \u4e14 footerButtons \u672a\u8bbe\u7f6e\u65f6\u4e0d\u663e\u793a\u5e95\u90e8\uff0c\u51fd\u6570\u65f6\u53ef\u63a5\u6536 close \u65b9\u6cd5\u548c props</td>\n<td>ReactNode \| function</td>\n<td>-</td>\n</tr>\n<tr>\n<td>footerButtons</td>\n<td>\u5e95\u90e8\u6309\u94ae\u914d\u7f6e\u6570\u7ec4\uff0c\u9ed8\u8ba4\u663e\u793a"\u53d6\u6d88"\u548c"\u786e\u5b9a"\u6309\u94ae</td>\n<td>array</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onConfirm</td>\n<td>\u70b9\u51fb\u786e\u8ba4\u6309\u94ae\u89e6\u53d1\u7684\u56de\u8c03\uff0c\u8fd4\u56de Promise \u65f6\u6309\u94ae\u663e\u793a loading \u72b6\u6001\uff0c\u8fd4\u56de false \u65f6\u4e0d\u5173\u95ed\u62bd\u5c49</td>\n<td>function</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onCancel</td>\n<td>\u70b9\u51fb\u53d6\u6d88\u6309\u94ae\u89e6\u53d1\u7684\u56de\u8c03</td>\n<td>function</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onClose</td>\n<td>\u62bd\u5c49\u5173\u95ed\u65f6\u7684\u56de\u8c03</td>\n<td>function</td>\n<td>-</td>\n</tr>\n<tr>\n<td>closable</td>\n<td>\u662f\u5426\u663e\u793a\u5173\u95ed\u6309\u94ae</td>\n<td>boolean</td>\n<td>true</td>\n</tr>\n<tr>\n<td>maskClosable</td>\n<td>\u70b9\u51fb\u8499\u5c42\u662f\u5426\u5141\u8bb8\u5173\u95ed</td>\n<td>boolean</td>\n<td>false</td>\n</tr>\n<tr>\n<td>disabledScroller</td>\n<td>\u662f\u5426\u7981\u7528\u6eda\u52a8\u6761\u7f8e\u5316</td>\n<td>boolean</td>\n<td>false</td>\n</tr>\n<tr>\n<td>withDecorator</td>\n<td>\u62bd\u5c49\u5185\u5bb9\u4fee\u9970\u5668\uff0c\u53ef\u5728\u5185\u5bb9\u5916\u5c42\u6dfb\u52a0\u88c5\u9970</td>\n<td>function</td>\n<td>-</td>\n</tr>\n<tr>\n<td>open</td>\n<td>\u53d7\u63a7\u6a21\u5f0f\u4e0b\u62bd\u5c49\u7684\u663e\u793a\u72b6\u6001</td>\n<td>boolean</td>\n<td>-</td>\n</tr>\n<tr>\n<td>width</td>\n<td>\u81ea\u5b9a\u4e49\u62bd\u5c49\u5bbd\u5ea6</td>\n<td>string \| number</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<p><strong>\u6ce8\u610f</strong>\uff1a\u5176\u4ed6\u672a\u5217\u51fa\u7684\u5c5e\u6027\u53ef\u53c2\u8003 Ant Design Drawer \u7ec4\u4ef6</p>\n<h4>footerButtons \u6570\u7ec4\u9879\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>\u6309\u94ae\u6587\u5b57</td>\n<td>ReactNode</td>\n<td>-</td>\n</tr>\n<tr>\n<td>type</td>\n<td>\u6309\u94ae\u7c7b\u578b\uff0c\u53c2\u8003 Ant Design Button</td>\n<td>string</td>\n<td>-</td>\n</tr>\n<tr>\n<td>danger</td>\n<td>\u662f\u5426\u4e3a\u5371\u9669\u6309\u94ae</td>\n<td>boolean</td>\n<td>false</td>\n</tr>\n<tr>\n<td>ButtonComponent</td>\n<td>\u81ea\u5b9a\u4e49\u6309\u94ae\u7ec4\u4ef6</td>\n<td>Component</td>\n<td>LoadingButton</td>\n</tr>\n<tr>\n<td>onClick</td>\n<td>\u70b9\u51fb\u4e8b\u4ef6\u56de\u8c03</td>\n<td>function</td>\n<td>-</td>\n</tr>\n<tr>\n<td>autoClose</td>\n<td>\u70b9\u51fb\u540e\u662f\u5426\u81ea\u52a8\u5173\u95ed\u62bd\u5c49</td>\n<td>boolean</td>\n<td>true</td>\n</tr>\n<tr>\n<td>display</td>\n<td>\u662f\u5426\u663e\u793a\u8be5\u6309\u94ae</td>\n<td>boolean \| function</td>\n<td>true</td>\n</tr>\n</tbody>\n</table>\n<h3>useDrawer</h3>\n<p>\u7528\u4e8e\u83b7\u53d6\u4e00\u4e2a\u53ef\u4ee5\u8c03\u7528 Drawer \u7684 Hook \u51fd\u6570\uff0c\u914d\u5408 AppDrawer \u4f7f\u7528\u3002</p>\n<h4>\u8fd4\u56de\u503c</h4>\n<p>\u8fd4\u56de\u4e00\u4e2a\u6570\u7ec4\uff1a<code>[drawer, DrawerContextHolder]</code></p>\n<ul>\n<li>\n<p><strong>drawer</strong>: \u51fd\u6570\uff0c\u6267\u884c\u540e\u53ef\u6253\u5f00\u4e00\u4e2a Drawer\uff0c\u53c2\u6570\u540c Drawer \u7ec4\u4ef6\u5c5e\u6027</p>\n<ul>\n<li>\u8fd4\u56de\u5bf9\u8c61\u5305\u542b <code>destroy</code> \u65b9\u6cd5\u7528\u4e8e\u5173\u95ed Drawer</li>\n<li>\u8fd4\u56de\u5bf9\u8c61\u5305\u542b <code>update</code> \u65b9\u6cd5\u7528\u4e8e\u66f4\u65b0 Drawer \u914d\u7f6e</li>\n</ul>\n</li>\n<li>\n<p><strong>DrawerContextHolder</strong>: \u5fc5\u987b\u6e32\u67d3\u5728\u7ec4\u4ef6\u6811\u4e2d\uff0c\u7528\u4e8e\u627f\u8f7d Drawer \u5b9e\u4f8b</p>\n</li>\n</ul>\n<h3>DrawerButton</h3>\n<p>\u7ed3\u5408 FetchButton \u529f\u80fd\u7684\u6309\u94ae\u7ec4\u4ef6\uff0c\u70b9\u51fb\u540e\u52a0\u8f7d\u6570\u636e\uff0c\u52a0\u8f7d\u5b8c\u6210\u540e\u81ea\u52a8\u6253\u5f00 Drawer\u3002</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>api</td>\n<td>FetchButton \u7684 API \u914d\u7f6e\u5bf9\u8c61</td>\n<td><code>{ loader: Function }</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>modalProps</td>\n<td>Drawer \u5c5e\u6027\u914d\u7f6e\uff0c\u53ef\u4ee5\u662f\u5bf9\u8c61\u6216\u51fd\u6570</td>\n<td>object \| function({ data, fetchApi, close })</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onError</td>\n<td>\u6570\u636e\u52a0\u8f7d\u9519\u8bef\u56de\u8c03</td>\n<td>function</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<p><strong>\u6ce8\u610f</strong>\uff1a\u5176\u4ed6\u5c5e\u6027\u540c Ant Design Button \u7ec4\u4ef6</p>\n<h4>modalProps \u4e3a\u51fd\u6570\u65f6\u7684\u53c2\u6570\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u53c2\u6570\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>data</td>\n<td>\u52a0\u8f7d\u7684\u6570\u636e</td>\n<td>any</td>\n</tr>\n<tr>\n<td>fetchApi</td>\n<td>Fetch API \u5bf9\u8c61</td>\n<td>object</td>\n</tr>\n<tr>\n<td>close</td>\n<td>\u5173\u95ed Drawer \u7684\u65b9\u6cd5</td>\n<td>function</td>\n</tr>\n</tbody>\n</table>\n<h3>AppDrawer</h3>\n<p>\u5168\u5c40 Drawer \u63d0\u4f9b\u8005\u7ec4\u4ef6\uff0c\u4e3a\u5185\u90e8\u4f7f\u7528 useDrawer \u7684\u7ec4\u4ef6\u63d0\u4f9b\u4e0a\u4e0b\u6587\u73af\u5883\u3002</p>\n<h4>\u4f7f\u7528\u65b9\u5f0f</h4>\n<p>\u5728\u5e94\u7528\u6700\u5916\u5c42\u5305\u88f9 AppDrawer\uff0c\u5373\u53ef\u5728\u4efb\u610f\u7ec4\u4ef6\u4e2d\u4f7f\u7528 useDrawer\uff1a</p>\n<pre><code class="language-javascript">import { AppDrawer } from \'@components/Drawer\';\n\nfunction App() {\n return (\n <AppDrawer>\n <YourAppContent />\n </AppDrawer>\n );\n}\n</code></pre>',example:{isFull:!1,className:"",style:"",list:[{title:"\u57fa\u7840\u7528\u6cd5",description:"\u5c55\u793a Drawer \u7ec4\u4ef6\u7684\u4e09\u79cd\u4f7f\u7528\u65b9\u5f0f\uff1a\u53d7\u63a7\u7ec4\u4ef6\u3001Hook\u8c03\u7528\u3001\u6309\u94ae\u89e6\u53d1",code:'const { default: Drawer, useDrawer, DrawerButton } = _Drawer;\nconst { Button, Space, Typography, Descriptions, Avatar, Tag } = _antd;\nconst { useState } = React;\nconst {default: Global} = _Global;\n\nconst BasicExample = () => {\n const [open, setOpen] = useState(false);\n const drawer = useDrawer();\n\n return (\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Typography.Text strong>\u65b9\u5f0f\u4e00\uff1a\u53d7\u63a7\u7ec4\u4ef6</Typography.Text>\n <Button type="primary" onClick={() => setOpen(true)}>\n \u6253\u5f00\u8be6\u60c5\u62bd\u5c49\n </Button>\n <Drawer\n title="\u7528\u6237\u4fe1\u606f"\n open={open}\n onClose={() => setOpen(false)}\n width={600}\n >\n <Descriptions column={1} bordered>\n <Descriptions.Item label="\u59d3\u540d">\u5f20\u4e09</Descriptions.Item>\n <Descriptions.Item label="\u90e8\u95e8">\u6280\u672f\u90e8</Descriptions.Item>\n <Descriptions.Item label="\u804c\u4f4d">\u9ad8\u7ea7\u524d\u7aef\u5de5\u7a0b\u5e08</Descriptions.Item>\n <Descriptions.Item label="\u90ae\u7bb1">zhangsan@example.com</Descriptions.Item>\n </Descriptions>\n </Drawer>\n\n <Typography.Text strong>\u65b9\u5f0f\u4e8c\uff1aHook\u8c03\u7528</Typography.Text>\n <Button\n onClick={() => {\n drawer({\n title: "\u9879\u76ee\u4fe1\u606f",\n children: (\n <div>\n <Typography.Paragraph>\u9879\u76ee\u540d\u79f0\uff1a\u7535\u5546\u5e73\u53f0</Typography.Paragraph>\n <Typography.Paragraph>\u9879\u76ee\u8d1f\u8d23\u4eba\uff1a\u674e\u56db</Typography.Paragraph>\n <Typography.Paragraph>\u5f00\u53d1\u5468\u671f\uff1a6\u4e2a\u6708</Typography.Paragraph>\n <Typography.Paragraph>\u56e2\u961f\u6210\u5458\uff1a12\u4eba</Typography.Paragraph>\n </div>\n ),\n });\n }}\n >\n \u4f7f\u7528Hook\u6253\u5f00\n </Button>\n </Space>\n );\n};\n\nrender(<Global><BasicExample /></Global>);\n\n',scope:[{name:"_Drawer",packageName:"@components/Drawer",component:a},{name:"_Global",packageName:"@components/Global",component:d},{name:"_antd",packageName:"antd",component:o}]},{title:"\u7528\u6237\u8be6\u60c5",description:"\u4f7f\u7528 DrawerButton \u52a0\u8f7d\u6570\u636e\u540e\u5c55\u793a\u7528\u6237\u8be6\u7ec6\u4fe1\u606f\uff0c\u6a21\u62df\u771f\u5b9e\u4e1a\u52a1\u573a\u666f",code:'const { DrawerButton } = _Drawer;\nconst { Card, Avatar, Typography, Tag, Space, Divider, Descriptions, Timeline } = _antd;\nconst { range } = lodash;\nconst {default: Global} = _Global;\n\nconst UserDetailExample = () => {\n const mockUserData = {\n id: 1,\n name: "\u5f20\u4e09",\n avatar: { src: "https://api.dicebear.com/7.x/avataaars/svg?seed=zhang" },\n role: "\u9ad8\u7ea7\u524d\u7aef\u5de5\u7a0b\u5e08",\n department: "\u6280\u672f\u90e8-\u524d\u7aef\u7ec4",\n email: "zhangsan@company.com",\n phone: "138***8888",\n joinDate: "2020-03-15",\n skills: ["React", "Vue", "TypeScript", "Node.js"],\n projects: [\n { name: "\u7535\u5546\u5e73\u53f0\u91cd\u6784", role: "\u8d1f\u8d23\u4eba", status: "\u8fdb\u884c\u4e2d", date: "2024-01" },\n { name: "OA\u7cfb\u7edf\u5f00\u53d1", role: "\u6838\u5fc3\u5f00\u53d1", status: "\u5df2\u5b8c\u6210", date: "2023-08" },\n { name: "\u6570\u636e\u5927\u5c4f", role: "\u53c2\u4e0e", status: "\u5df2\u5b8c\u6210", date: "2023-03" },\n ],\n performance: [\n { quarter: "2024 Q1", score: 95, comment: "\u5de5\u4f5c\u8868\u73b0\u4f18\u5f02\uff0c\u9879\u76ee\u4ea4\u4ed8\u53ca\u65f6" },\n { quarter: "2023 Q4", score: 92, comment: "\u6280\u672f\u80fd\u529b\u5f3a\uff0c\u56e2\u961f\u534f\u4f5c\u597d" },\n { quarter: "2023 Q3", score: 88, comment: "\u7a33\u6b65\u63d0\u5347\uff0c\u5efa\u8bae\u52a0\u5f3a\u6587\u6863\u80fd\u529b" },\n ],\n };\n\n return (\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <DrawerButton\n type="primary"\n api={{\n loader: () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(mockUserData);\n }, 800);\n });\n },\n }}\n modalProps={(contextProps) => {\n const { data } = contextProps;\n return {\n title: "\u5458\u5de5\u6863\u6848\u8be6\u60c5",\n size: "large",\n children: (\n <div>\n <Card style={{ marginBottom: 16 }}>\n <Space align="start" size="large">\n <Avatar size={80} src={data.avatar.src} />\n <Space direction="vertical" size={4}>\n <Typography.Title level={4} style={{ margin: 0 }}>\n {data.name}\n </Typography.Title>\n <Space>\n <Tag color="blue">{data.role}</Tag>\n <Tag color="green">{data.department}</Tag>\n </Space>\n <Typography.Text type="secondary">\n \u5165\u804c\u65f6\u95f4\uff1a{data.joinDate}\n </Typography.Text>\n </Space>\n </Space>\n </Card>\n\n <Descriptions title="\u57fa\u672c\u4fe1\u606f" column={2} bordered style={{ marginBottom: 16 }}>\n <Descriptions.Item label="\u5de5\u53f7">EMP{String(data.id).padStart(4, \'0\')}</Descriptions.Item>\n <Descriptions.Item label="\u59d3\u540d">{data.name}</Descriptions.Item>\n <Descriptions.Item label="\u90e8\u95e8">{data.department}</Descriptions.Item>\n <Descriptions.Item label="\u804c\u4f4d">{data.role}</Descriptions.Item>\n <Descriptions.Item label="\u90ae\u7bb1">{data.email}</Descriptions.Item>\n <Descriptions.Item label="\u7535\u8bdd">{data.phone}</Descriptions.Item>\n </Descriptions>\n\n <Typography.Title level={5}>\u6280\u672f\u6808</Typography.Title>\n <Space wrap style={{ marginBottom: 16 }}>\n {data.skills.map((skill) => (\n <Tag key={skill} color="processing">{skill}</Tag>\n ))}\n </Space>\n\n <Typography.Title level={5}>\u9879\u76ee\u7ecf\u5386</Typography.Title>\n <Card size="small" style={{ marginBottom: 16 }}>\n {data.projects.map((project, index) => (\n <div key={index}>\n <Space>\n <Typography.Text strong>{project.name}</Typography.Text>\n <Tag color={project.status === "\u8fdb\u884c\u4e2d" ? "processing" : "success"}>\n {project.status}\n </Tag>\n </Space>\n <Typography.Text type="secondary" style={{ marginLeft: 16 }}>\n {project.role} \xb7 {project.date}\n </Typography.Text>\n {index < data.projects.length - 1 && <Divider style={{ margin: "8px 0" }} />}\n </div>\n ))}\n </Card>\n\n <Typography.Title level={5}>\u7ee9\u6548\u8003\u6838</Typography.Title>\n <Timeline\n items={data.performance.map((item) => ({\n children: (\n <Space direction="vertical" size={2}>\n <Space>\n <Typography.Text strong>{item.quarter}</Typography.Text>\n <Tag color={item.score >= 90 ? "success" : "warning"}>\n {item.score}\u5206\n </Tag>\n </Space>\n <Typography.Text type="secondary">{item.comment}</Typography.Text>\n </Space>\n ),\n }))}\n />\n </div>\n ),\n };\n }}\n >\n \u67e5\u770b\u5458\u5de5\u6863\u6848\n </DrawerButton>\n </Space>\n );\n};\n\nrender(<Global><UserDetailExample /></Global>);\n\n',scope:[{name:"_Drawer",packageName:"@components/Drawer",component:a},{name:"_Global",packageName:"@components/Global",component:d},{name:"_antd",packageName:"antd",component:o},{name:"lodash",packageName:"lodash",component:r}]},{title:"\u8868\u5355\u7f16\u8f91",description:"\u5728 Drawer \u4e2d\u5c55\u793a\u8868\u5355\u8fdb\u884c\u7f16\u8f91\uff0c\u652f\u6301\u786e\u8ba4\u548c\u53d6\u6d88\u64cd\u4f5c",code:'const {useFormDrawer, FormDrawerButton, default: FormInfo} = _FormInfo;\nconst {Button, Space, Typography, message, Divider} = _antd;\nconst {default: Global} = _Global;\n\nconst FormDrawerExample = () => {\n const formDrawer = useFormDrawer();\n const {Form} = FormInfo;\n const {Input} = FormInfo.fields;\n\n const handleEdit = (userData) => {\n formDrawer({\n title: "\u7f16\u8f91\u5458\u5de5\u4fe1\u606f", size: "small", formProps: {\n data: userData, onSubmit: async (data) => {\n await new Promise((resolve) => setTimeout(resolve, 1000));\n message.success(`\u5df2\u66f4\u65b0\u5458\u5de5\u4fe1\u606f\uff1a${data.name}`);\n }\n }, children: (<FormInfo\n column={1}\n list={[<Input\n name="name"\n label="\u59d3\u540d"\n rule="REQ"\n tips="\u8bf7\u8f93\u5165\u5458\u5de5\u59d3\u540d"\n />, <Input\n name="department"\n label="\u90e8\u95e8"\n rule="REQ"\n options={[{label: "\u6280\u672f\u90e8", value: "tech"}, {\n label: "\u4ea7\u54c1\u90e8",\n value: "product"\n }, {label: "\u8bbe\u8ba1\u90e8", value: "design"}, {label: "\u5e02\u573a\u90e8", value: "marketing"}]}\n single\n tips="\u8bf7\u9009\u62e9\u6240\u5c5e\u90e8\u95e8"\n />, <Input\n name="position"\n label="\u804c\u4f4d"\n rule="REQ"\n tips="\u8bf7\u8f93\u5165\u804c\u4f4d\u540d\u79f0"\n />, <Input\n name="email"\n label="\u90ae\u7bb1"\n rule="REQ EMAIL"\n tips="\u8bf7\u8f93\u5165\u6709\u6548\u7684\u90ae\u7bb1\u5730\u5740"\n />, <Input\n name="phone"\n label="\u7535\u8bdd"\n rule="REQ TEL"\n tips="\u8bf7\u8f93\u5165\u6709\u6548\u7684\u624b\u673a\u53f7\u7801"\n />]}\n />)\n });\n };\n\n return (<Space direction="vertical" style={{width: \'100%\'}}>\n <Typography.Text strong>\u4f7f\u7528 useFormDrawer \u7f16\u8f91\u5458\u5de5\u4fe1\u606f</Typography.Text>\n <Typography.Text type="secondary" style={{fontSize: 12}}>\n FormDrawer \u7ed3\u5408\u4e86 Drawer \u548c FormInfo \u7684\u529f\u80fd\uff0c\u63d0\u4f9b\u4e86\u66f4\u4fbf\u6377\u7684\u8868\u5355\u62bd\u5c49\u4f53\u9a8c\uff0c\u652f\u6301\u6821\u9a8c\u89c4\u5219\u548c\u81ea\u52a8\u6570\u636e\u52a0\u8f7d\n </Typography.Text>\n\n <Divider/>\n\n <Button\n type="primary"\n onClick={() => {\n handleEdit({\n name: "\u5f20\u4e09",\n department: "tech",\n position: "\u9ad8\u7ea7\u524d\u7aef\u5de5\u7a0b\u5e08",\n email: "zhangsan@example.com",\n phone: "13888888888",\n });\n }}\n >\n \u7f16\u8f91\u5458\u5de5\u4fe1\u606f\n </Button>\n <Button\n onClick={() => {\n handleEdit({\n name: "\u674e\u56db",\n department: "product",\n position: "\u4ea7\u54c1\u7ecf\u7406",\n email: "lisi@example.com",\n phone: "13999999999",\n });\n }}\n >\n \u7f16\u8f91\u53e6\u4e00\u4f4d\u5458\u5de5\n </Button>\n </Space>);\n};\n\nrender(<Global><FormDrawerExample/></Global>);\n\n',scope:[{name:"_Drawer",packageName:"@components/Drawer",component:a},{name:"_FormInfo",packageName:"@components/FormInfo",component:e(96252)},{name:"_Global",packageName:"@components/Global",component:d},{name:"_antd",packageName:"antd",component:o}]},{title:"\u4e0d\u540c\u5c3a\u5bf8",description:"\u5c55\u793a small\u3001default\u3001large \u4e09\u79cd\u4e0d\u540c\u5c3a\u5bf8\u7684 Drawer",code:'const { useDrawer } = _Drawer;\nconst { Button, Space, Typography, Descriptions, Timeline, Card } = _antd;\nconst {default: Global} = _Global;\n\nconst SizesExample = () => {\n const drawer = useDrawer();\n\n const content1 = (\n <Descriptions column={1} bordered>\n <Descriptions.Item label="\u9879\u76ee\u540d\u79f0">OA\u7cfb\u7edf</Descriptions.Item>\n <Descriptions.Item label="\u8d1f\u8d23\u4eba">\u5f20\u4e09</Descriptions.Item>\n <Descriptions.Item label="\u5f00\u59cb\u65f6\u95f4">2024-01-01</Descriptions.Item>\n <Descriptions.Item label="\u72b6\u6001">\u8fdb\u884c\u4e2d</Descriptions.Item>\n <Descriptions.Item label="\u8fdb\u5ea6">60%</Descriptions.Item>\n </Descriptions>\n );\n\n const content2 = (\n <div>\n <Typography.Paragraph>\n <strong>\u9879\u76ee\u6982\u8ff0\uff1a</strong>\n \u8fd9\u662f\u4e00\u4e2a\u4f01\u4e1a\u529e\u516c\u81ea\u52a8\u5316\u7cfb\u7edf\uff0c\u63d0\u4f9b\u5305\u62ec\u5ba1\u6279\u6d41\u7a0b\u3001\u65e5\u7a0b\u7ba1\u7406\u3001\u6587\u6863\u534f\u4f5c\u7b49\u529f\u80fd\u3002\n </Typography.Paragraph>\n <Descriptions column={2} bordered style={{ marginTop: 16 }}>\n <Descriptions.Item label="\u9879\u76ee\u7ecf\u7406">\u674e\u56db</Descriptions.Item>\n <Descriptions.Item label="\u6280\u672f\u8d1f\u8d23\u4eba">\u738b\u4e94</Descriptions.Item>\n <Descriptions.Item label="\u5f00\u53d1\u5468\u671f">6\u4e2a\u6708</Descriptions.Item>\n <Descriptions.Item label="\u56e2\u961f\u89c4\u6a21">12\u4eba</Descriptions.Item>\n <Descriptions.Item label="\u9884\u7b97">50\u4e07</Descriptions.Item>\n <Descriptions.Item label="\u622a\u6b62\u65f6\u95f4">2024-06-30</Descriptions.Item>\n </Descriptions>\n <Typography.Title level={5} style={{ marginTop: 24 }}>\n \u9879\u76ee\u91cc\u7a0b\u7891\n </Typography.Title>\n <Timeline\n items={[\n {\n children: "\u9700\u6c42\u5206\u6790\u4e0e\u8bbe\u8ba1\u5b8c\u6210",\n color: "green",\n },\n {\n children: "\u524d\u7aef\u6846\u67b6\u642d\u5efa\u5b8c\u6210",\n color: "green",\n },\n {\n children: "\u540e\u7aef\u63a5\u53e3\u5f00\u53d1\u8fdb\u884c\u4e2d",\n color: "blue",\n },\n {\n children: "\u7cfb\u7edf\u8054\u8c03\u6d4b\u8bd5",\n color: "gray",\n },\n {\n children: "\u4e0a\u7ebf\u90e8\u7f72",\n color: "gray",\n },\n ]}\n />\n </div>\n );\n\n const content3 = (\n <div>\n <Card title="\u9879\u76ee\u57fa\u672c\u4fe1\u606f" style={{ marginBottom: 16 }}>\n <Descriptions column={3} bordered>\n <Descriptions.Item label="\u9879\u76ee\u540d\u79f0">\u7535\u5546\u5e73\u53f0\u91cd\u6784</Descriptions.Item>\n <Descriptions.Item label="\u9879\u76ee\u7f16\u53f7">PRJ-2024-001</Descriptions.Item>\n <Descriptions.Item label="\u9879\u76ee\u7c7b\u578b">\u91cd\u6784\u5347\u7ea7</Descriptions.Item>\n <Descriptions.Item label="\u8d1f\u8d23\u4eba">\u8d75\u516d</Descriptions.Item>\n <Descriptions.Item label="\u5f00\u53d1\u56e2\u961f">\u6280\u672f\u90e8</Descriptions.Item>\n <Descriptions.Item label="\u4f18\u5148\u7ea7">P0</Descriptions.Item>\n </Descriptions>\n </Card>\n\n <Card title="\u56e2\u961f\u6210\u5458" style={{ marginBottom: 16 }}>\n <Space direction="vertical" style={{ width: \'100%\' }}>\n {[\n { name: "\u5f20\u4e09", role: "\u6280\u672f\u8d1f\u8d23\u4eba", count: 8 },\n { name: "\u674e\u56db", role: "\u524d\u7aef\u7ec4\u957f", count: 12 },\n { name: "\u738b\u4e94", role: "\u540e\u7aef\u7ec4\u957f", count: 15 },\n { name: "\u8d75\u516d", role: "\u6d4b\u8bd5\u8d1f\u8d23\u4eba", count: 6 },\n { name: "\u94b1\u4e03", role: "UI\u8bbe\u8ba1\u5e08", count: 3 },\n ].map((member) => (\n <div key={member.name} style={{ display: \'flex\', justifyContent: \'space-between\', padding: \'8px 0\', borderBottom: \'1px solid #f0f0f0\' }}>\n <span><strong>{member.name}</strong> - {member.role}</span>\n <span>{member.count} \u4eba</span>\n </div>\n ))}\n </Space>\n </Card>\n\n <Card title="\u6280\u672f\u67b6\u6784">\n <Space wrap>\n {["React", "TypeScript", "Next.js", "Node.js", "PostgreSQL", "Redis", "Docker", "Kubernetes"].map((tech) => (\n <span key={tech} style={{ padding: \'4px 12px\', background: \'#e6f7ff\', borderRadius: \'4px\', color: \'#1890ff\' }}>\n {tech}\n </span>\n ))}\n </Space>\n </Card>\n\n <Card title="\u5f00\u53d1\u8ba1\u5212" style={{ marginTop: 16 }}>\n <Timeline\n items={[\n {\n children: <><strong>\u7b2c\u4e00\u9636\u6bb5\uff081-2\u6708\uff09\uff1a</strong>\u6280\u672f\u8c03\u7814\u4e0e\u67b6\u6784\u8bbe\u8ba1</>,\n color: "green",\n },\n {\n children: <><strong>\u7b2c\u4e8c\u9636\u6bb5\uff083-4\u6708\uff09\uff1a</strong>\u6838\u5fc3\u529f\u80fd\u5f00\u53d1</>,\n color: "green",\n },\n {\n children: <><strong>\u7b2c\u4e09\u9636\u6bb5\uff085\u6708\uff09\uff1a</strong>\u8054\u8c03\u6d4b\u8bd5\u4e0e\u4f18\u5316</>,\n color: "blue",\n },\n {\n children: <><strong>\u7b2c\u56db\u9636\u6bb5\uff086\u6708\uff09\uff1a</strong>\u7070\u5ea6\u53d1\u5e03\u4e0e\u4e0a\u7ebf</>,\n color: "gray",\n },\n ]}\n />\n </Card>\n </div>\n );\n\n return (\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Typography.Text strong>\u9009\u62e9\u4e0d\u540c\u5c3a\u5bf8\u7684\u62bd\u5c49</Typography.Text>\n <Button\n onClick={() => {\n drawer({\n title: "Small \u5c3a\u5bf8",\n size: "small",\n children: content1,\n });\n }}\n >\n Small (600px)\n </Button>\n <Button\n onClick={() => {\n drawer({\n title: "Default \u5c3a\u5bf8",\n size: "default",\n children: content2,\n });\n }}\n >\n Default (1000px)\n </Button>\n <Button\n onClick={() => {\n drawer({\n title: "Large \u5c3a\u5bf8",\n size: "large",\n children: content3,\n });\n }}\n >\n Large (\u5168\u5c4f-64px)\n </Button>\n </Space>\n );\n};\n\nrender(<Global><SizesExample /></Global>);\n\n',scope:[{name:"_Drawer",packageName:"@components/Drawer",component:a},{name:"_Global",packageName:"@components/Global",component:d},{name:"_antd",packageName:"antd",component:o}]},{title:"\u81ea\u5b9a\u4e49\u64cd\u4f5c",description:"\u81ea\u5b9a\u4e49\u5e95\u90e8\u6309\u94ae\u3001\u6dfb\u52a0\u989d\u5916\u529f\u80fd\u6309\u94ae\uff0c\u652f\u6301\u5f02\u6b65\u64cd\u4f5c",code:'const { useDrawer, DrawerButton } = _Drawer;\nconst { Button, Space, Typography, message, Popconfirm, Tag, Descriptions } = _antd;\nconst {default: Global} = _Global;\n\nconst CustomActionsExample = () => {\n const drawer = useDrawer();\n\n return (\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Typography.Text strong>\u81ea\u5b9a\u4e49\u5e95\u90e8\u6309\u94ae\u548c\u989d\u5916\u64cd\u4f5c</Typography.Text>\n\n <Button\n onClick={() => {\n drawer({\n title: "\u81ea\u5b9a\u4e49\u6309\u94ae",\n size: "small",\n children: (\n <div>\n <Typography.Paragraph>\u8fd9\u4e2a\u793a\u4f8b\u5c55\u793a\u4e86\u5982\u4f55\u81ea\u5b9a\u4e49\u5e95\u90e8\u6309\u94ae\u3002</Typography.Paragraph>\n <Typography.Paragraph>\u81ea\u5b9a\u4e49\u4e86\u4e09\u4e2a\u6309\u94ae\uff1a\u9884\u89c8\u3001\u53d6\u6d88\u3001\u4fdd\u5b58\u3002</Typography.Paragraph>\n </div>\n ),\n footerButtons: [\n {\n children: "\u9884\u89c8",\n onClick: () => {\n message.info("\u9884\u89c8\u529f\u80fd");\n },\n },\n {\n children: "\u53d6\u6d88",\n onClick: () => {\n message.info("\u5df2\u53d6\u6d88");\n },\n },\n {\n type: "primary",\n children: "\u4fdd\u5b58",\n onClick: async () => {\n await new Promise((resolve) => setTimeout(resolve, 1000));\n message.success("\u4fdd\u5b58\u6210\u529f\uff01");\n return true;\n },\n },\n ],\n });\n }}\n >\n \u81ea\u5b9a\u4e49\u6309\u94ae\u793a\u4f8b\n </Button>\n\n <DrawerButton\n api={{\n loader: () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n id: 1,\n name: "\u5f20\u4e09",\n role: "\u9ad8\u7ea7\u524d\u7aef\u5de5\u7a0b\u5e08",\n department: "\u6280\u672f\u90e8",\n status: "\u5728\u804c",\n joinDate: "2020-03-15",\n });\n }, 500);\n });\n },\n }}\n modalProps={(contextProps) => {\n const { data } = contextProps;\n return {\n title: "\u5458\u5de5\u6863\u6848\u64cd\u4f5c",\n size: "small",\n children: (\n <Descriptions column={1} bordered>\n <Descriptions.Item label="\u59d3\u540d">{data.name}</Descriptions.Item>\n <Descriptions.Item label="\u804c\u4f4d">{data.role}</Descriptions.Item>\n <Descriptions.Item label="\u90e8\u95e8">{data.department}</Descriptions.Item>\n <Descriptions.Item label="\u72b6\u6001">\n <Tag color="green">{data.status}</Tag>\n </Descriptions.Item>\n <Descriptions.Item label="\u5165\u804c\u65f6\u95f4">{data.joinDate}</Descriptions.Item>\n </Descriptions>\n ),\n footerButtons: [\n {\n children: "\u67e5\u770b\u8be6\u60c5",\n onClick: () => {\n message.info("\u67e5\u770b\u66f4\u591a\u8be6\u60c5");\n },\n },\n {\n children: "\u5bfc\u51fa\u6863\u6848",\n onClick: () => {\n message.info("\u6b63\u5728\u5bfc\u51fa\u6863\u6848...");\n },\n },\n {\n children: "\u7f16\u8f91",\n type: "default",\n onClick: () => {\n message.info("\u6253\u5f00\u7f16\u8f91\u6a21\u5f0f");\n },\n },\n {\n type: "primary",\n children: "\u786e\u8ba4",\n onClick: async () => {\n await new Promise((resolve) => setTimeout(resolve, 1000));\n message.success("\u64cd\u4f5c\u6210\u529f\uff01");\n return true;\n },\n },\n ],\n };\n }}\n >\n \u52a0\u8f7d\u6570\u636e\u5e76\u81ea\u5b9a\u4e49\u64cd\u4f5c\n </DrawerButton>\n\n <Button\n danger\n onClick={() => {\n drawer({\n title: "\u5220\u9664\u786e\u8ba4",\n size: "small",\n children: (\n <div>\n <Typography.Paragraph>\n <Typography.Text type="warning">\u26a0\ufe0f \u8b66\u544a\uff1a</Typography.Text>\n \u6b64\u64cd\u4f5c\u5c06\u6c38\u4e45\u5220\u9664\u8be5\u5458\u5de5\u6863\u6848\uff0c\u5220\u9664\u540e\u65e0\u6cd5\u6062\u590d\u3002\n </Typography.Paragraph>\n <Typography.Paragraph>\u662f\u5426\u7ee7\u7eed\u5220\u9664\uff1f</Typography.Paragraph>\n </div>\n ),\n footerButtons: [\n {\n children: "\u53d6\u6d88",\n onClick: () => {\n message.info("\u5df2\u53d6\u6d88\u5220\u9664");\n },\n },\n {\n danger: true,\n type: "primary",\n children: "\u786e\u8ba4\u5220\u9664",\n onClick: async () => {\n await new Promise((resolve) => setTimeout(resolve, 1000));\n message.success("\u5df2\u5220\u9664\u5458\u5de5\u6863\u6848");\n return true;\n },\n },\n ],\n });\n }}\n >\n \u5371\u9669\u64cd\u4f5c\u793a\u4f8b\n </Button>\n </Space>\n );\n};\n\nrender(<Global><CustomActionsExample /></Global>);\n\n',scope:[{name:"_Drawer",packageName:"@components/Drawer",component:a},{name:"_Global",packageName:"@components/Global",component:d},{name:"_antd",packageName:"antd",component:o}]}]}}},73650(n,t,e){e.d(t,{A:()=>r});var a=e(98919),d=e(55199),o=e(13050);const r={name:"react-enum",summary:"<p>\u679a\u4e3e\u503c\u7ba1\u7406\u548c\u5c55\u793a\u7ec4\u4ef6\uff0c\u7528\u4e8e\u7edf\u4e00\u7ba1\u7406\u5e94\u7528\u4e2d\u7684\u679a\u4e3e\u6570\u636e\uff0c\u5982\u6027\u522b\u3001\u72b6\u6001\u3001\u7c7b\u578b\u7b49\u9009\u9879\u5217\u8868\u3002</p>\n<h2>\u4f55\u65f6\u4f7f\u7528</h2>\n<ul>\n<li>\u9700\u8981\u5c55\u793a\u679a\u4e3e\u503c\u7684\u63cf\u8ff0\u6587\u672c\u65f6</li>\n<li>\u9700\u8981\u5c06\u679a\u4e3e\u5217\u8868\u6e32\u67d3\u4e3a\u4e0b\u62c9\u6846\u3001\u5355\u9009\u6846\u7b49\u8868\u5355\u7ec4\u4ef6\u65f6</li>\n<li>\u9700\u8981\u7edf\u4e00\u7ba1\u7406\u5e94\u7528\u4e2d\u7684\u679a\u4e3e\u6570\u636e\u65f6</li>\n<li>\u9700\u8981\u652f\u6301\u591a\u8bed\u8a00\u7684\u679a\u4e3e\u63cf\u8ff0\u65f6</li>\n</ul>\n<h2>\u7279\u6027</h2>\n<ul>\n<li>\ud83d\udce6 \u7edf\u4e00\u7684\u679a\u4e3e\u6570\u636e\u7ba1\u7406</li>\n<li>\ud83d\udd04 \u652f\u6301\u540c\u6b65/\u5f02\u6b65\u52a0\u8f7d</li>\n<li>\ud83d\udce1 \u5185\u7f6eLRU\u7f13\u5b58\u673a\u5236</li>\n<li>\ud83c\udf0d \u652f\u6301\u591a\u8bed\u8a00</li>\n<li>\ud83c\udfa8 \u591a\u79cd\u683c\u5f0f\u5316\u65b9\u5f0f</li>\n<li>\ud83d\udd27 \u7075\u6d3b\u7684\u6e32\u67d3\u51fd\u6570</li>\n</ul>",api:"<h2>Enum \u7ec4\u4ef6 API</h2>\n<h3>Enum\uff08\u9ed8\u8ba4\u5bfc\u51fa\uff09</h3>\n<p>\u7528\u4e8e\u83b7\u53d6\u5355\u4e2a\u6216\u591a\u4e2a\u679a\u4e3e\u503c\u7684\u5c55\u793a\u5185\u5bb9\u3002</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>moduleName</td>\n<td>\u679a\u4e3e\u6a21\u5757\u540d\u79f0\uff0c\u5bf9\u5e94\u9884\u8bbe\u4e2d\u914d\u7f6e\u7684\u679a\u4e3e\u540d\u79f0</td>\n<td>string \| string[]</td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>\u679a\u4e3e\u503c\uff0c\u5f53\u63d0\u4f9b\u65f6\u83b7\u53d6\u5355\u4e2a\u679a\u4e3e\u9879\uff1b\u4e0d\u63d0\u4f9b\u65f6\u83b7\u53d6\u6574\u4e2a\u679a\u4e3e\u5217\u8868</td>\n<td>string \| number</td>\n<td>-</td>\n</tr>\n<tr>\n<td>format</td>\n<td>\u683c\u5f0f\u5316\u65b9\u5f0f\uff1a'default'\u8fd4\u56de\u63cf\u8ff0\u6587\u672c\uff0c'origin'\u8fd4\u56de\u539f\u59cb\u5bf9\u8c61\uff0c'option'\u8fd4\u56de{label, value}\u683c\u5f0f</td>\n<td>'default' \| 'origin' \| 'option'</td>\n<td>'default'</td>\n</tr>\n<tr>\n<td>force</td>\n<td>\u662f\u5426\u5f3a\u5236\u5237\u65b0\u7f13\u5b58\uff0c\u8df3\u8fc7\u7f13\u5b58\u76f4\u63a5\u8bf7\u6c42</td>\n<td>boolean</td>\n<td>false</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u5b50\u5143\u7d20\u6216\u6e32\u67d3\u51fd\u6570\u3002\u51fd\u6570\u63a5\u6536(data, fetchApi)\u53c2\u6570</td>\n<td>ReactNode \| Function</td>\n<td>-</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>\u6570\u636e\u52a0\u8f7d\u4e2d\u65f6\u7684\u5360\u4f4d\u5185\u5bb9</td>\n<td>ReactNode</td>\n<td>'--'</td>\n</tr>\n<tr>\n<td>error</td>\n<td>\u52a0\u8f7d\u5931\u8d25\u65f6\u7684\u5c55\u793a\u5185\u5bb9</td>\n<td>ReactNode \| Function</td>\n<td>-</td>\n</tr>\n<tr>\n<td>loading</td>\n<td>\u81ea\u5b9a\u4e49\u52a0\u8f7d\u4e2d\u72b6\u6001\u7684\u5c55\u793a</td>\n<td>ReactNode</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>EnumResource</h3>\n<p>\u7528\u4e8e\u83b7\u53d6\u5b8c\u6574\u7684\u679a\u4e3e\u5217\u8868\u8d44\u6e90\u3002</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>moduleName</td>\n<td>\u679a\u4e3e\u6a21\u5757\u540d\u79f0\uff0c\u652f\u6301\u6570\u7ec4\u4ee5\u540c\u65f6\u83b7\u53d6\u591a\u4e2a\u679a\u4e3e</td>\n<td>string \| string[]</td>\n<td>-</td>\n</tr>\n<tr>\n<td>format</td>\n<td>\u683c\u5f0f\u5316\u65b9\u5f0f</td>\n<td>'origin' \| 'option' \| 'default'</td>\n<td>'origin'</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u6e32\u67d3\u51fd\u6570\uff0c\u63a5\u6536\u679a\u4e3e\u5217\u8868\u4f5c\u4e3a\u53c2\u6570</td>\n<td>Function</td>\n<td>-</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>\u6570\u636e\u52a0\u8f7d\u4e2d\u65f6\u7684\u5360\u4f4d\u5185\u5bb9</td>\n<td>ReactNode</td>\n<td>'--'</td>\n</tr>\n<tr>\n<td>error</td>\n<td>\u52a0\u8f7d\u5931\u8d25\u65f6\u7684\u5c55\u793a\u5185\u5bb9</td>\n<td>ReactNode \| Function</td>\n<td>-</td>\n</tr>\n<tr>\n<td>loading</td>\n<td>\u81ea\u5b9a\u4e49\u52a0\u8f7d\u4e2d\u72b6\u6001\u7684\u5c55\u793a</td>\n<td>ReactNode</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>\u679a\u4e3e\u914d\u7f6e</h3>\n<p>\u679a\u4e3e\u6570\u636e\u901a\u8fc7 <code>preset</code> \u51fd\u6570\u6216 <code>PureGlobal/Global</code> \u7ec4\u4ef6\u7684 <code>preset.enums</code> \u914d\u7f6e\uff1a</p>\n<pre><code class=\"language-javascript\">// \u5168\u5c40\u914d\u7f6e\npreset({\n base: {\n gender: () => [\n { value: 'M', description: '\u7537' },\n { value: 'F', description: '\u5973' }\n ]\n }\n});\n\n// \u6216\u901a\u8fc7 Global \u7ec4\u4ef6\u914d\u7f6e\n<PureGlobal preset={{\n enums: {\n status: async ({ language }) => {\n // \u652f\u6301\u5f02\u6b65\u52a0\u8f7d\n return [\n { value: '1', description: '\u542f\u7528' },\n { value: '0', description: '\u7981\u7528' }\n ];\n }\n }\n}}>\n</code></pre>\n<h3>\u679a\u4e3e\u9879\u6570\u636e\u7ed3\u6784</h3>\n<table>\n<thead>\n<tr>\n<th>\u5b57\u6bb5\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>\u679a\u4e3e\u503c</td>\n<td>string \| number</td>\n<td>\u662f</td>\n</tr>\n<tr>\n<td>description</td>\n<td>\u679a\u4e3e\u63cf\u8ff0\u6587\u672c</td>\n<td>string</td>\n<td>\u662f</td>\n</tr>\n<tr>\n<td>translation</td>\n<td>\u591a\u8bed\u8a00\u7ffb\u8bd1\u5bf9\u8c61</td>\n<td>object</td>\n<td>\u5426</td>\n</tr>\n</tbody>\n</table>",example:{isFull:!1,className:"",style:"",list:[{title:"EnumLegacy",description:"\u517c\u5bb9\u8001\u7248\u672cEnum\u7684API",code:"const { default: Enum, preset } = _ReactEnum;\nconst { createWithRemoteLoader } = remoteLoader;\nconst { Divider } = antd;\n\npreset({\n base: {\n confirm: () => [{ description: '\u662f', value: 'Y' }, {\n description: '\u5426', value: 'N'\n }]\n }\n});\n\nconst BaseExample = createWithRemoteLoader({\n modules: ['components-core:Global@PureGlobal']\n})(({ remoteModules }) => {\n const [PureGlobal] = remoteModules;\n return <PureGlobal preset={{\n enums: {\n gender: [{ value: 'M', description: '\u7537' }, {\n value: 'F', description: '\u5973'\n }], marital: async () => [{ description: '\u5df2\u5a5a', value: 'Y' }, {\n description: '\u672a\u5a5a', value: 'N'\n }]\n }\n }}>\n <Enum moduleName=\"gender\" name=\"M\" />\n <Divider />\n <Enum moduleName=\"gender\">{(data) => {\n return data.map((data) => `${data.value}:${data.description}`).join(',');\n }}</Enum>\n <Divider />\n <Enum moduleName={['gender', 'marital']}>{([gender, marital]) => {\n return <div>\n <div>{gender.map((data) => `${data.value}:${data.description}`).join(',')}</div>\n <div>{marital.map((data) => `${data.value}:${data.description}`).join(',')}</div>\n </div>;\n }}</Enum>\n <Divider />\n <Enum moduleName=\"confirm\" name=\"Y\" />\n <Enum moduleName=\"confirm\" name=\"N\">{(data) => data.description}</Enum>\n </PureGlobal>;\n});\n\nrender(<BaseExample />);\n\n",scope:[{name:"_ReactEnum",packageName:"@kne/react-enum",importStatement:'import as _ReactEnum from "@kne/react-enum"',component:a},{name:"antd",packageName:"antd",component:d},{name:"remoteLoader",packageName:"@kne/remote-loader",component:o}]},{title:"\u57fa\u7840\u7528\u6cd5",description:"\u5c55\u793a\u679a\u4e3e\u7684\u57fa\u672c\u4f7f\u7528\uff0c\u5305\u62ec\u83b7\u53d6\u5355\u4e2a\u679a\u4e3e\u503c\u548c\u679a\u4e3e\u5217\u8868",code:'const { default: Enum } = _Enum;\nconst { createWithRemoteLoader } = remoteLoader;\nconst { Space, Select, Divider } = antd;\nconst BaseExample = createWithRemoteLoader({\n modules: [\'components-core:Global@PureGlobal\']\n})(({ remoteModules }) => {\n const [PureGlobal] = remoteModules;\n return (\n <PureGlobal\n preset={{\n locale: "zh-CN",\n enums: {\n // \u540c\u6b65\u52a0\u8f7d\u7684\u679a\u4e3e\n gender: [\n { value: "M", description: "\u7537" },\n { value: "F", description: "\u5973" },\n ],\n // \u5f02\u6b65\u52a0\u8f7d\u7684\u679a\u4e3e\n status: async ({ locale }) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve([\n { value: "1", description: "\u542f\u7528" },\n { value: "0", description: "\u7981\u7528" },\n ]);\n }, 500);\n });\n },\n },\n }}\n >\n <Space direction="vertical" size="large" style={{ width: "100%" }}>\n <div>\n <h4>\u83b7\u53d6\u5355\u4e2a\u679a\u4e3e\u503c</h4>\n <Space>\n <span>\u6027\u522b\uff1a</span>\n <Enum moduleName="gender" name="M" />\n <Divider type="vertical" />\n <span>\u81ea\u5b9a\u4e49\u6e32\u67d3\uff1a</span>\n <Enum moduleName="gender" name="F">\n {(data) => <strong style={{ color: "#f5222d" }}>{data.description}</strong>}\n </Enum>\n </Space>\n </div>\n \n <div>\n <h4>\u83b7\u53d6\u679a\u4e3e\u5217\u8868</h4>\n <Enum moduleName="gender">\n {(list) => {\n return (\n <Space>\n <span>\u53ef\u9009\u9879\uff1a</span>\n {list.map((item, index) => (\n <span key={item.value}>\n {item.description}\n {index < list.length - 1 && "\u3001"}\n </span>\n ))}\n </Space>\n );\n }}\n </Enum>\n </div>\n \n <div>\n <h4>\u6e32\u67d3\u4e3a\u4e0b\u62c9\u6846</h4>\n <Enum moduleName="status">\n {(list) => {\n return (\n <Select\n style={{ width: 150 }}\n placeholder="\u8bf7\u9009\u62e9\u72b6\u6001"\n options={list.map((item) => ({\n value: item.value,\n label: item.description,\n }))}\n />\n );\n }}\n </Enum>\n </div>\n \n <div>\n <h4>\u5360\u4f4d\u7b26\u548c\u52a0\u8f7d\u72b6\u6001</h4>\n <Space>\n <span>\u72b6\u6001\uff1a</span>\n <Enum \n moduleName="status" \n name="1"\n placeholder="\u52a0\u8f7d\u4e2d..."\n />\n </Space>\n </div>\n \n <div>\n <h4>\u4f7f\u7528format="option"\u76f4\u63a5\u83b7\u53d6\u9009\u9879\u683c\u5f0f</h4>\n <Enum moduleName="gender" format="option">\n {(list) => (\n <Select\n style={{ width: 150 }}\n placeholder="\u8bf7\u9009\u62e9\u6027\u522b"\n options={list}\n />\n )}\n </Enum>\n </div>\n </Space>\n </PureGlobal>\n );\n});\n\nrender(<BaseExample />);\n',scope:[{name:"_Enum",packageName:"@kne/react-enum",importStatement:'import * as _ReactEnum from "@kne/react-enum"',component:a},{name:"antd",packageName:"antd",component:d},{name:"remoteLoader",packageName:"@kne/remote-loader",component:o}]},{title:"\u5f02\u6b65\u52a0\u8f7d\u4e0e\u7f13\u5b58",description:"\u5c55\u793a\u5f02\u6b65\u52a0\u8f7d\u679a\u4e3e\u6570\u636e\u3001Loading\u72b6\u6001\u548c\u5f3a\u5236\u5237\u65b0\u7f13\u5b58",code:'const { default: Enum } = _Enum;\nconst { Space, Button, message } = antd;\nconst { useState } = React;\nconst { createWithRemoteLoader } = remoteLoader;\n\nconst AsyncEnumExample = createWithRemoteLoader({\n modules: [\'components-core:Global@PureGlobal\']\n})(({ remoteModules }) => {\n const [PureGlobal] = remoteModules;\n const [refreshKey, setRefreshKey] = useState(0);\n \n return (\n <PureGlobal\n preset={{\n locale: "zh-CN",\n enums: {\n // \u5f02\u6b65\u52a0\u8f7d\u679a\u4e3e\u6570\u636e\n userStatus: async ({ language }) => {\n // \u6a21\u62df\u4ece\u670d\u52a1\u5668\u83b7\u53d6\u6570\u636e\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve([\n { value: "active", description: "\u6d3b\u8dc3" },\n { value: "inactive", description: "\u975e\u6d3b\u8dc3" },\n { value: "pending", description: "\u5f85\u5ba1\u6838" },\n { value: "banned", description: "\u5df2\u7981\u7528" },\n ]);\n }, 1500);\n });\n },\n // \u540c\u6b65\u679a\u4e3e\u6570\u636e\n priority: [\n { value: "low", description: "\u4f4e\u4f18\u5148\u7ea7" },\n { value: "medium", description: "\u4e2d\u4f18\u5148\u7ea7" },\n { value: "high", description: "\u9ad8\u4f18\u5148\u7ea7" },\n { value: "urgent", description: "\u7d27\u6025" },\n ],\n },\n }}\n >\n <Space direction="vertical" size="large" style={{ width: "100%" }}>\n <div>\n <h4>\u5f02\u6b65\u52a0\u8f7d\u679a\u4e3e\uff08\u5e26Loading\u72b6\u6001\uff09</h4>\n <Enum \n key={refreshKey}\n moduleName="userStatus" \n name="active"\n loading={<span>\u6b63\u5728\u52a0\u8f7d\u7528\u6237\u72b6\u6001...</span>}\n placeholder="--"\n >\n {(data) => <div>\u5f53\u524d\u72b6\u6001\uff1a{data.description}</div>}\n </Enum>\n </div>\n \n <div>\n <h4>\u5f3a\u5236\u5237\u65b0\u7f13\u5b58</h4>\n <Space>\n <Enum \n moduleName="userStatus" \n name="banned"\n force={refreshKey > 0}\n >\n {(data) => data.description}\n </Enum>\n <Button \n onClick={() => {\n setRefreshKey(prev => prev + 1);\n message.info("\u5df2\u5237\u65b0\u7f13\u5b58");\n }}\n >\n \u5237\u65b0\u7f13\u5b58\n </Button>\n </Space>\n </div>\n \n <div>\n <h4>\u540c\u6b65\u679a\u4e3e\u6570\u636e\uff08\u7acb\u5373\u663e\u793a\uff09</h4>\n <Space>\n <Enum moduleName="priority" name="high" />\n <Enum moduleName="priority" name="urgent">\n {(data) => <span style={{ color: "red" }}>{data.description}</span>}\n </Enum>\n </Space>\n </div>\n </Space>\n </PureGlobal>\n );\n});\n\nrender(<AsyncEnumExample />);\n\n',scope:[{name:"_Enum",packageName:"@kne/react-enum",importStatement:'import * as _ReactEnum from "@kne/react-enum"',component:a},{name:"antd",packageName:"antd",component:d},{name:"remoteLoader",packageName:"@kne/remote-loader",component:o}]},{title:"\u683c\u5f0f\u5316\u65b9\u5f0f",description:"\u5c55\u793a\u4e0d\u540c\u7684\u683c\u5f0f\u5316\u65b9\u5f0f\u548c\u81ea\u5b9a\u4e49\u6e32\u67d3",code:'const { default: Enum } = _Enum;\nconst { createWithRemoteLoader } = remoteLoader;\nconst { Space, Divider, Card } = antd;\n\nconst FormatEnumExample = createWithRemoteLoader({\n modules: [\'components-core:Global@PureGlobal\']\n})(({ remoteModules }) => {\n const [PureGlobal] = remoteModules;\n return (\n <PureGlobal\n preset={{\n locale: "zh-CN",\n enums: {\n orderStatus: [\n { value: "created", description: "\u5df2\u521b\u5efa", color: "#666" },\n { value: "paid", description: "\u5df2\u652f\u4ed8", color: "#1890ff" },\n { value: "shipped", description: "\u5df2\u53d1\u8d27", color: "#52c41a" },\n { value: "completed", description: "\u5df2\u5b8c\u6210", color: "#52c41a" },\n { value: "cancelled", description: "\u5df2\u53d6\u6d88", color: "#f5222d" },\n ],\n },\n }}\n >\n <Space direction="vertical" size="large" style={{ width: "100%" }}>\n <Card title="\u4e0d\u540c\u683c\u5f0f\u5316\u65b9\u5f0f" size="small">\n <Space direction="vertical">\n <div>\n <strong>\u9ed8\u8ba4\u683c\u5f0f\uff08format="default"\uff09\uff1a</strong>\n <Enum moduleName="orderStatus" name="paid" format="default" />\n </div>\n \n <Divider />\n \n <div>\n <strong>\u539f\u59cb\u5bf9\u8c61\uff08format="origin"\uff09\uff1a</strong>\n <Enum moduleName="orderStatus" name="paid" format="origin">\n {(data) => (\n <pre>{JSON.stringify(data, null, 2)}</pre>\n )}\n </Enum>\n </div>\n \n <Divider />\n \n <div>\n <strong>\u9009\u9879\u683c\u5f0f\uff08format="option"\uff09\uff1a</strong>\n <Enum moduleName="orderStatus" name="paid" format="option">\n {(data) => {\n return (\n <span>label: {data.description}, value: {data.value}</span>\n )\n }}\n </Enum>\n </div>\n </Space>\n </Card>\n \n <Card title="\u81ea\u5b9a\u4e49\u6e32\u67d3" size="small">\n <Space>\n <Enum moduleName="orderStatus" name="shipped" format="origin">\n {(data) => (\n <span style={{ color: data.color }}>\n \u25cf {data.description}\n </span>\n )}\n </Enum>\n \n <Enum moduleName="orderStatus" name="cancelled" format="origin">\n {(data) => (\n <span style={{ \n padding: "2px 8px",\n backgroundColor: data.color,\n color: "#fff",\n borderRadius: "4px"\n }}>\n {data.description}\n </span>\n )}\n </Enum>\n </Space>\n </Card>\n </Space>\n </PureGlobal>\n );\n});\n\nrender(<FormatEnumExample />);\n\n',scope:[{name:"_Enum",packageName:"@kne/react-enum",importStatement:'import * as _ReactEnum from "@kne/react-enum"',component:a},{name:"antd",packageName:"antd",component:d},{name:"remoteLoader",packageName:"@kne/remote-loader",component:o}]},{title:"\u6e32\u67d3\u679a\u4e3e\u5217\u8868",description:"\u5c06\u679a\u4e3e\u5217\u8868\u6e32\u67d3\u4e3a\u5404\u79cd\u8868\u5355\u7ec4\u4ef6",code:'const { default: Enum } = _Enum;\nconst { createWithRemoteLoader } = remoteLoader;\nconst { Space, Select, Radio, Checkbox, Table } = antd;\n\nconst ListEnumExample = createWithRemoteLoader({\n modules: [\'components-core:Global@PureGlobal\']\n})(({ remoteModules }) => {\n const [PureGlobal] = remoteModules;\n return (\n <PureGlobal\n preset={{\n locale: "zh-CN",\n enums: {\n department: [\n { value: "tech", description: "\u6280\u672f\u90e8" },\n { value: "product", description: "\u4ea7\u54c1\u90e8" },\n { value: "design", description: "\u8bbe\u8ba1\u90e8" },\n { value: "marketing", description: "\u5e02\u573a\u90e8" },\n { value: "hr", description: "\u4eba\u529b\u8d44\u6e90\u90e8" },\n { value: "finance", description: "\u8d22\u52a1\u90e8" },\n ],\n role: [\n { value: "admin", description: "\u7ba1\u7406\u5458", level: 1 },\n { value: "manager", description: "\u7ecf\u7406", level: 2 },\n { value: "employee", description: "\u5458\u5de5", level: 3 },\n { value: "intern", description: "\u5b9e\u4e60\u751f", level: 4 },\n ],\n },\n }}\n >\n <Space direction="vertical" size="large" style={{ width: "100%" }}>\n <div>\n <h4>\u6e32\u67d3\u4e3a Select \u4e0b\u62c9\u6846</h4>\n <Enum moduleName="department">\n {(list) => (\n <Select\n style={{ width: 200 }}\n placeholder="\u8bf7\u9009\u62e9\u90e8\u95e8"\n options={list.map((item) => ({\n value: item.value,\n label: item.description,\n }))}\n />\n )}\n </Enum>\n </div>\n \n <div>\n <h4>\u6e32\u67d3\u4e3a Radio \u5355\u9009\u7ec4</h4>\n <Enum moduleName="role">\n {(list) => (\n <Radio.Group>\n {list.map((item) => (\n <Radio key={item.value} value={item.value}>\n {item.description}\n </Radio>\n ))}\n </Radio.Group>\n )}\n </Enum>\n </div>\n \n <div>\n <h4>\u6e32\u67d3\u4e3a Checkbox \u591a\u9009\u7ec4</h4>\n <Enum moduleName="department">\n {(list) => (\n <Checkbox.Group>\n {list.slice(0, 4).map((item) => (\n <Checkbox key={item.value} value={item.value}>\n {item.description}\n </Checkbox>\n ))}\n </Checkbox.Group>\n )}\n </Enum>\n </div>\n \n <div>\n <h4>\u6e32\u67d3\u4e3a Table \u8868\u683c</h4>\n <Enum moduleName="role" format="origin">\n {(list) => (\n <Table\n size="small"\n pagination={false}\n columns={[\n { title: "\u7f16\u7801", dataIndex: "value", key: "value" },\n { title: "\u540d\u79f0", dataIndex: "description", key: "description" },\n { title: "\u7ea7\u522b", dataIndex: "level", key: "level" },\n ]}\n dataSource={list.map(item => ({ ...item, key: item.value }))}\n />\n )}\n </Enum>\n </div>\n </Space>\n </PureGlobal>\n );\n});\n\nrender(<ListEnumExample />);\n\n',scope:[{name:"_Enum",packageName:"@kne/react-enum",importStatement:'import * as _ReactEnum from "@kne/react-enum"',component:a},{name:"antd",packageName:"antd",component:d},{name:"remoteLoader",packageName:"@kne/remote-loader",component:o}]},{title:"\u591a\u679a\u4e3e\u6a21\u5757",description:"\u540c\u65f6\u83b7\u53d6\u591a\u4e2a\u679a\u4e3e\u6a21\u5757\u548c\u9519\u8bef\u5904\u7406",code:'const { default: Enum } = _Enum;\nconst { createWithRemoteLoader } = remoteLoader;\nconst { Space, Card, Tag } = antd;\n\nconst MultiEnumExample = createWithRemoteLoader({\n modules: [\'components-core:Global@PureGlobal\']\n})(({ remoteModules }) => {\n const [PureGlobal] = remoteModules;\n return (\n <PureGlobal\n preset={{\n locale: "zh-CN",\n enums: {\n country: [\n { value: "CN", description: "\u4e2d\u56fd" },\n { value: "US", description: "\u7f8e\u56fd" },\n { value: "UK", description: "\u82f1\u56fd" },\n { value: "JP", description: "\u65e5\u672c" },\n ],\n language: [\n { value: "zh-CN", description: "\u7b80\u4f53\u4e2d\u6587" },\n { value: "en-US", description: "\u82f1\u8bed" },\n { value: "ja-JP", description: "\u65e5\u8bed" },\n { value: "ko-KR", description: "\u97e9\u8bed" },\n ],\n timezone: [\n { value: "UTC+8", description: "\u5317\u4eac\u65f6\u95f4" },\n { value: "UTC+0", description: "\u683c\u6797\u5a01\u6cbb\u65f6\u95f4" },\n { value: "UTC-5", description: "\u7ebd\u7ea6\u65f6\u95f4" },\n { value: "UTC+9", description: "\u4e1c\u4eac\u65f6\u95f4" },\n ],\n },\n }}\n >\n <Space direction="vertical" size="large" style={{ width: "100%" }}>\n <Card title="\u540c\u65f6\u83b7\u53d6\u591a\u4e2a\u679a\u4e3e\u6a21\u5757" size="small">\n <Enum moduleName={["country", "language", "timezone"]}>\n {([countries, languages, timezones]) => (\n <Space direction="vertical">\n <div>\n <strong>\u56fd\u5bb6\u5217\u8868\uff1a</strong>\n <Space>\n {countries.map(item => (\n <Tag key={item.value}>{item.description}</Tag>\n ))}\n </Space>\n </div>\n <div>\n <strong>\u8bed\u8a00\u5217\u8868\uff1a</strong>\n <Space>\n {languages.map(item => (\n <Tag key={item.value} color="blue">{item.description}</Tag>\n ))}\n </Space>\n </div>\n <div>\n <strong>\u65f6\u533a\u5217\u8868\uff1a</strong>\n <Space>\n {timezones.map(item => (\n <Tag key={item.value} color="green">{item.description}</Tag>\n ))}\n </Space>\n </div>\n </Space>\n )}\n </Enum>\n </Card>\n \n <Card title="\u7ec4\u5408\u4f7f\u7528\u591a\u4e2a\u679a\u4e3e" size="small">\n <Space>\n <span>\u7528\u6237\u6765\u81ea</span>\n <Enum moduleName="country" name="CN">\n {(data) => <strong>{data.description}</strong>}\n </Enum>\n <span>\uff0c\u4f7f\u7528</span>\n <Enum moduleName="language" name="zh-CN">\n {(data) => <strong>{data.description}</strong>}\n </Enum>\n <span>\uff0c\u65f6\u533a\u4e3a</span>\n <Enum moduleName="timezone" name="UTC+8">\n {(data) => <strong>{data.description}</strong>}\n </Enum>\n </Space>\n </Card>\n \n <Card title="\u9519\u8bef\u5904\u7406" size="small">\n <Space direction="vertical">\n <div>\n <strong>\u4e0d\u5b58\u5728\u7684\u679a\u4e3e\u6a21\u5757\uff1a</strong>\n <Enum \n moduleName="notExist" \n name="test"\n error={<span style={{ color: "red" }}>\u679a\u4e3e\u52a0\u8f7d\u5931\u8d25</span>}\n />\n </div>\n <div>\n <strong>\u4e0d\u5b58\u5728\u7684\u679a\u4e3e\u503c\uff08\u663e\u793a\u5360\u4f4d\u7b26\uff09\uff1a</strong>\n <Enum \n moduleName="country" \n name="XX"\n placeholder="\u672a\u77e5\u56fd\u5bb6"\n />\n </div>\n </Space>\n </Card>\n </Space>\n </PureGlobal>\n );\n});\n\nrender(<MultiEnumExample />);\n\n',scope:[{name:"_Enum",packageName:"@kne/react-enum",importStatement:'import * as _ReactEnum from "@kne/react-enum"',component:a},{name:"antd",packageName:"antd",component:d},{name:"remoteLoader",packageName:"@kne/remote-loader",component:o}]}]}}},17540(n,t,e){e.d(t,{A:()=>r});var a=e(63361),d=e(72752),o=e(53132);const r={name:"Features",summary:"<p>Features \u662f\u4e00\u4e2a\u529f\u80fd\u5f00\u5173\u7ba1\u7406\u7ec4\u4ef6\uff0c\u7528\u4e8e\u5728\u7cfb\u7edf\u4e2d\u901a\u8fc7\u6761\u4ef6\u63a7\u5236\u529f\u80fd\u7684\u5f00\u542f\u6216\u5173\u95ed\uff0c\u5b9e\u73b0\u7cfb\u7edf\u529f\u80fd\u7684\u7075\u6d3b\u914d\u7f6e\u3002</p>\n<p>\u901a\u8fc7\u5168\u5c40\u914d\u7f6e\u7684\u65b9\u5f0f\uff0cFeatures \u7ec4\u4ef6\u53ef\u4ee5\u7edf\u4e00\u7ba1\u7406\u7cfb\u7edf\u529f\u80fd\u7684\u53ef\u89c1\u6027\u548c\u53ef\u8bbf\u95ee\u6027\uff0c\u907f\u514d\u5728\u4ee3\u7801\u4e2d\u6563\u843d\u5927\u91cf\u5224\u65ad\u903b\u8f91\u3002\u5b83\u652f\u6301\u57fa\u4e8e\u4f9d\u8d56\u5173\u7cfb\u7684\u667a\u80fd\u5224\u65ad\uff0c\u53ea\u6709\u5f53\u529f\u80fd\u53ca\u5176\u4f9d\u8d56\u9879\u90fd\u6ee1\u8db3\u6761\u4ef6\u65f6\u624d\u4f1a\u88ab\u6807\u8bb0\u4e3a\u53ef\u7528\u72b6\u6001\u3002\u540c\u65f6\uff0c\u8be5\u7ec4\u4ef6\u8fd8\u652f\u6301\u4e3a\u529f\u80fd\u7684\u5f00\u542f\u548c\u5173\u95ed\u72b6\u6001\u4f20\u9012\u4e0d\u540c\u7684\u914d\u7f6e\u53c2\u6570\uff0c\u5b9e\u73b0\u66f4\u7cbe\u7ec6\u7684\u4ea4\u4e92\u63a7\u5236\u3002</p>\n<p>\u6838\u5fc3\u7279\u6027\uff1a</p>\n<ul>\n<li><strong>\u96c6\u4e2d\u914d\u7f6e\u7ba1\u7406</strong>\uff1a\u901a\u8fc7 Global preset \u7edf\u4e00\u58f0\u660e\uff0c\u907f\u514d\u5224\u65ad\u8bed\u53e5\u6563\u843d\u5728\u4ee3\u7801\u5404\u5904</li>\n<li><strong>\u4f9d\u8d56\u5173\u7cfb\u652f\u6301</strong>\uff1a\u667a\u80fd\u5224\u65ad\u529f\u80fd\u662f\u5426\u53ef\u7528\uff0c\u53ea\u6709\u6ee1\u8db3\u6240\u6709\u4f9d\u8d56\u6761\u4ef6\u624d\u5f00\u542f</li>\n<li><strong>\u53cc\u72b6\u6001\u53c2\u6570</strong>\uff1a\u53ef\u4e3a\u5f00\u542f\u548c\u5173\u95ed\u72b6\u6001\u5206\u522b\u914d\u7f6e\u4e0d\u540c\u7684\u53c2\u6570\uff08options/rejectedOptions\uff09</li>\n<li><strong>\u8c03\u8bd5\u6a21\u5f0f</strong>\uff1a\u63d0\u4f9b debug \u6a21\u5f0f\u65b9\u4fbf\u5f00\u53d1\u65f6\u67e5\u770b\u529f\u80fd\u72b6\u6001\u548c\u771f\u5b9e ID</li>\n<li><strong>\u5d4c\u5957\u529f\u80fd\u7ba1\u7406</strong>\uff1a\u652f\u6301 system/module/feature \u4e09\u7ea7\u7ed3\u6784\uff0c\u901a\u8fc7\u5192\u53f7\u8fde\u63a5\u5b8c\u6574 ID</li>\n</ul>\n<p>\u9002\u7528\u4e8e\u4f01\u4e1a\u7ea7\u7ba1\u7406\u7cfb\u7edf\u3001SaaS \u5e73\u53f0\u3001\u591a\u79df\u6237\u5e94\u7528\u7b49\u9700\u8981\u7cbe\u7ec6\u5316\u529f\u80fd\u63a7\u5236\u7684\u573a\u666f\u3002</p>",api:"<h3>Features \u7ec4\u4ef6</h3>\n<p>Features \u662f\u4e00\u4e2a\u529f\u80fd\u5f00\u5173\u7ec4\u4ef6\uff0c\u7528\u4e8e\u6839\u636e\u914d\u7f6e\u63a7\u5236\u5b50\u7ec4\u4ef6\u7684\u663e\u793a\u6216\u9690\u85cf\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>id</td>\n<td>\u529f\u80fd\u6807\u8bc6\u7b26\uff0c\u5bf9\u5e94 preset.features.profile \u4e2d\u5b9a\u4e49\u7684 id</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u5b50\u5185\u5bb9\uff0c\u53ef\u4ee5\u662f JSX \u6216\u51fd\u6570\u3002\u4e3a\u51fd\u6570\u65f6\u63a5\u6536 {isPass, options, currentId} \u53c2\u6570</td>\n<td>ReactNode \| Function</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h4>children \u51fd\u6570\u53c2\u6570</h4>\n<p>\u5f53 children \u4e3a\u51fd\u6570\u65f6\uff0c\u63a5\u6536\u7684\u53c2\u6570\u5bf9\u8c61\u5305\u542b\u4ee5\u4e0b\u5c5e\u6027\uff1a</p>\n<table>\n<thead>\n<tr>\n<th>\u53c2\u6570\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>isPass</td>\n<td>\u529f\u80fd\u662f\u5426\u901a\u8fc7\uff08\u5f00\u542f\uff09</td>\n<td>boolean</td>\n</tr>\n<tr>\n<td>options</td>\n<td>\u5f00\u542f\u6216\u5173\u95ed\u72b6\u6001\u5bf9\u5e94\u7684\u914d\u7f6e\u53c2\u6570</td>\n<td>any</td>\n</tr>\n<tr>\n<td>currentId</td>\n<td>\u5f53\u524d\u529f\u80fd\u7684\u5b8c\u6574 ID\uff08\u5305\u542b\u7236\u7ea7\u8def\u5f84\uff09</td>\n<td>string</td>\n</tr>\n</tbody>\n</table>\n<h3>features \u914d\u7f6e</h3>\n<p>features \u914d\u7f6e\u5728 Global preset \u4e2d\u5b9a\u4e49\u3002</p>\n<h4>features \u914d\u7f6e\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>debug</td>\n<td>\u662f\u5426\u5f00\u542f\u8c03\u8bd5\u6a21\u5f0f\uff0c\u5f00\u542f\u540e\u4f1a\u5728\u63a7\u5236\u53f0\u6253\u5370\u6240\u6709\u529f\u80fd\u7684 ID \u548c\u5224\u65ad\u72b6\u6001</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n<tr>\n<td>profile</td>\n<td>\u529f\u80fd\u914d\u7f6e\u6811\u7ed3\u6784</td>\n<td>object</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>profile \u914d\u7f6e\u7ed3\u6784</h3>\n<p>profile \u91c7\u7528\u6811\u5f62\u7ed3\u6784\u914d\u7f6e\u7cfb\u7edf\u7684\u529f\u80fd\u6a21\u5757\u3002</p>\n<h4>profile \u8282\u70b9\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>id</td>\n<td>\u5f53\u524d\u8282\u70b9\u7684\u6807\u8bc6\u7b26\uff0c\u540c\u7ea7\u8282\u70b9\u4e2d\u9700\u552f\u4e00\uff0c\u5b8c\u6574 ID \u7531\u7236\u7ea7 ID \u548c\u5f53\u524d ID \u901a\u8fc7\u5192\u53f7\u8fde\u63a5</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>type</td>\n<td>\u8282\u70b9\u7c7b\u578b\uff0c\u53ef\u9009\u503c\u4e3a\uff1asystem\uff08\u7cfb\u7edf\u6839\u8282\u70b9\uff09\u3001module\uff08\u529f\u80fd\u6a21\u5757\uff09\u3001feature\uff08\u5177\u4f53\u529f\u80fd\uff09</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>\u8282\u70b9\u4e2d\u6587\u540d\u79f0\uff0c\u4ec5\u7528\u4e8e\u6807\u8bc6\u548c\u8bf4\u660e</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>close</td>\n<td>\u662f\u5426\u5f3a\u5236\u5173\u95ed\u8be5\u529f\u80fd\u3002true \u8868\u793a\u5173\u95ed\uff0cfalse \u6216\u4e0d\u914d\u7f6e\u8868\u793a\u5f00\u542f\uff08\u5b58\u5728\u8be5\u8282\u70b9\u914d\u7f6e\u65f6\uff09</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n<tr>\n<td>dependencies</td>\n<td>\u4f9d\u8d56\u7684\u529f\u80fd\u5217\u8868\uff0c\u6570\u7ec4\u4e2d\u7684 ID \u5fc5\u987b\u662f\u5b8c\u6574\u7684\u529f\u80fd ID\u3002\u53ea\u6709\u6240\u6709\u4f9d\u8d56\u529f\u80fd\u90fd\u5f00\u542f\u65f6\uff0c\u5f53\u524d\u529f\u80fd\u624d\u4f1a\u88ab\u6807\u8bb0\u4e3a\u5f00\u542f</td>\n<td>array<string></td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>options</td>\n<td>\u529f\u80fd\u5f00\u542f\u65f6\u4f20\u9012\u7ed9 children \u7684\u53c2\u6570</td>\n<td>any</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>rejectedOptions</td>\n<td>\u529f\u80fd\u5173\u95ed\u65f6\u4f20\u9012\u7ed9 children \u7684\u53c2\u6570</td>\n<td>any</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u5b50\u529f\u80fd\u8282\u70b9\u6570\u7ec4</td>\n<td>array<object></td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h4>\u529f\u80fd\u5224\u65ad\u89c4\u5219</h4>\n<ol>\n<li>\u529f\u80fd\u5f00\u542f\u6761\u4ef6\uff1aprofile \u4e2d\u5b58\u5728\u8be5\u8282\u70b9\u914d\u7f6e\uff0c\u4e14 close \u4e0d\u4e3a true\uff0c\u4e14\u6240\u6709 dependencies \u4f9d\u8d56\u7684\u529f\u80fd\u90fd\u5df2\u5f00\u542f</li>\n<li>\u529f\u80fd\u5173\u95ed\u6761\u4ef6\uff1aprofile \u4e2d\u4e0d\u5b58\u5728\u8be5\u8282\u70b9\u914d\u7f6e\uff0c\u6216 close \u4e3a true\uff0c\u6216\u5b58\u5728\u4f9d\u8d56\u9879\u529f\u80fd\u5173\u95ed</li>\n<li>\u6839\u8282\u70b9 type \u5fc5\u987b\u4e3a system</li>\n</ol>",example:{isFull:!0,className:"",style:"",list:[{title:"\u57fa\u7840\u7528\u6cd5 - \u4f9d\u8d56\u5173\u7cfb\u63a7\u5236\u529f\u80fd\u5f00\u5173",description:"\u5c55\u793a\u5982\u4f55\u901a\u8fc7\u4f9d\u8d56\u5173\u7cfb\u63a7\u5236\u529f\u80fd\u6a21\u5757\u7684\u5f00\u542f\u4e0e\u5173\u95ed\uff0c\u6279\u91cf\u5bfc\u5165\u529f\u80fd\u4f9d\u8d56\u7f16\u8f91\u6a21\u5757",code:'const { default: Features } = _Features;\nconst { default: Layout, PermissionsPage } = layout;\nconst { PureGlobal } = global;\n\nconst BaseExample = () => {\n return (\n <PureGlobal\n preset={{\n features: {\n debug: true,\n profile: {\n id: "hr-system",\n type: "system",\n name: "\u4eba\u529b\u8d44\u6e90\u7ba1\u7406\u7cfb\u7edf",\n children: [\n {\n id: "employee",\n type: "module",\n name: "\u5458\u5de5\u7ba1\u7406",\n children: [\n {\n id: "import",\n type: "feature",\n name: "\u6279\u91cf\u5bfc\u5165",\n dependencies: ["hr-system:employee:edit"],\n },\n {\n id: "export",\n type: "feature",\n name: "\u6570\u636e\u5bfc\u51fa",\n },\n ],\n },\n {\n id: "attendance",\n type: "module",\n name: "\u8003\u52e4\u7ba1\u7406",\n children: [\n {\n id: "check-in",\n type: "feature",\n name: "\u7b7e\u5230\u6253\u5361",\n },\n ],\n },\n {\n id: "edit",\n type: "module",\n name: "\u7f16\u8f91\u6a21\u5757",\n },\n ],\n },\n },\n }}\n >\n <Layout navigation={{ isFixed: false }}>\n <PermissionsPage name="employee" openFeatures>\n <Features id="import">\n <div>\n <h3>\u6279\u91cf\u5bfc\u5165\u5458\u5de5\u6570\u636e</h3>\n <p>\u652f\u6301 Excel \u6587\u4ef6\u6279\u91cf\u5bfc\u5165\uff0c\u4e00\u6b21\u6027\u6dfb\u52a0\u591a\u540d\u5458\u5de5</p>\n </div>\n </Features>\n <Features id="export">\n <div>\n <h3>\u5bfc\u51fa\u5458\u5de5\u6570\u636e</h3>\n <p>\u5bfc\u51fa\u5458\u5de5\u5217\u8868\u5230 Excel\uff0c\u652f\u6301\u81ea\u5b9a\u4e49\u7b5b\u9009\u6761\u4ef6</p>\n </div>\n </Features>\n <Features id="analytics">\n <div>\n <h3>\u6570\u636e\u5206\u6790</h3>\n <p>\u7edf\u8ba1\u5206\u6790\u5458\u5de5\u6570\u636e\uff0c\u751f\u6210\u53ef\u89c6\u5316\u62a5\u8868</p>\n </div>\n </Features>\n </PermissionsPage>\n </Layout>\n </PureGlobal>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Features",packageName:"@components/Features",component:a},{name:"global",packageName:"@components/Global",component:d},{name:"layout",packageName:"@components/Layout",component:o}]},{title:"\u9875\u9762\u7ea7\u529f\u80fd\u63a7\u5236",description:"\u5c55\u793a\u5982\u4f55\u5728\u591a\u9875\u9762\u5e94\u7528\u4e2d\u4f7f\u7528 Features \u63a7\u5236\u4e0d\u540c\u9875\u9762\u7684\u529f\u80fd\u6a21\u5757\uff0c\u9500\u552e\u8d8b\u52bf\u56fe\u3001\u5ba2\u6237\u589e\u957f\u56fe\u7b49\u529f\u80fd\u5c55\u793a",code:'const {default: Features} = _Features;\nconst {default: Layout, PermissionsPage} = layout;\nconst {PureGlobal} = global;\nconst {Route, Routes} = Router;\n\nconst ModuleExample = () => {\n return (<PureGlobal\n preset={{\n features: {\n debug: true, profile: {\n id: "crm-system", type: "system", name: "\u5ba2\u6237\u5173\u7cfb\u7ba1\u7406\u7cfb\u7edf", children: [{\n id: "dashboard", type: "module", name: "\u6570\u636e\u770b\u677f", children: [{\n id: "sales-chart", type: "feature", name: "\u9500\u552e\u8d8b\u52bf\u56fe",\n }, {\n id: "customer-chart", type: "feature", name: "\u5ba2\u6237\u589e\u957f\u56fe",\n },],\n }, {\n id: "customer", type: "module", name: "\u5ba2\u6237\u7ba1\u7406", children: [{\n id: "advanced-filter",\n type: "feature",\n name: "\u9ad8\u7ea7\u7b5b\u9009",\n dependencies: ["crm-system:dashboard"],\n },],\n },],\n },\n },\n }}\n >\n <Layout\n navigation={{\n isFixed: false, showIndex: false, base: \'/Features\', list: [{\n key: "dashboard", title: "\u6570\u636e\u770b\u677f", path: "/Features",\n }, {\n key: "customer", title: "\u5ba2\u6237\u7ba1\u7406", path: "/Features/customer",\n },],\n }}\n >\n <Routes>\n <Route\n path="/Features"\n element={<PermissionsPage name="dashboard" openFeatures>\n <div>\n <h2>\u6570\u636e\u770b\u677f</h2>\n <div style={{\n padding: \'16px\',\n marginBottom: \'16px\',\n border: \'1px solid #d9d9d9\',\n borderRadius: \'4px\'\n }}>\n <Features id="sales-chart">\n <h3>\u9500\u552e\u8d8b\u52bf\u5206\u6790</h3>\n <p>\u5c55\u793a\u6700\u8fd130\u5929\u9500\u552e\u6570\u636e\u53d8\u5316\u8d8b\u52bf</p>\n </Features>\n </div>\n <div style={{padding: \'16px\', border: \'1px solid #d9d9d9\', borderRadius: \'4px\'}}>\n <Features id="customer-chart">\n <h3>\u5ba2\u6237\u589e\u957f\u5206\u6790</h3>\n <p>\u5c55\u793a\u5ba2\u6237\u6570\u91cf\u53d8\u5316\u8d8b\u52bf</p>\n </Features>\n </div>\n </div>\n </PermissionsPage>}\n />\n <Route\n path="/Features/customer"\n element={<PermissionsPage name="customer" openFeatures>\n <div>\n <h2>\u5ba2\u6237\u7ba1\u7406</h2>\n <div style={{padding: \'16px\', border: \'1px solid #d9d9d9\', borderRadius: \'4px\'}}>\n <Features id="advanced-filter">\n <h3>\u9ad8\u7ea7\u7b5b\u9009\u529f\u80fd</h3>\n <p>\u652f\u6301\u591a\u7ef4\u5ea6\u7ec4\u5408\u7b5b\u9009\u5ba2\u6237\u6570\u636e</p>\n </Features>\n </div>\n </div>\n </PermissionsPage>}\n />\n </Routes>\n </Layout>\n </PureGlobal>);\n};\n\nrender(<ModuleExample/>);\n\n',scope:[{name:"_Features",packageName:"@components/Features",component:a},{name:"global",packageName:"@components/Global",component:d},{name:"layout",packageName:"@components/Layout",component:o},{name:"Router",packageName:"react-router-dom",component:e(94679)}]},{title:"\u52a8\u6001\u53c2\u6570\u4f20\u9012",description:"\u5c55\u793a\u5982\u4f55\u6839\u636e\u529f\u80fd\u5f00\u542f/\u5173\u95ed\u72b6\u6001\u4f20\u9012\u4e0d\u540c\u7684\u914d\u7f6e\u53c2\u6570\uff08options/rejectedOptions\uff09\uff0c\u85aa\u8d44\u53ef\u89c1\u6027\u548c\u7ee9\u6548\u8003\u6838\u529f\u80fd",code:'const { default: Features } = _Features;\nconst { default: Layout, PermissionsPage } = layout;\nconst { PureGlobal } = global;\nconst { useState } = React;\nconst { Button, Space, Card, Tag, Alert } = antd;\n\nconst OptionsExample = () => {\n const [featureEnabled, setFeatureEnabled] = useState(true);\n\n return (\n <PureGlobal\n preset={{\n features: {\n debug: true,\n profile: {\n id: "hr-system",\n type: "system",\n name: "\u4eba\u529b\u8d44\u6e90\u7cfb\u7edf",\n children: [\n {\n id: "employee",\n type: "module",\n name: "\u5458\u5de5\u7ba1\u7406",\n children: [\n {\n id: "salary-visibility",\n type: "feature",\n name: "\u85aa\u8d44\u53ef\u89c1\u6027",\n options: {\n permission: "full",\n canEdit: true,\n maxViewLevel: "all"\n },\n rejectedOptions: {\n permission: "limited",\n canEdit: false,\n maxViewLevel: "self"\n },\n close: !featureEnabled,\n },\n {\n id: "performance",\n type: "feature",\n name: "\u7ee9\u6548\u8003\u6838",\n options: {\n scoreRange: "0-100",\n hasReview: true,\n allowAppeal: true\n },\n rejectedOptions: {\n scoreRange: "0-10",\n hasReview: false,\n allowAppeal: false\n }\n }\n ],\n },\n ],\n },\n },\n }}\n >\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Card>\n <Button\n type="primary"\n onClick={() => {\n setFeatureEnabled((value) => !value);\n }}\n >\n {featureEnabled ? "\u5173\u95ed\u85aa\u8d44\u529f\u80fd" : "\u5f00\u542f\u85aa\u8d44\u529f\u80fd"}\n </Button>\n <p style={{ marginTop: 12 }}>\n \u70b9\u51fb\u6309\u94ae\u5207\u6362\u85aa\u8d44\u53ef\u89c1\u6027\u529f\u80fd\uff0c\u89c2\u5bdf\u4e0d\u540c\u72b6\u6001\u4e0b\u4f20\u9012\u7684\u53c2\u6570\u53d8\u5316\n </p>\n </Card>\n\n <Layout navigation={{ isFixed: false }}>\n <PermissionsPage name="employee" openFeatures>\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Card title="\u85aa\u8d44\u53ef\u89c1\u6027\u529f\u80fd" size="small">\n <Features id="salary-visibility">\n {({ isPass, options }) => (\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Alert\n message={isPass ? "\u529f\u80fd\u5df2\u5f00\u542f" : "\u529f\u80fd\u5df2\u5173\u95ed"}\n type={isPass ? "success" : "warning"}\n showIcon\n />\n <div>\n <strong>\u6743\u9650\u7ea7\u522b\uff1a</strong>\n <Tag color={isPass ? "green" : "orange"}>\n {options.permission}\n </Tag>\n </div>\n <div>\n <strong>\u7f16\u8f91\u6743\u9650\uff1a</strong>\n <Tag color={options.canEdit ? "blue" : "default"}>\n {options.canEdit ? "\u5141\u8bb8\u7f16\u8f91" : "\u53ea\u8bfb"}\n </Tag>\n </div>\n <div>\n <strong>\u67e5\u770b\u8303\u56f4\uff1a</strong>\n <Tag>{options.maxViewLevel}</Tag>\n </div>\n </Space>\n )}\n </Features>\n </Card>\n\n <Card title="\u7ee9\u6548\u8003\u6838\u529f\u80fd" size="small">\n <Features id="performance">\n {({ isPass, options }) => (\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Alert\n message={isPass ? "\u529f\u80fd\u5df2\u5f00\u542f" : "\u529f\u80fd\u5df2\u5173\u95ed"}\n type="success"\n showIcon\n />\n <div>\n <strong>\u8bc4\u5206\u8303\u56f4\uff1a</strong>\n <Tag>{options.scoreRange}</Tag>\n </div>\n <div>\n <strong>\u7ee9\u6548\u590d\u6838\uff1a</strong>\n <Tag color={options.hasReview ? "blue" : "default"}>\n {options.hasReview ? "\u542f\u7528" : "\u7981\u7528"}\n </Tag>\n </div>\n <div>\n <strong>\u7533\u8bc9\u529f\u80fd\uff1a</strong>\n <Tag color={options.allowAppeal ? "blue" : "default"}>\n {options.allowAppeal ? "\u5141\u8bb8" : "\u7981\u6b62"}\n </Tag>\n </div>\n </Space>\n )}\n </Features>\n </Card>\n </Space>\n </PermissionsPage>\n </Layout>\n </Space>\n </PureGlobal>\n );\n};\n\nrender(<OptionsExample />);\n\n',scope:[{name:"_Features",packageName:"@components/Features",component:a},{name:"global",packageName:"@components/Global",component:d},{name:"layout",packageName:"@components/Layout",component:o},{name:"antd",packageName:"antd",component:e(55199)}]}]}}},46631(n,t,e){e.d(t,{A:()=>l});var a=e(34699),d=e(72752),o=e(13050),r=e(55199);const l={name:"File",summary:"<p>File \u7ec4\u4ef6\u63d0\u4f9b\u4e86\u4e00\u5957\u5b8c\u6574\u7684\u6587\u4ef6\u7ba1\u7406\u89e3\u51b3\u65b9\u6848\uff0c\u5305\u62ec\u6587\u4ef6\u5c55\u793a\u3001OSS \u6587\u4ef6 ID \u8f6c\u6362\u3001\u6587\u4ef6\u5217\u8868\u5c55\u793a\u3001\u6587\u4ef6\u4e0b\u8f7d\u7b49\u529f\u80fd\u3002</p>\n<p>\u8be5\u7ec4\u4ef6\u96c6\u6210\u4e86\u6587\u4ef6\u4e0a\u4f20\u3001\u9884\u89c8\u3001\u7f16\u8f91\u3001\u5220\u9664\u7b49\u5e38\u89c1\u64cd\u4f5c\uff0c\u652f\u6301\u901a\u8fc7 OSS ID \u81ea\u52a8\u83b7\u53d6\u6587\u4ef6\u8bbf\u95ee\u5730\u5740\uff0c\u5e76\u63d0\u4f9b\u6587\u4ef6\u5217\u8868\u7ec4\u4ef6\u6765\u5c55\u793a\u548c\u7ba1\u7406\u591a\u4e2a\u6587\u4ef6\u3002\u540c\u65f6\u63d0\u4f9b\u4e86\u6587\u4ef6\u4e0b\u8f7d\u3001\u6587\u4ef6\u9884\u89c8\u94fe\u63a5\u7b49\u4fbf\u6377\u7ec4\u4ef6\uff0c\u65b9\u4fbf\u5728\u5404\u79cd\u573a\u666f\u4e0b\u4f7f\u7528\u3002</p>\n<p>\u6838\u5fc3\u7279\u6027\uff1a</p>\n<ul>\n<li><strong>\u81ea\u52a8 OSS \u5730\u5740\u8f6c\u6362</strong>\uff1a\u652f\u6301\u901a\u8fc7\u6587\u4ef6 ID \u81ea\u52a8\u83b7\u53d6 OSS \u8bbf\u95ee\u5730\u5740\uff0c\u65e0\u9700\u624b\u52a8\u5904\u7406 URL \u8f6c\u6362</li>\n<li><strong>\u5b8c\u6574\u7684\u6587\u4ef6\u64cd\u4f5c</strong>\uff1a\u63d0\u4f9b\u6587\u4ef6\u9884\u89c8\u3001\u7f16\u8f91\u540d\u79f0\u3001\u4e0b\u8f7d\u3001\u5220\u9664\u7b49\u5b8c\u6574\u64cd\u4f5c\u529f\u80fd</li>\n<li><strong>\u7075\u6d3b\u7684\u5217\u8868\u5c55\u793a</strong>\uff1a\u652f\u6301\u81ea\u5b9a\u4e49\u5217\u6e32\u67d3\u3001\u6743\u9650\u63a7\u5236\u3001\u4e0a\u4f20\u72b6\u6001\u5c55\u793a</li>\n<li><strong>\u591a\u79cd\u4f7f\u7528\u65b9\u5f0f</strong>\uff1a\u63d0\u4f9b\u6309\u94ae\u3001\u94fe\u63a5\u3001\u5217\u8868\u7b49\u591a\u79cd\u5f62\u5f0f\u7684\u7ec4\u4ef6\uff0c\u9002\u5e94\u4e0d\u540c\u573a\u666f\u9700\u6c42</li>\n<li><strong>\u4e0b\u8f7d\u72b6\u6001\u7ba1\u7406</strong>\uff1a\u5185\u7f6e\u4e0b\u8f7d\u72b6\u6001\u7ba1\u7406\uff0c\u652f\u6301\u4e0b\u8f7d\u8fdb\u5ea6\u63a7\u5236\u548c\u56de\u8c03\u5904\u7406</li>\n</ul>\n<p>\u9002\u7528\u4e8e\u6587\u6863\u7ba1\u7406\u7cfb\u7edf\u3001\u6587\u4ef6\u5171\u4eab\u5e73\u53f0\u3001\u6570\u636e\u5bfc\u5165\u5bfc\u51fa\u7b49\u9700\u8981\u6587\u4ef6\u5904\u7406\u7684\u5e94\u7528\u573a\u666f\u3002</p>",api:'<h3>File \u7ec4\u4ef6</h3>\n<p>File \u7ec4\u4ef6\u7528\u4e8e\u901a\u8fc7 OSS ID \u83b7\u53d6\u6587\u4ef6\u8bbf\u95ee\u5730\u5740\u5e76\u5c55\u793a\u6587\u4ef6\u5185\u5bb9\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>id</td>\n<td>OSS \u6587\u4ef6\u7684\u552f\u4e00\u6807\u8bc6\u7b26</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>url</td>\n<td>\u76f4\u63a5\u6307\u5b9a\u6587\u4ef6\u7684\u8bbf\u95ee\u5730\u5740</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u6e32\u67d3\u51fd\u6570\uff0c\u63a5\u6536 <code>{ url }</code> \u53c2\u6570</td>\n<td>Function</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>apis</td>\n<td>OSS \u63a5\u53e3\u914d\u7f6e\uff0c\u5305\u542b <code>oss</code> \u5c5e\u6027</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>error</td>\n<td>\u52a0\u8f7d\u5931\u8d25\u65f6\u663e\u793a\u7684\u5185\u5bb9</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>null</td>\n</tr>\n<tr>\n<td>loading</td>\n<td>\u52a0\u8f7d\u4e2d\u663e\u793a\u7684\u5185\u5bb9</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>null</td>\n</tr>\n</tbody>\n</table>\n<p><strong>\u6ce8\u610f</strong>\uff1a<code>id</code> \u548c <code>url</code> \u81f3\u5c11\u9700\u8981\u4f20\u5165\u5176\u4e2d\u4e00\u4e2a\u3002</p>\n<h3>Download \u7ec4\u4ef6</h3>\n<p>\u6587\u4ef6\u4e0b\u8f7d\u6309\u94ae\u7ec4\u4ef6\uff0c\u652f\u6301\u901a\u8fc7 OSS ID \u6216 URL \u4e0b\u8f7d\u6587\u4ef6\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>id</td>\n<td>OSS \u6587\u4ef6\u7684\u552f\u4e00\u6807\u8bc6\u7b26</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>url</td>\n<td>\u76f4\u63a5\u6307\u5b9a\u6587\u4ef6\u7684\u4e0b\u8f7d\u5730\u5740</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>filename</td>\n<td>\u4e0b\u8f7d\u540e\u7684\u6587\u4ef6\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>\u672a\u547d\u540d\u4e0b\u8f7d\u6587\u4ef6</td>\n</tr>\n<tr>\n<td>apis</td>\n<td>OSS \u63a5\u53e3\u914d\u7f6e\uff0c\u5305\u542b <code>oss</code> \u5c5e\u6027</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onSuccess</td>\n<td>\u4e0b\u8f7d\u6210\u529f\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onError</td>\n<td>\u4e0b\u8f7d\u5931\u8d25\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u6309\u94ae\u5185\u5bb9</td>\n<td>ReactNode</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<p><strong>\u6ce8\u610f</strong>\uff1a<code>id</code> \u548c <code>url</code> \u81f3\u5c11\u9700\u8981\u4f20\u5165\u5176\u4e2d\u4e00\u4e2a\u3002</p>\n<h3>List \u7ec4\u4ef6</h3>\n<p>\u6587\u4ef6\u5217\u8868\u5c55\u793a\u7ec4\u4ef6\uff0c\u652f\u6301\u6587\u4ef6\u9884\u89c8\u3001\u7f16\u8f91\u540d\u79f0\u3001\u4e0b\u8f7d\u3001\u5220\u9664\u7b49\u64cd\u4f5c\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>dataSource</td>\n<td>\u6587\u4ef6\u6570\u636e\u5217\u8868</td>\n<td>array</td>\n<td>\u5426</td>\n<td>[]</td>\n</tr>\n<tr>\n<td>getPermission</td>\n<td>\u6743\u9650\u63a7\u5236\u51fd\u6570\uff0c\u63a5\u6536 <code>{ type, itemData }</code> \u53c2\u6570\uff0c\u8fd4\u56de <code>false</code> \u8868\u793a\u65e0\u6743\u9650</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>hasPreview</td>\n<td>\u662f\u5426\u542f\u7528\u9884\u89c8\u529f\u80fd</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>true</td>\n</tr>\n<tr>\n<td>infoItemRenders</td>\n<td>\u81ea\u5b9a\u4e49\u5217\u914d\u7f6e\uff0c\u6570\u7ec4\u4e2d\u6bcf\u9879\u5305\u542b <code>span</code>\uff08\u6805\u683c\u6570\uff09\u548c <code>render</code>\uff08\u6e32\u67d3\u51fd\u6570\uff09</td>\n<td>array</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>renderModal</td>\n<td>\u81ea\u5b9a\u4e49 Modal \u6e32\u67d3\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>apis</td>\n<td>\u64cd\u4f5c API \u914d\u7f6e</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>apis.onEdit</td>\n<td>\u7f16\u8f91\u6587\u4ef6\u540d\u79f0\u56de\u8c03\uff0c\u63a5\u6536\u53c2\u6570 <code>(formData, itemData)</code></td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>apis.onPreview</td>\n<td>\u9884\u89c8\u6587\u4ef6\u56de\u8c03\uff0c\u63a5\u6536\u53c2\u6570 <code>(itemData)</code></td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>apis.onDelete</td>\n<td>\u5220\u9664\u6587\u4ef6\u56de\u8c03\uff0c\u63a5\u6536\u53c2\u6570 <code>(itemData)</code></td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h4>dataSource \u6570\u636e\u7ed3\u6784</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>id</td>\n<td>\u6587\u4ef6\u552f\u4e00\u6807\u8bc6\u7b26\uff08\u4e00\u822c\u4e3a OSS ID\uff09</td>\n<td>string</td>\n</tr>\n<tr>\n<td>uuid</td>\n<td>\u4e34\u65f6\u6587\u4ef6\u552f\u4e00\u6807\u8bc6\u7b26</td>\n<td>string</td>\n</tr>\n<tr>\n<td>type</td>\n<td>\u6587\u4ef6\u72b6\u6001\uff0c\u503c\u4e3a <code>"uploading"</code> \u65f6\u663e\u793a\u4e0a\u4f20\u4e2d\u72b6\u6001</td>\n<td>string</td>\n</tr>\n<tr>\n<td>filename</td>\n<td>\u6587\u4ef6\u540d\u79f0</td>\n<td>string</td>\n</tr>\n<tr>\n<td>date</td>\n<td>\u4e0a\u4f20\u65e5\u671f\uff08\u65f6\u95f4\u6233\u6216 Date \u5bf9\u8c61\uff09</td>\n<td>Date \| string</td>\n</tr>\n<tr>\n<td>userName</td>\n<td>\u4e0a\u4f20\u4eba\u59d3\u540d</td>\n<td>string</td>\n</tr>\n</tbody>\n</table>\n<h3>OptionButtons \u7ec4\u4ef6</h3>\n<p>\u6587\u4ef6\u64cd\u4f5c\u6309\u94ae\u7ec4\uff0c\u63d0\u4f9b\u9884\u89c8\u3001\u7f16\u8f91\u3001\u5220\u9664\u7b49\u64cd\u4f5c\u6309\u94ae\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>itemData</td>\n<td>\u6587\u4ef6\u6570\u636e\u5bf9\u8c61</td>\n<td>object</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>apis</td>\n<td>\u64cd\u4f5c API \u914d\u7f6e</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>apis.onEdit</td>\n<td>\u7f16\u8f91\u6587\u4ef6\u540d\u79f0\u56de\u8c03</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>apis.onPreview</td>\n<td>\u9884\u89c8\u6587\u4ef6\u56de\u8c03</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>apis.onDelete</td>\n<td>\u5220\u9664\u6587\u4ef6\u56de\u8c03</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>hasPreview</td>\n<td>\u662f\u5426\u663e\u793a\u9884\u89c8\u6309\u94ae</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>true</td>\n</tr>\n<tr>\n<td>renderModal</td>\n<td>\u81ea\u5b9a\u4e49 Modal \u6e32\u67d3\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>FileLink \u7ec4\u4ef6</h3>\n<p>\u6587\u4ef6\u94fe\u63a5\u7ec4\u4ef6\uff0c\u70b9\u51fb\u540e\u5f39\u51fa\u6587\u4ef6\u9884\u89c8\u5f39\u7a97\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>id</td>\n<td>OSS \u6587\u4ef6\u7684\u552f\u4e00\u6807\u8bc6\u7b26</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>url</td>\n<td>\u76f4\u63a5\u6307\u5b9a\u6587\u4ef6\u7684\u8bbf\u95ee\u5730\u5740</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>originName</td>\n<td>\u6587\u4ef6\u539f\u59cb\u540d\u79f0</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>title</td>\n<td>\u9884\u89c8\u5f39\u7a97\u6807\u9898</td>\n<td>string \| ReactNode</td>\n<td>\u5426</td>\n<td>originName</td>\n</tr>\n<tr>\n<td>apis</td>\n<td>OSS \u63a5\u53e3\u914d\u7f6e\uff0c\u5305\u542b <code>oss</code> \u5c5e\u6027</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>openDownload</td>\n<td>\u662f\u5426\u542f\u7528\u4e0b\u8f7d\u529f\u80fd</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>true</td>\n</tr>\n<tr>\n<td>modalProps</td>\n<td>Modal \u7ec4\u4ef6\u7684\u989d\u5916\u5c5e\u6027</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u94fe\u63a5\u6587\u5b57\u5185\u5bb9\uff0c\u4e0d\u4f20\u5219\u663e\u793a <code>originName</code></td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>originName</td>\n</tr>\n</tbody>\n</table>\n<p><strong>\u6ce8\u610f</strong>\uff1a<code>id</code> \u548c <code>url</code> \u81f3\u5c11\u9700\u8981\u4f20\u5165\u5176\u4e2d\u4e00\u4e2a\u3002</p>\n<h3>downloadBlobFile \u51fd\u6570</h3>\n<p>\u4e0b\u8f7d\u6587\u4ef6\u7684\u5de5\u5177\u51fd\u6570\u3002</p>\n<h4>\u51fd\u6570\u7b7e\u540d</h4>\n<pre><code class="language-typescript">downloadBlobFile(target: string \| Blob, filename: string): void\n</code></pre>\n<h4>\u53c2\u6570\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u53c2\u6570\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>target</td>\n<td>\u6587\u4ef6\u4e0b\u8f7d\u5730\u5740\u6216\u4e8c\u8fdb\u5236\u6570\u636e\uff08Blob\uff09</td>\n<td>string \| Blob</td>\n<td>\u662f</td>\n</tr>\n<tr>\n<td>filename</td>\n<td>\u4e0b\u8f7d\u540e\u7684\u6587\u4ef6\u540d</td>\n<td>string</td>\n<td>\u662f</td>\n</tr>\n</tbody>\n</table>\n<h3>useDownload Hook</h3>\n<p>\u751f\u6210\u4e0b\u8f7d\u51fd\u6570\u5e76\u7ba1\u7406\u4e0b\u8f7d\u72b6\u6001\u7684 Hook\u3002</p>\n<h4>Hook \u8fd4\u56de\u503c</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>download</td>\n<td>\u6267\u884c\u4e0b\u8f7d\u7684\u51fd\u6570</td>\n<td>function</td>\n</tr>\n<tr>\n<td>isLoading</td>\n<td>\u662f\u5426\u6b63\u5728\u4e0b\u8f7d</td>\n<td>boolean</td>\n</tr>\n<tr>\n<td>others</td>\n<td>\u5176\u4ed6 useFetch \u8fd4\u56de\u7684\u5c5e\u6027</td>\n<td>object</td>\n</tr>\n</tbody>\n</table>\n<h4>Hook \u53c2\u6570</h4>\n<table>\n<thead>\n<tr>\n<th>\u53c2\u6570\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>id</td>\n<td>OSS \u6587\u4ef6\u7684\u552f\u4e00\u6807\u8bc6\u7b26</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>url</td>\n<td>\u76f4\u63a5\u6307\u5b9a\u6587\u4ef6\u7684\u4e0b\u8f7d\u5730\u5740</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>filename</td>\n<td>\u4e0b\u8f7d\u540e\u7684\u6587\u4ef6\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>apis</td>\n<td>OSS \u63a5\u53e3\u914d\u7f6e\uff0c\u5305\u542b <code>oss</code> \u5c5e\u6027</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onSuccess</td>\n<td>\u4e0b\u8f7d\u6210\u529f\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onError</td>\n<td>\u4e0b\u8f7d\u5931\u8d25\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<p><strong>\u6ce8\u610f</strong>\uff1a<code>id</code> \u548c <code>url</code> \u81f3\u5c11\u9700\u8981\u4f20\u5165\u5176\u4e2d\u4e00\u4e2a\u3002</p>\n<h3>useFileModal Hook</h3>\n<p>\u751f\u6210\u6587\u4ef6\u9884\u89c8\u5f39\u7a97\u51fd\u6570\u7684 Hook\u3002</p>\n<h4>Hook \u8fd4\u56de\u503c</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>modal</td>\n<td>\u6253\u5f00\u6587\u4ef6\u9884\u89c8\u5f39\u7a97\u7684\u51fd\u6570</td>\n<td>function</td>\n</tr>\n</tbody>\n</table>\n<h4>modal \u51fd\u6570\u53c2\u6570</h4>\n<table>\n<thead>\n<tr>\n<th>\u53c2\u6570\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>id</td>\n<td>OSS \u6587\u4ef6\u7684\u552f\u4e00\u6807\u8bc6\u7b26</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>url</td>\n<td>\u76f4\u63a5\u6307\u5b9a\u6587\u4ef6\u7684\u8bbf\u95ee\u5730\u5740</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>originName</td>\n<td>\u6587\u4ef6\u539f\u59cb\u540d\u79f0</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>title</td>\n<td>\u9884\u89c8\u5f39\u7a97\u6807\u9898</td>\n<td>string \| ReactNode</td>\n<td>\u5426</td>\n<td>originName</td>\n</tr>\n<tr>\n<td>apis</td>\n<td>OSS \u63a5\u53e3\u914d\u7f6e\uff0c\u5305\u542b <code>oss</code> \u5c5e\u6027</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>openDownload</td>\n<td>\u662f\u5426\u542f\u7528\u4e0b\u8f7d\u529f\u80fd</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>true</td>\n</tr>\n<tr>\n<td>modalProps</td>\n<td>Modal \u7ec4\u4ef6\u7684\u989d\u5916\u5c5e\u6027</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<p><strong>\u6ce8\u610f</strong>\uff1a<code>id</code> \u548c <code>url</code> \u81f3\u5c11\u9700\u8981\u4f20\u5165\u5176\u4e2d\u4e00\u4e2a\u3002</p>\n<h3>FileButton \u7ec4\u4ef6</h3>\n<p>\u6587\u4ef6\u6309\u94ae\u7ec4\u4ef6\uff0c\u70b9\u51fb\u540e\u5f39\u51fa\u6587\u4ef6\u9884\u89c8\u5f39\u7a97\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>id</td>\n<td>OSS \u6587\u4ef6\u7684\u552f\u4e00\u6807\u8bc6\u7b26</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>url</td>\n<td>\u76f4\u63a5\u6307\u5b9a\u6587\u4ef6\u7684\u8bbf\u95ee\u5730\u5740</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>originName</td>\n<td>\u6587\u4ef6\u539f\u59cb\u540d\u79f0</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>title</td>\n<td>\u9884\u89c8\u5f39\u7a97\u6807\u9898</td>\n<td>string \| ReactNode</td>\n<td>\u5426</td>\n<td>originName</td>\n</tr>\n<tr>\n<td>apis</td>\n<td>OSS \u63a5\u53e3\u914d\u7f6e\uff0c\u5305\u542b <code>oss</code> \u5c5e\u6027</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>openDownload</td>\n<td>\u662f\u5426\u542f\u7528\u4e0b\u8f7d\u529f\u80fd</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>true</td>\n</tr>\n<tr>\n<td>modalProps</td>\n<td>Modal \u7ec4\u4ef6\u7684\u989d\u5916\u5c5e\u6027</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>type</td>\n<td>\u6309\u94ae\u7c7b\u578b</td>\n<td>string</td>\n<td>\u5426</td>\n<td>default</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u6309\u94ae\u5185\u5bb9</td>\n<td>ReactNode</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<p><strong>\u6ce8\u610f</strong>\uff1a<code>id</code> \u548c <code>url</code> \u81f3\u5c11\u9700\u8981\u4f20\u5165\u5176\u4e2d\u4e00\u4e2a\u3002</p>',example:{isFull:!1,className:"",style:"",list:[{title:"\u83b7\u53d6\u6587\u4ef6\u5730\u5740",description:"\u901a\u8fc7 OSS ID \u83b7\u53d6\u6587\u4ef6\u8bbf\u95ee\u5730\u5740\uff0c\u5c55\u793a\u5458\u5de5\u5934\u50cf\u548c\u516c\u53f8 Logo \u5730\u5740\u83b7\u53d6",code:'const { default: File } = _File;\nconst { PureGlobal } = global;\nconst { getPublicPath } = remoteLoader;\nconst { Typography, Card, Space, Alert } = antd;\n\nconst { Paragraph, Text } = Typography;\n\nconst BaseExample = () => {\n return (\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Alert\n message="\u6587\u4ef6\u5730\u5740\u83b7\u53d6\u793a\u4f8b"\n description="\u6f14\u793a\u5982\u4f55\u901a\u8fc7 OSS ID \u83b7\u53d6\u6587\u4ef6\u8bbf\u95ee\u5730\u5740"\n type="info"\n showIcon\n />\n\n <Card title="\u5458\u5de5\u5934\u50cf\u5730\u5740">\n <File id="employee-avatar-001">\n {({ url, isLoading }) => (\n <Space direction="vertical">\n <Text strong>\u8bbf\u95ee\u5730\u5740\uff1a</Text>\n <Paragraph copyable>\n {isLoading ? \'\u52a0\u8f7d\u4e2d...\' : url}\n </Paragraph>\n </Space>\n )}\n </File>\n </Card>\n\n <Card title="\u516c\u53f8 Logo \u5730\u5740">\n <File id="company-logo-main">\n {({ url, isLoading }) => (\n <Space direction="vertical">\n <Text strong>\u8bbf\u95ee\u5730\u5740\uff1a</Text>\n <Paragraph copyable>\n {isLoading ? \'\u52a0\u8f7d\u4e2d...\' : url}\n </Paragraph>\n </Space>\n )}\n </File>\n </Card>\n </Space>\n );\n};\n\nrender(\n <PureGlobal\n preset={{\n apis: {\n file: {\n getUrl: {\n loader: async ({ params }) => {\n const mapping = {\n "employee-avatar-001": "/avatar.png",\n "company-logo-main": "/mock/resume.pdf"\n };\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(getPublicPath("components-core") + mapping[params.id] \|\| "");\n }, 500);\n });\n },\n },\n },\n },\n }}\n >\n <BaseExample />\n </PureGlobal>\n);\n\n',scope:[{name:"_File",packageName:"@components/File",component:a},{name:"global",packageName:"@components/Global",component:d},{name:"remoteLoader",packageName:"@kne/remote-loader",component:o},{name:"antd",packageName:"antd",component:r}]},{title:"\u6587\u4ef6\u4e0b\u8f7d",description:"\u5c55\u793a\u4e0d\u540c\u7c7b\u578b\u6587\u4ef6\u7684\u4e0b\u8f7d\u529f\u80fd\uff0c\u5305\u62ec\u6210\u529f\u548c\u5931\u8d25\u56de\u8c03\uff0c\u4eba\u529b\u8d44\u6e90\u76f8\u5173\u6587\u6863\u4e0b\u8f7d",code:'const { Download } = _File;\nconst { PureGlobal } = global;\nconst { getPublicPath } = remoteLoader;\nconst { Space, Card, Alert, Typography, message } = antd;\n\nconst { Title, Text } = Typography;\n\nconst BaseExample = () => {\n return (\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Alert\n message="\u6587\u4ef6\u4e0b\u8f7d\u793a\u4f8b"\n description="\u6f14\u793a\u4e0d\u540c\u7c7b\u578b\u6587\u4ef6\u7684\u4e0b\u8f7d\u529f\u80fd\uff0c\u5305\u62ec\u6210\u529f\u548c\u5931\u8d25\u56de\u8c03"\n type="info"\n showIcon\n />\n\n <Card title="\u4eba\u529b\u8d44\u6e90\u76f8\u5173\u6587\u6863\u4e0b\u8f7d">\n <Space direction="vertical">\n <div>\n <Text type="secondary">\u5458\u5de5\u5165\u804c\u624b\u518c\uff1a</Text>\n <br />\n <Download\n id="doc-employee-handbook"\n filename="\u5458\u5de5\u5165\u804c\u624b\u518c.pdf"\n onSuccess={() => message.success(\'\u5458\u5de5\u5165\u804c\u624b\u518c\u4e0b\u8f7d\u6210\u529f\')}\n onError={() => message.error(\'\u6587\u4ef6\u4e0b\u8f7d\u5931\u8d25\')}\n >\n \u70b9\u51fb\u4e0b\u8f7d\n </Download>\n </div>\n\n <div>\n <Text type="secondary">\u516c\u53f8\u89c4\u7ae0\u5236\u5ea6\uff1a</Text>\n <br />\n <Download\n id="doc-company-rules"\n filename="\u516c\u53f8\u89c4\u7ae0\u5236\u5ea6.docx"\n onSuccess={() => message.success(\'\u516c\u53f8\u89c4\u7ae0\u5236\u5ea6\u4e0b\u8f7d\u6210\u529f\')}\n >\n \u70b9\u51fb\u4e0b\u8f7d\n </Download>\n </div>\n\n <div>\n <Text type="secondary">\u85aa\u916c\u798f\u5229\u653f\u7b56\uff1a</Text>\n <br />\n <Download\n id="doc-salary-policy"\n filename="\u85aa\u916c\u798f\u5229\u653f\u7b56.pdf"\n onSuccess={() => message.success(\'\u85aa\u916c\u798f\u5229\u653f\u7b56\u4e0b\u8f7d\u6210\u529f\')}\n >\n \u70b9\u51fb\u4e0b\u8f7d\n </Download>\n </div>\n </Space>\n </Card>\n </Space>\n );\n};\n\nrender(\n <PureGlobal\n preset={{\n apis: {\n file: {\n getUrl: {\n loader: async ({ params }) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(getPublicPath("components-core") + "/avatar.png");\n }, 800);\n });\n },\n },\n },\n },\n }}\n >\n <BaseExample />\n </PureGlobal>\n);\n\n',scope:[{name:"_File",packageName:"@components/File",component:a},{name:"global",packageName:"@components/Global",component:d},{name:"remoteLoader",packageName:"@kne/remote-loader",component:o},{name:"antd",packageName:"antd",component:r}]},{title:"\u6587\u4ef6\u5217\u8868",description:"\u5c55\u793a\u6587\u4ef6\u5217\u8868\u7ec4\u4ef6\uff0c\u652f\u6301\u4e0a\u4f20\u72b6\u6001\u3001\u6587\u4ef6\u4fe1\u606f\u5c55\u793a\u3001\u7f16\u8f91\u3001\u9884\u89c8\u3001\u5220\u9664\u7b49\u64cd\u4f5c\uff0c\u9879\u76ee\u6587\u6863\u5e93\u548c\u5458\u5de5\u7b80\u5386\u573a\u666f",code:'const { List } = _FileList;\nconst { Space, Card, Alert, Typography } = antd;\nconst { PureGlobal } = global;\nconst { getPublicPath } = remoteLoader;\n\nconst { Title } = Typography;\n\nconst BaseExample = () => {\n return (\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Alert\n message="\u6587\u4ef6\u5217\u8868\u793a\u4f8b"\n description="\u5c55\u793a\u6587\u4ef6\u4e0a\u4f20\u72b6\u6001\u3001\u6587\u4ef6\u4fe1\u606f\u53ca\u64cd\u4f5c\u529f\u80fd"\n type="info"\n showIcon\n />\n\n <Card title="\u9879\u76ee\u6587\u6863\u5e93">\n <List\n dataSource={[\n {\n uuid: "upload-001",\n type: "uploading",\n filename: "\u9879\u76ee\u9700\u6c42\u89c4\u683c\u8bf4\u660e\u4e66.docx",\n },\n {\n id: "doc-project-plan",\n filename: "\u9879\u76ee\u6267\u884c\u8ba1\u5212.pdf",\n date: "2024-01-15T10:30:00.000+08:00",\n userName: "\u5f20\u4e09",\n },\n {\n id: "doc-technical-design",\n filename: "\u6280\u672f\u67b6\u6784\u8bbe\u8ba1\u6587\u6863.pdf",\n date: "2024-01-16T14:20:00.000+08:00",\n userName: "\u674e\u56db",\n },\n {\n id: "doc-api-interface",\n filename: "API \u63a5\u53e3\u6587\u6863.md",\n date: "2024-01-17T09:15:00.000+08:00",\n userName: "\u738b\u4e94",\n },\n ]}\n apis={{\n onEdit: async (formData, itemData) => {\n console.log(\'\u7f16\u8f91\u6587\u4ef6:\', formData, itemData);\n },\n onDelete: async (itemData) => {\n console.log(\'\u5220\u9664\u6587\u4ef6:\', itemData);\n },\n onPreview: async (itemData) => {\n console.log(\'\u9884\u89c8\u6587\u4ef6:\', itemData);\n },\n }}\n />\n </Card>\n\n <Card title="\u5458\u5de5\u7b80\u5386\u4e0a\u4f20">\n <List\n dataSource={[\n {\n id: "resume-zhangsan",\n filename: "\u5f20\u4e09-\u9ad8\u7ea7\u524d\u7aef\u5de5\u7a0b\u5e08-\u7b80\u5386.pdf",\n date: "2024-01-18T16:45:00.000+08:00",\n userName: "\u5f20\u4e09",\n },\n {\n id: "resume-lisi",\n filename: "\u674e\u56db-\u4ea7\u54c1\u7ecf\u7406-\u7b80\u5386.doc",\n date: "2024-01-19T11:20:00.000+08:00",\n userName: "\u674e\u56db",\n },\n ]}\n apis={{\n onEdit: async (formData, itemData) => {\n console.log(\'\u7f16\u8f91\u7b80\u5386:\', formData, itemData);\n },\n onDelete: async (itemData) => {\n console.log(\'\u5220\u9664\u7b80\u5386:\', itemData);\n },\n onPreview: async (itemData) => {\n console.log(\'\u9884\u89c8\u7b80\u5386:\', itemData);\n },\n }}\n />\n </Card>\n </Space>\n );\n};\n\nrender(\n <PureGlobal\n preset={{\n apis: {\n file: {\n getUrl: {\n loader: async ({ params }) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(getPublicPath("components-core") + "/mock/resume.pdf");\n }, 600);\n });\n },\n },\n },\n },\n }}\n >\n <BaseExample />\n </PureGlobal>\n);\n\n',scope:[{name:"_File",packageName:"@components/File",component:a},{name:"global",packageName:"@components/Global",component:d},{name:"remoteLoader",packageName:"@kne/remote-loader",component:o},{name:"antd",packageName:"antd",component:r}]},{title:"\u6587\u4ef6\u94fe\u63a5",description:"\u5c55\u793a FileLink \u548c useFileModal \u7684\u4f7f\u7528\uff0c\u5408\u540c\u6587\u6863\u3001\u8d22\u52a1\u53d1\u7968\u3001\u653f\u7b56\u6587\u6863\u9884\u89c8",code:'const { FileLink, useFileModal } = _File;\nconst { getPublicPath } = remoteLoader;\nconst { PureGlobal } = global;\nconst { Space, Card, Alert, Typography, Button, Descriptions } = antd;\n\nconst { Title, Text } = Typography;\n\nconst CustomPreviewButton = ({ children, ...props }) => {\n const modal = useFileModal(props);\n return (\n <Button type="primary" onClick={() => modal()}>\n {props.originName \|\| children}\n </Button>\n );\n};\n\nconst BaseExample = () => {\n return (\n <PureGlobal\n preset={{\n apis: {\n file: {\n getUrl: {\n loader: async ({ params }) => {\n const mapping = {\n "contract-001": "/avatar.png",\n "contract-002": "/mock/resume.pdf",\n "invoice-001": "/avatar.png",\n "policy-001": "/mock/resume.pdf",\n };\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(getPublicPath("components-core") + (mapping[params.id] \|\| ""));\n }, 500);\n });\n },\n },\n },\n },\n }}\n >\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Alert\n message="\u6587\u4ef6\u94fe\u63a5\u793a\u4f8b"\n description="\u5c55\u793a FileLink \u548c useFileModal \u7684\u4f7f\u7528\u65b9\u5f0f"\n type="info"\n showIcon\n />\n\n <Card title="\u5408\u540c\u6587\u6863\uff08FileLink\uff09">\n <Space direction="vertical">\n <FileLink\n id="contract-001"\n originName="\u5458\u5de5\u52b3\u52a8\u5408\u540c.pdf"\n />\n <FileLink\n id="contract-002"\n originName="\u4fdd\u5bc6\u534f\u8bae.docx"\n />\n </Space>\n </Card>\n\n <Card title="\u8d22\u52a1\u53d1\u7968\uff08\u4f7f\u7528 useFileModal \u81ea\u5b9a\u4e49\u6309\u94ae\uff09">\n <Descriptions column={1} size="small">\n <Descriptions.Item label="\u53d1\u7968\u7f16\u53f7">INV-2024-0001</Descriptions.Item>\n <Descriptions.Item label="\u5f00\u7968\u65e5\u671f">2024-01-20</Descriptions.Item>\n <Descriptions.Item label="\u53d1\u7968\u7c7b\u578b">\u589e\u503c\u7a0e\u4e13\u7528\u53d1\u7968</Descriptions.Item>\n </Descriptions>\n <div style={{ marginTop: 16 }}>\n <CustomPreviewButton\n id="invoice-001"\n originName="\u67e5\u770b\u53d1\u7968\u8be6\u60c5"\n />\n </div>\n </Card>\n\n <Card title="\u653f\u7b56\u6587\u6863">\n <Space direction="vertical">\n <Text type="secondary">\u70b9\u51fb\u4e0b\u65b9\u94fe\u63a5\u9884\u89c8\u516c\u53f8\u653f\u7b56\u6587\u6863\uff1a</Text>\n <FileLink\n id="policy-001"\n originName="2024\u5e74\u5ea6\u7ee9\u6548\u8003\u6838\u7ba1\u7406\u529e\u6cd5.pdf"\n />\n </Space>\n </Card>\n </Space>\n </PureGlobal>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_File",packageName:"@components/File",component:a},{name:"remoteLoader",packageName:"@kne/remote-loader",component:o},{name:"global",packageName:"@components/Global",component:d},{name:"antd",packageName:"antd",component:r}]}]}}},20031(n,t,e){e.d(t,{A:()=>l});var a=e(24474),d=e(13050),o=e(65317),r=e(55199);const l={name:"FileList",summary:"<p>FileList \u7ec4\u4ef6\u63d0\u4f9b\u4e86\u4e00\u5957\u5b8c\u6574\u7684\u6587\u4ef6\u7ba1\u7406\u89e3\u51b3\u65b9\u6848\uff0c\u96c6\u6210\u4e86\u6587\u4ef6\u5217\u8868\u5c55\u793a\u3001\u6587\u4ef6\u9884\u89c8\u3001\u6587\u4ef6\u4e0a\u4f20\u7b49\u529f\u80fd\u3002</p>\n<p>\u8be5\u7ec4\u4ef6\u652f\u6301\u62d6\u62fd\u4e0a\u4f20\u3001\u70b9\u51fb\u4e0a\u4f20\u4e24\u79cd\u65b9\u5f0f\uff0c\u63d0\u4f9b\u4e86\u5217\u8868\u548c\u9884\u89c8\u4e24\u79cd\u89c6\u56fe\u6a21\u5f0f\u3002\u5217\u8868\u89c6\u56fe\u5c55\u793a\u6587\u4ef6\u8be6\u7ec6\u4fe1\u606f\u5e76\u652f\u6301\u7f16\u8f91\u3001\u5220\u9664\u3001\u9884\u89c8\u7b49\u64cd\u4f5c\uff0c\u9884\u89c8\u89c6\u56fe\u76f4\u63a5\u5c55\u793a\u6587\u4ef6\u5185\u5bb9\u3002\u7ec4\u4ef6\u5185\u7f6e\u4e86\u6587\u4ef6\u7c7b\u578b\u8bc6\u522b\u3001\u4e0a\u4f20\u8fdb\u5ea6\u7ba1\u7406\u3001\u6743\u9650\u63a7\u5236\u7b49\u529f\u80fd\uff0c\u53ef\u4ee5\u8f7b\u677e\u96c6\u6210\u5230\u5404\u79cd\u4e1a\u52a1\u573a\u666f\u4e2d\u3002</p>\n<p>\u6838\u5fc3\u7279\u6027\uff1a</p>\n<ul>\n<li><strong>\u591a\u89c6\u56fe\u6a21\u5f0f</strong>\uff1a\u652f\u6301\u5217\u8868\u89c6\u56fe\u548c\u9884\u89c8\u89c6\u56fe\u5207\u6362\uff0c\u6ee1\u8db3\u4e0d\u540c\u4f7f\u7528\u9700\u6c42</li>\n<li><strong>\u62d6\u62fd\u4e0a\u4f20</strong>\uff1a\u652f\u6301\u62d6\u62fd\u6587\u4ef6\u5230\u6307\u5b9a\u533a\u57df\u8fdb\u884c\u4e0a\u4f20\uff0c\u63d0\u5347\u7528\u6237\u4f53\u9a8c</li>\n<li><strong>\u6587\u4ef6\u9884\u89c8</strong>\uff1a\u5185\u7f6e\u9884\u89c8\u529f\u80fd\uff0c\u652f\u6301\u591a\u79cd\u6587\u4ef6\u683c\u5f0f\u7684\u5728\u7ebf\u9884\u89c8</li>\n<li><strong>\u6743\u9650\u63a7\u5236</strong>\uff1a\u652f\u6301\u7ec6\u7c92\u5ea6\u7684\u6743\u9650\u63a7\u5236\uff0c\u53ef\u63a7\u5236\u6dfb\u52a0\u3001\u7f16\u8f91\u3001\u5220\u9664\u3001\u9884\u89c8\u7b49\u64cd\u4f5c</li>\n<li><strong>\u7075\u6d3b\u914d\u7f6e</strong>\uff1a\u652f\u6301\u81ea\u5b9a\u4e49\u6587\u4ef6\u7c7b\u578b\u3001\u6587\u4ef6\u5927\u5c0f\u9650\u5236\u3001\u6700\u5927\u4e0a\u4f20\u6570\u91cf\u7b49\u53c2\u6570</li>\n<li><strong>\u53d7\u63a7/\u975e\u53d7\u63a7</strong>\uff1a\u540c\u65f6\u652f\u6301\u53d7\u63a7\u548c\u975e\u53d7\u63a7\u6a21\u5f0f\uff0c\u9002\u5e94\u4e0d\u540c\u7684\u4f7f\u7528\u573a\u666f</li>\n</ul>\n<p>\u9002\u7528\u4e8e\u6587\u6863\u7ba1\u7406\u7cfb\u7edf\u3001\u4eba\u529b\u8d44\u6e90\u7cfb\u7edf\u3001\u9879\u76ee\u7ba1\u7406\u5de5\u5177\u7b49\u9700\u8981\u6587\u4ef6\u5904\u7406\u7684\u5e94\u7528\u573a\u666f\u3002</p>",api:'<h3>FileList \u7ec4\u4ef6</h3>\n<p>\u6587\u4ef6\u5217\u8868\u7ec4\u4ef6\uff0c\u63d0\u4f9b\u6587\u4ef6\u5c55\u793a\u3001\u9884\u89c8\u3001\u4e0a\u4f20\u7b49\u5b8c\u6574\u529f\u80fd\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>list</td>\n<td>\u6587\u4ef6\u5217\u8868\u6570\u636e</td>\n<td>array</td>\n<td>\u5426</td>\n<td>[]</td>\n</tr>\n<tr>\n<td>setList</td>\n<td>\u66f4\u65b0\u6587\u4ef6\u5217\u8868\u7684\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultPreviewFileId</td>\n<td>\u9ed8\u8ba4\u9884\u89c8\u7684\u6587\u4ef6 ID</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultTab</td>\n<td>\u9ed8\u8ba4\u663e\u793a\u7684\u6807\u7b7e\u9875\uff0c\u53ef\u9009\u503c\u4e3a <code>"list"</code> \u6216 <code>"preview"</code></td>\n<td>string</td>\n<td>\u5426</td>\n<td><code>"list"</code></td>\n</tr>\n<tr>\n<td>maxLength</td>\n<td>\u6700\u5927\u6587\u4ef6\u6570\u91cf</td>\n<td>number</td>\n<td>\u5426</td>\n<td>Number.MAX_VALUE</td>\n</tr>\n<tr>\n<td>fileSize</td>\n<td>\u5355\u4e2a\u6587\u4ef6\u6700\u5927\u5927\u5c0f\uff08MB\uff09</td>\n<td>number</td>\n<td>\u5426</td>\n<td>20</td>\n</tr>\n<tr>\n<td>accept</td>\n<td>\u5141\u8bb8\u4e0a\u4f20\u7684\u6587\u4ef6\u7c7b\u578b\u6570\u7ec4</td>\n<td>array<string></td>\n<td>\u5426</td>\n<td><code>[".png", ".jpg", ".pdf", ".docx", ".doc"]</code></td>\n</tr>\n<tr>\n<td>getPermission</td>\n<td>\u6743\u9650\u63a7\u5236\u51fd\u6570\uff0c\u63a5\u6536\u53c2\u6570 <code>(type, itemData)</code>\uff0c\u8fd4\u56de <code>false</code> \u8868\u793a\u65e0\u6743\u9650</td>\n<td>function</td>\n<td>\u5426</td>\n<td><code>() => true</code></td>\n</tr>\n<tr>\n<td>infoItemRenders</td>\n<td>\u81ea\u5b9a\u4e49\u5217\u6e32\u67d3\u914d\u7f6e</td>\n<td>array</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>apis</td>\n<td>\u64cd\u4f5c API \u914d\u7f6e</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>apis.onSave</td>\n<td>\u4fdd\u5b58\u6587\u4ef6\u56de\u8c03\uff0c\u63a5\u6536\u53c2\u6570 <code>(response, ...args)</code></td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>apis.onEdit</td>\n<td>\u7f16\u8f91\u6587\u4ef6\u540d\u79f0\u56de\u8c03\uff0c\u63a5\u6536\u53c2\u6570 <code>({formData, item})</code></td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>apis.onPreview</td>\n<td>\u9884\u89c8\u6587\u4ef6\u56de\u8c03\uff0c\u63a5\u6536\u53c2\u6570 <code>(item)</code></td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>apis.onDelete</td>\n<td>\u5220\u9664\u6587\u4ef6\u56de\u8c03\uff0c\u63a5\u6536\u53c2\u6570 <code>(item)</code></td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>apis.onUpload</td>\n<td>\u6587\u4ef6\u4e0a\u4f20\u56de\u8c03</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>titleExtra</td>\n<td>\u6807\u9898\u989d\u5916\u5185\u5bb9\uff0c\u53ef\u4ee5\u662f ReactNode \u6216\u51fd\u6570</td>\n<td>ReactNode \| function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>getPopupContainer</td>\n<td>\u6307\u5b9a\u4e0b\u62c9\u83dc\u5355\u6302\u8f7d\u7684\u7236\u8282\u70b9</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<p><strong>\u6ce8\u610f</strong>\uff1a\u4f7f\u7528\u53d7\u63a7\u6a21\u5f0f\u65f6\u9700\u8981\u540c\u65f6\u63d0\u4f9b <code>list</code> \u548c <code>setList</code> \u5c5e\u6027\u3002</p>\n<h4>list \u6570\u636e\u7ed3\u6784</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>id</td>\n<td>\u6587\u4ef6\u552f\u4e00\u6807\u8bc6\u7b26</td>\n<td>string</td>\n</tr>\n<tr>\n<td>ossId</td>\n<td>OSS \u6587\u4ef6\u6807\u8bc6\u7b26</td>\n<td>string</td>\n</tr>\n<tr>\n<td>filename</td>\n<td>\u6587\u4ef6\u540d\u79f0</td>\n<td>string</td>\n</tr>\n<tr>\n<td>date</td>\n<td>\u4e0a\u4f20\u65e5\u671f\uff08\u65f6\u95f4\u6233\u6216 Date \u5bf9\u8c61\uff09</td>\n<td>Date \| string</td>\n</tr>\n<tr>\n<td>userName</td>\n<td>\u4e0a\u4f20\u4eba\u59d3\u540d</td>\n<td>string</td>\n</tr>\n</tbody>\n</table>\n<h3>FileUpload \u7ec4\u4ef6</h3>\n<p>\u7b80\u5316\u7684\u6587\u4ef6\u4e0a\u4f20\u7ec4\u4ef6\uff0c\u4e13\u6ce8\u4e8e\u6587\u4ef6\u4e0a\u4f20\u548c\u5217\u8868\u5c55\u793a\u529f\u80fd\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>list</td>\n<td>\u6587\u4ef6\u5217\u8868\u6570\u636e</td>\n<td>array</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultList</td>\n<td>\u9ed8\u8ba4\u6587\u4ef6\u5217\u8868\u6570\u636e</td>\n<td>array</td>\n<td>\u5426</td>\n<td>[]</td>\n</tr>\n<tr>\n<td>setList</td>\n<td>\u66f4\u65b0\u6587\u4ef6\u5217\u8868\u7684\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>maxLength</td>\n<td>\u6700\u5927\u6587\u4ef6\u6570\u91cf</td>\n<td>number</td>\n<td>\u5426</td>\n<td>Number.MAX_VALUE</td>\n</tr>\n<tr>\n<td>fileSize</td>\n<td>\u5355\u4e2a\u6587\u4ef6\u6700\u5927\u5927\u5c0f\uff08MB\uff09</td>\n<td>number</td>\n<td>\u5426</td>\n<td>20</td>\n</tr>\n<tr>\n<td>accept</td>\n<td>\u5141\u8bb8\u4e0a\u4f20\u7684\u6587\u4ef6\u7c7b\u578b\u6570\u7ec4</td>\n<td>array<string></td>\n<td>\u5426</td>\n<td><code>[".png", ".jpg", ".pdf", ".docx", ".doc"]</code></td>\n</tr>\n<tr>\n<td>getPermission</td>\n<td>\u6743\u9650\u63a7\u5236\u51fd\u6570\uff0c\u63a5\u6536\u53c2\u6570 <code>(type, itemData)</code>\uff0c\u8fd4\u56de <code>false</code> \u8868\u793a\u65e0\u6743\u9650</td>\n<td>function</td>\n<td>\u5426</td>\n<td><code>() => true</code></td>\n</tr>\n<tr>\n<td>apis</td>\n<td>\u64cd\u4f5c API \u914d\u7f6e</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>apis.onSave</td>\n<td>\u4fdd\u5b58\u6587\u4ef6\u56de\u8c03</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>apis.onEdit</td>\n<td>\u7f16\u8f91\u6587\u4ef6\u540d\u79f0\u56de\u8c03</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>apis.onPreview</td>\n<td>\u9884\u89c8\u6587\u4ef6\u56de\u8c03</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>apis.onDelete</td>\n<td>\u5220\u9664\u6587\u4ef6\u56de\u8c03</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>DragArea \u7ec4\u4ef6</h3>\n<p>\u62d6\u62fd\u4e0a\u4f20\u533a\u57df\u7ec4\u4ef6\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>\u62d6\u62fd\u533a\u57df\u5185\u663e\u793a\u7684\u5185\u5bb9</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td><code><UploadTips /></code></td>\n</tr>\n<tr>\n<td>className</td>\n<td>\u81ea\u5b9a\u4e49\u7c7b\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>DragAreaOuter \u7ec4\u4ef6</h3>\n<p>\u62d6\u62fd\u4e0a\u4f20\u533a\u57df\u5916\u5c42\u5bb9\u5668\u7ec4\u4ef6\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>title</td>\n<td>\u6807\u9898\u5185\u5bb9</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u5b50\u5185\u5bb9</td>\n<td>ReactNode</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>accept</td>\n<td>\u5141\u8bb8\u4e0a\u4f20\u7684\u6587\u4ef6\u7c7b\u578b\u6570\u7ec4</td>\n<td>array<string></td>\n<td>\u5426</td>\n<td><code>[".png", ".jpg", ".pdf", ".docx", ".doc"]</code></td>\n</tr>\n<tr>\n<td>fileSize</td>\n<td>\u5355\u4e2a\u6587\u4ef6\u6700\u5927\u5927\u5c0f\uff08MB\uff09</td>\n<td>number</td>\n<td>\u5426</td>\n<td>20</td>\n</tr>\n<tr>\n<td>maxLength</td>\n<td>\u6700\u5927\u6587\u4ef6\u6570\u91cf</td>\n<td>number</td>\n<td>\u5426</td>\n<td>Number.MAX_VALUE</td>\n</tr>\n<tr>\n<td>onFileSelected</td>\n<td>\u6587\u4ef6\u9009\u62e9\u56de\u8c03\uff0c\u63a5\u6536\u53c2\u6570 <code>(fileList)</code></td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultOpen</td>\n<td>\u9ed8\u8ba4\u662f\u5426\u6253\u5f00\u62d6\u62fd\u533a\u57df</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n<tr>\n<td>className</td>\n<td>\u81ea\u5b9a\u4e49\u7c7b\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>DragButton \u7ec4\u4ef6</h3>\n<p>\u62d6\u62fd\u4e0a\u4f20\u6309\u94ae\u7ec4\u4ef6\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>\u6309\u94ae\u6587\u5b57\u5185\u5bb9</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>UploadButton \u7ec4\u4ef6</h3>\n<p>\u70b9\u51fb\u4e0a\u4f20\u6309\u94ae\u7ec4\u4ef6\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>\u6309\u94ae\u6587\u5b57\u5185\u5bb9</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>UploadTips \u7ec4\u4ef6</h3>\n<p>\u4e0a\u4f20\u63d0\u793a\u7ec4\u4ef6\uff0c\u663e\u793a\u4e0a\u4f20\u8bf4\u660e\u4fe1\u606f\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>icon</td>\n<td>\u81ea\u5b9a\u4e49\u56fe\u6807</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>title</td>\n<td>\u63d0\u793a\u6807\u9898</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>renderTips</td>\n<td>\u81ea\u5b9a\u4e49\u63d0\u793a\u5185\u5bb9\u6e32\u67d3\u51fd\u6570\uff0c\u63a5\u6536\u53c2\u6570 <code>(defaultTips, {fileSize, maxLength, accept})</code></td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>',example:{isFull:!0,className:"",style:"",list:[{title:"\u5b8c\u6574\u793a\u4f8b",description:"\u5c55\u793a\u5b8c\u6574\u7684\u6587\u4ef6\u5217\u8868\u529f\u80fd\uff0c\u5305\u542b\u6587\u4ef6\u5c55\u793a\u3001\u9884\u89c8\u3001\u4e0a\u4f20\u3001\u7f16\u8f91\u3001\u5220\u9664\u7b49\u64cd\u4f5c\uff0c\u5458\u5de5\u7b80\u5386\u3001\u5408\u540c\u3001\u653f\u7b56\u6587\u6863\u573a\u666f",code:'const { default: FileList } = _FileList;\nconst { createWithRemoteLoader, getPublicPath } = remoteLoader;\nconst { useState } = React;\nconst { uniqueId } = lodash;\n\nconst ajax = {\n postForm: (config) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: {\n code: 0,\n data: {\n id: "uBFNeYQBnHRXlZaTGZpA",\n originalName: config.file.name,\n },\n },\n });\n }, 800);\n });\n },\n};\n\nconst apis = {\n onSave: async ({ data }) => {\n return {\n ossId: uniqueId("oss_"),\n filename: data.originalName,\n date: new Date(),\n userName: "\u5f20\u4e09",\n };\n },\n onDelete: (item) => {\n console.log(\'\u5220\u9664\u6587\u4ef6:\', item);\n },\n};\n\nconst preset = {\n apis: {\n file: {\n getUrl: {\n loader: async ({ params }) => {\n const mapping = {\n "resume-zhangsan": "/mock/resume.pdf",\n "contract-employee": "/avatar.png",\n "policy-2024": "/mock/resume.pdf",\n };\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(getPublicPath("components-core") + mapping[params.id] \|\| "");\n }, 100);\n });\n },\n },\n },\n previewOffice: {\n loader: async () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n name: "\u5458\u5de5\u5165\u804c\u767b\u8bb0\u8868.docx",\n data: [\n {\n id: "doc-preview-001",\n originalName: "preview.pdf",\n url: getPublicPath("components-core") + "/mock/resume.pdf",\n },\n ],\n });\n }, 0);\n });\n },\n },\n ossUpload: ({ file }) => {\n return ajax.postForm({ file });\n },\n },\n};\n\nconst BaseExample = createWithRemoteLoader({\n modules: ["components-core:Global@PureGlobal"],\n})(({ remoteModules }) => {\n const [PureGlobal] = remoteModules;\n const [list, setList] = useState([\n {\n id: "resume-zhangsan",\n filename: "\u5f20\u4e09-\u9ad8\u7ea7\u524d\u7aef\u5de5\u7a0b\u5e08-\u7b80\u5386.pdf",\n date: "2024-01-15T10:30:00.000+08:00",\n userName: "\u5f20\u4e09",\n },\n {\n id: "contract-employee",\n filename: "\u52b3\u52a8\u5408\u540c\u6a21\u677f.docx",\n date: "2024-01-16T14:20:00.000+08:00",\n userName: "\u674e\u56db",\n },\n {\n id: "policy-2024",\n filename: "2024\u5e74\u5ea6\u7ee9\u6548\u8003\u6838\u7ba1\u7406\u529e\u6cd5.pdf",\n date: "2024-01-17T09:15:00.000+08:00",\n userName: "\u738b\u4e94",\n },\n ]);\n return (\n <PureGlobal preset={preset}>\n <FileList\n defaultPreviewFileId="resume-zhangsan"\n list={list}\n setList={setList}\n apis={apis}\n titleExtra={({ currentTab, currentPreviewFileId }) => (\n <span style={{ fontSize: \'12px\', color: \'#999\' }}>\n {currentTab === \'preview\' ? \'\u9884\u89c8\u6a21\u5f0f\' : \'\u5217\u8868\u6a21\u5f0f\'}\n {currentPreviewFileId && ` \| \u5f53\u524d: ${list.find(f => f.id === currentPreviewFileId)?.filename}`}\n </span>\n )}\n />\n </PureGlobal>\n );\n});\n\nrender(<BaseExample />);\n\n',scope:[{name:"_FileList",packageName:"@components/FileList",component:a},{name:"remoteLoader",packageName:"@kne/remote-loader",component:d},{name:"lodash",packageName:"lodash",component:o}]},{title:"\u6587\u4ef6\u4e0a\u4f20",description:"\u5c55\u793a\u53d7\u63a7\u548c\u975e\u53d7\u63a7\u6a21\u5f0f\u7684\u6587\u4ef6\u4e0a\u4f20\u529f\u80fd\uff0c\u652f\u6301\u8bbe\u7f6e\u6587\u4ef6\u5927\u5c0f\u548c\u6570\u91cf\u9650\u5236",code:'const { FileUpload } = _FileList;\nconst { createWithRemoteLoader, getPublicPath } = remoteLoader;\nconst { useState } = React;\nconst { uniqueId } = lodash;\nconst { Space, Typography, Alert } = antd;\n\nconst { Text } = Typography;\n\nconst ajax = {\n postForm: (config) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: {\n code: 0,\n data: {\n id: "uBFNeYQBnHRXlZaTGZpA",\n originalName: config.file.name,\n },\n },\n });\n }, 800);\n });\n },\n};\n\nconst apis = {\n onSave: async ({ data }) => {\n return {\n ossId: uniqueId("oss_"),\n filename: data.originalName,\n date: new Date(),\n userName: "\u5f20\u4e09",\n };\n },\n onDelete: (item) => {\n console.log(\'\u5220\u9664\u6587\u4ef6:\', item);\n },\n};\n\nconst preset = {\n apis: {\n file: {\n getUrl: {\n loader: async ({ params }) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(getPublicPath("components-core") + "/avatar.png");\n }, 500);\n });\n },\n },\n },\n ossUpload: ({ file }) => {\n return ajax.postForm({ file });\n },\n },\n};\n\nconst BaseExample = createWithRemoteLoader({\n modules: ["components-core:Global@PureGlobal"],\n})(({ remoteModules }) => {\n const [PureGlobal] = remoteModules;\n const [list, setList] = useState([]);\n const [uncontrolledList, setUncontrolledList] = useState([]);\n\n return (\n <PureGlobal preset={preset}>\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Alert\n message="\u6587\u4ef6\u4e0a\u4f20\u793a\u4f8b"\n description="\u5c55\u793a\u53d7\u63a7\u548c\u975e\u53d7\u63a7\u6a21\u5f0f\u7684\u6587\u4ef6\u4e0a\u4f20\u529f\u80fd"\n type="info"\n showIcon\n />\n\n <div>\n <Text strong>\u53d7\u63a7\u6a21\u5f0f\uff1a</Text>\n <Text type="secondary" style={{ marginLeft: 8 }}>\n \u901a\u8fc7 list \u548c setList \u5b8c\u5168\u63a7\u5236\u6587\u4ef6\u5217\u8868\n </Text>\n <FileUpload\n list={list}\n setList={setList}\n apis={apis}\n fileSize={10}\n maxLength={5}\n />\n <div style={{ marginTop: 8, padding: \'12px\', background: \'#f5f5f5\', borderRadius: \'4px\' }}>\n <Text type="secondary">\u5f53\u524d\u6587\u4ef6\u6570\u91cf\uff1a{list.length}</Text>\n </div>\n </div>\n\n <div>\n <Text strong>\u975e\u53d7\u63a7\u6a21\u5f0f\uff1a</Text>\n <Text type="secondary" style={{ marginLeft: 8 }}>\n \u53ea\u901a\u8fc7 setList \u63a5\u6536\u53d8\u5316\uff0c\u4e0d\u4f20\u5165 list\n </Text>\n <FileUpload\n setList={(fileList) => {\n setUncontrolledList(fileList);\n }}\n apis={apis}\n fileSize={10}\n />\n <div style={{ marginTop: 8, padding: \'12px\', background: \'#f5f5f5\', borderRadius: \'4px\' }}>\n <Text type="secondary">\u5f53\u524d\u6587\u4ef6\u6570\u91cf\uff1a{uncontrolledList.length}</Text>\n </div>\n </div>\n </Space>\n </PureGlobal>\n );\n});\n\nrender(<BaseExample />);\n\n',scope:[{name:"_FileList",packageName:"@components/FileList",component:a},{name:"remoteLoader",packageName:"@kne/remote-loader",component:d},{name:"lodash",packageName:"lodash",component:o},{name:"antd",packageName:"antd",component:r}]},{title:"\u62d6\u62fd\u4e0a\u4f20",description:"\u5c55\u793a\u62d6\u62fd\u4e0a\u4f20\u529f\u80fd\uff0c\u652f\u6301\u81ea\u5b9a\u4e49\u4e0a\u4f20\u63d0\u793a\uff0c\u9879\u76ee\u6587\u6863\u548c\u5458\u5de5\u8d44\u6599\u4e0a\u4f20\u573a\u666f",code:'const { DragArea, DragAreaOuter, UploadButton, DragButton, UploadTips } = _FileList;\nconst { Row, Col, Divider, Space, Typography, Alert, Card, message } = antd;\n\nconst { Text } = Typography;\n\nconst BaseExample = () => {\n return (\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Alert\n message="\u62d6\u62fd\u4e0a\u4f20\u793a\u4f8b"\n description="\u652f\u6301\u62d6\u62fd\u6587\u4ef6\u5230\u6307\u5b9a\u533a\u57df\u8fdb\u884c\u4e0a\u4f20\uff0c\u6216\u4f7f\u7528\u6309\u94ae\u70b9\u51fb\u4e0a\u4f20"\n type="info"\n showIcon\n />\n\n <Card title="\u9879\u76ee\u6587\u6863\u4e0a\u4f20">\n <DragAreaOuter\n title={\n <Row>\n <Col flex={1}>\n <Text strong>\u4e0a\u4f20\u9879\u76ee\u6587\u6863</Text>\n </Col>\n <Col>\n <Space split={<Divider type="vertical" />}>\n <DragButton />\n <UploadButton>\u9009\u62e9\u6587\u4ef6</UploadButton>\n </Space>\n </Col>\n </Row>\n }\n onFileSelected={(fileList) => {\n message.success(`\u5df2\u9009\u62e9 ${fileList.length} \u4e2a\u6587\u4ef6`);\n console.log(\'\u9009\u4e2d\u7684\u6587\u4ef6:\', fileList);\n }}\n fileSize={10}\n maxLength={10}\n >\n <DragArea>\n <UploadTips\n icon={<span style={{ fontSize: \'48px\' }}>\ud83d\udcc1</span>}\n title="\u62d6\u62fd\u6587\u4ef6\u5230\u8fd9\u91cc"\n renderTips={(defaultTips, { fileSize, maxLength }) => (\n <div>\n <div>{defaultTips}</div>\n <Text type="secondary" style={{ fontSize: \'12px\' }}>\n \u652f\u6301\u6279\u91cf\u4e0a\u4f20\uff0c\u6700\u591a {maxLength} \u4e2a\u6587\u4ef6\n </Text>\n </div>\n )}\n />\n </DragArea>\n </DragAreaOuter>\n </Card>\n\n <Card title="\u5458\u5de5\u8d44\u6599\u4e0a\u4f20">\n <DragAreaOuter\n title={\n <Row>\n <Col flex={1}>\n <Text strong>\u4e0a\u4f20\u5458\u5de5\u8d44\u6599</Text>\n </Col>\n <Col>\n <Space split={<Divider type="vertical" />}>\n <DragButton />\n <UploadButton>\u9009\u62e9\u6587\u4ef6</UploadButton>\n </Space>\n </Col>\n </Row>\n }\n onFileSelected={(fileList) => {\n message.success(`\u5df2\u9009\u62e9 ${fileList.length} \u4e2a\u6587\u4ef6`);\n console.log(\'\u9009\u4e2d\u7684\u6587\u4ef6:\', fileList);\n }}\n fileSize={5}\n accept={[\'.pdf\', \'.jpg\', \'.png\', \'.docx\']}\n >\n <DragArea />\n </DragAreaOuter>\n </Card>\n </Space>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_FileList",packageName:"@components/FileList",component:a},{name:"antd",packageName:"antd",component:r}]}]}}},9745(n,t,e){e.d(t,{A:()=>r});var a=e(50196),d=e(13050),o=e(72752);const r={name:"FilePreview",summary:"<p>FilePreview \u662f\u4e00\u4e2a\u529f\u80fd\u5168\u9762\u7684\u6587\u4ef6\u9884\u89c8\u7ec4\u4ef6\u5e93\uff0c\u652f\u6301\u591a\u79cd\u5e38\u89c1\u6587\u4ef6\u683c\u5f0f\u7684\u5728\u7ebf\u9884\u89c8\u3002\u8be5\u7ec4\u4ef6\u57fa\u4e8e @kne/react-file \u5c01\u88c5\uff0c\u63d0\u4f9b\u4e86\u7edf\u4e00\u7684 API \u63a5\u53e3\uff0c\u53ef\u6839\u636e\u6587\u4ef6\u7c7b\u578b\u81ea\u52a8\u9009\u62e9\u5408\u9002\u7684\u9884\u89c8\u65b9\u5f0f\uff0c\u6781\u5927\u7b80\u5316\u4e86\u6587\u4ef6\u9884\u89c8\u529f\u80fd\u7684\u96c6\u6210\u3002</p>\n<p>\u6838\u5fc3\u7279\u6027\u5305\u62ec\uff1a\u652f\u6301\u56fe\u7247\u3001\u97f3\u9891\u3001\u89c6\u9891\u3001PDF\u3001HTML\u3001\u6587\u672c\u548c Office \u6587\u6863\u7b49\u591a\u79cd\u683c\u5f0f\uff1b\u63d0\u4f9b OSS \u6587\u4ef6\u9884\u89c8\u80fd\u529b\uff0c\u901a\u8fc7\u6587\u4ef6 ID \u81ea\u52a8\u83b7\u53d6\u9884\u89c8\u5730\u5740\uff1b\u54cd\u5e94\u5f0f\u8bbe\u8ba1\uff0c\u81ea\u52a8\u9002\u914d\u5bb9\u5668\u5bbd\u5ea6\uff1b\u5b8c\u5584\u7684\u52a0\u8f7d\u72b6\u6001\u548c\u9519\u8bef\u63d0\u793a\uff1b\u652f\u6301\u81ea\u5b9a\u4e49 PDF \u6e32\u67d3\u53c2\u6570\u548c Office \u9884\u89c8\u914d\u7f6e\u3002</p>\n<p>\u9002\u7528\u4e8e\u6587\u6863\u7ba1\u7406\u7cfb\u7edf\u3001\u5728\u7ebf\u529e\u516c\u5e73\u53f0\u3001\u5185\u5bb9\u7ba1\u7406\u7cfb\u7edf\u7b49\u9700\u8981\u6587\u4ef6\u9884\u89c8\u529f\u80fd\u7684\u573a\u666f\uff0c\u7279\u522b\u9002\u5408\u9700\u8981\u5904\u7406\u591a\u79cd\u6587\u4ef6\u7c7b\u578b\u7684\u4f01\u4e1a\u7ea7\u5e94\u7528\u3002\u7ec4\u4ef6\u91c7\u7528\u6a21\u5757\u5316\u8bbe\u8ba1\uff0c\u53ef\u4ee5\u72ec\u7acb\u4f7f\u7528\u5404\u4e2a\u9884\u89c8\u7ec4\u4ef6\uff0c\u4e5f\u53ef\u4f7f\u7528\u7edf\u4e00\u7684 FilePreview \u7ec4\u4ef6\u81ea\u52a8\u5224\u65ad\u6587\u4ef6\u7c7b\u578b\u3002</p>",api:"<h3>FilePreview \u7ec4\u4ef6</h3>\n<p>\u667a\u80fd\u6587\u4ef6\u9884\u89c8\u7ec4\u4ef6\uff0c\u6839\u636e\u6587\u4ef6\u7c7b\u578b\u81ea\u52a8\u9009\u62e9\u5bf9\u5e94\u7684\u9884\u89c8\u65b9\u5f0f\u3002\u652f\u6301\u76f4\u63a5\u4f20\u5165\u6587\u4ef6 URL \u6216 OSS \u6587\u4ef6 ID \u4e24\u79cd\u65b9\u5f0f\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>src</td>\n<td>\u6587\u4ef6\u9884\u89c8\u5730\u5740\uff0c\u4f18\u5148\u4f7f\u7528\u8be5\u53c2\u6570</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>id</td>\n<td>OSS \u6587\u4ef6\u6807\u8bc6\u7b26\uff0c\u5f53 src \u672a\u63d0\u4f9b\u65f6\u4f7f\u7528</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>originName</td>\n<td>\u539f\u59cb\u6587\u4ef6\u540d\uff0c\u7528\u4e8e\u5224\u65ad\u6587\u4ef6\u7c7b\u578b</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>filename</td>\n<td>\u6587\u4ef6\u540d\uff0c\u7528\u4e8e\u5224\u65ad\u6587\u4ef6\u7c7b\u578b</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>apis</td>\n<td>API \u914d\u7f6e\u5bf9\u8c61</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>OSSFilePreview \u7ec4\u4ef6</h3>\n<p>OSS \u6587\u4ef6\u9884\u89c8\u7ec4\u4ef6\uff0c\u901a\u8fc7\u6587\u4ef6 ID \u4ece\u670d\u52a1\u5668\u83b7\u53d6\u6587\u4ef6\u5730\u5740\u540e\u8fdb\u884c\u9884\u89c8\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>id</td>\n<td>OSS \u6587\u4ef6\u6807\u8bc6\u7b26</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>filename</td>\n<td>\u6587\u4ef6\u540d\uff0c\u7528\u4e8e\u5224\u65ad\u6587\u4ef6\u7c7b\u578b</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>staticUrl</td>\n<td>\u9759\u6001\u6587\u4ef6\u5730\u5740\u524d\u7f00</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>render</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>apis</td>\n<td>API \u914d\u7f6e\u5bf9\u8c61</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>HtmlPreview \u7ec4\u4ef6</h3>\n<p>HTML \u6587\u4ef6\u9884\u89c8\u7ec4\u4ef6\uff0c\u652f\u6301\u5728 iframe \u4e2d\u5c55\u793a HTML \u5185\u5bb9\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>url</td>\n<td>HTML \u6587\u4ef6\u5730\u5740</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>maxWidth</td>\n<td>\u6700\u5927\u663e\u793a\u5bbd\u5ea6</td>\n<td>number</td>\n<td>\u5426</td>\n<td>1200</td>\n</tr>\n<tr>\n<td>ignoreContent</td>\n<td>\u662f\u5426\u5ffd\u7565\u5185\u5bb9\u68c0\u67e5\uff0c\u76f4\u63a5\u4f7f\u7528 iframe</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n<tr>\n<td>className</td>\n<td>\u81ea\u5b9a\u4e49\u7c7b\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>PdfPreview \u7ec4\u4ef6</h3>\n<p>PDF \u6587\u4ef6\u9884\u89c8\u7ec4\u4ef6\uff0c\u57fa\u4e8e react-pdf \u5b9e\u73b0\uff0c\u652f\u6301\u7f29\u653e\u548c\u65cb\u8f6c\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>url</td>\n<td>PDF \u6587\u4ef6\u5730\u5740</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>maxWidth</td>\n<td>\u6700\u5927\u663e\u793a\u5bbd\u5ea6</td>\n<td>number</td>\n<td>\u5426</td>\n<td>1200</td>\n</tr>\n<tr>\n<td>scale</td>\n<td>\u7f29\u653e\u6bd4\u4f8b\uff08100 \u4e3a\u539f\u59cb\u5927\u5c0f\uff09</td>\n<td>number</td>\n<td>\u5426</td>\n<td>100</td>\n</tr>\n<tr>\n<td>rotate</td>\n<td>\u65cb\u8f6c\u89d2\u5ea6</td>\n<td>number</td>\n<td>\u5426</td>\n<td>0</td>\n</tr>\n<tr>\n<td>pdfjsUrl</td>\n<td>pdf.js CDN \u5730\u5740</td>\n<td>string</td>\n<td>\u5426</td>\n<td>https://cdn.jsdelivr.net/npm/pdfjs-dist@5.4.296</td>\n</tr>\n<tr>\n<td>className</td>\n<td>\u81ea\u5b9a\u4e49\u7c7b\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>TextPreview \u7ec4\u4ef6</h3>\n<p>\u6587\u672c\u6587\u4ef6\u9884\u89c8\u7ec4\u4ef6\uff0c\u652f\u6301\u7eaf\u6587\u672c\u6587\u4ef6\u7684\u5728\u7ebf\u5c55\u793a\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>url</td>\n<td>\u6587\u672c\u6587\u4ef6\u5730\u5740</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>maxWidth</td>\n<td>\u6700\u5927\u663e\u793a\u5bbd\u5ea6</td>\n<td>number</td>\n<td>\u5426</td>\n<td>1200</td>\n</tr>\n<tr>\n<td>className</td>\n<td>\u81ea\u5b9a\u4e49\u7c7b\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>ImagePreview \u7ec4\u4ef6</h3>\n<p>\u56fe\u7247\u9884\u89c8\u7ec4\u4ef6\uff0c\u652f\u6301\u5e38\u89c1\u56fe\u7247\u683c\u5f0f\u7684\u5c55\u793a\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>url</td>\n<td>\u56fe\u7247\u5730\u5740</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>maxWidth</td>\n<td>\u6700\u5927\u663e\u793a\u5bbd\u5ea6</td>\n<td>number</td>\n<td>\u5426</td>\n<td>1200</td>\n</tr>\n<tr>\n<td>scale</td>\n<td>\u7f29\u653e\u6bd4\u4f8b</td>\n<td>number</td>\n<td>\u5426</td>\n<td>1</td>\n</tr>\n<tr>\n<td>rotate</td>\n<td>\u65cb\u8f6c\u89d2\u5ea6</td>\n<td>number</td>\n<td>\u5426</td>\n<td>0</td>\n</tr>\n<tr>\n<td>origin</td>\n<td>\u662f\u5426\u4f7f\u7528\u539f\u751f img \u6807\u7b7e\uff0c\u4e0d\u5e26\u5bb9\u5668\u548c\u52a0\u8f7d\u72b6\u6001</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n<tr>\n<td>className</td>\n<td>\u81ea\u5b9a\u4e49\u7c7b\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>AudioPreview \u7ec4\u4ef6</h3>\n<p>\u97f3\u9891\u9884\u89c8\u7ec4\u4ef6\uff0c\u4f7f\u7528\u539f\u751f audio \u6807\u7b7e\u8fdb\u884c\u97f3\u9891\u64ad\u653e\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>url</td>\n<td>\u97f3\u9891\u6587\u4ef6\u5730\u5740</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>maxWidth</td>\n<td>\u6700\u5927\u663e\u793a\u5bbd\u5ea6</td>\n<td>number</td>\n<td>\u5426</td>\n<td>1200</td>\n</tr>\n<tr>\n<td>className</td>\n<td>\u81ea\u5b9a\u4e49\u7c7b\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>VideoPreview \u7ec4\u4ef6</h3>\n<p>\u89c6\u9891\u9884\u89c8\u7ec4\u4ef6\uff0c\u4f7f\u7528\u539f\u751f video \u6807\u7b7e\u8fdb\u884c\u89c6\u9891\u64ad\u653e\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>url</td>\n<td>\u89c6\u9891\u6587\u4ef6\u5730\u5740</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>maxWidth</td>\n<td>\u6700\u5927\u663e\u793a\u5bbd\u5ea6</td>\n<td>number</td>\n<td>\u5426</td>\n<td>1200</td>\n</tr>\n<tr>\n<td>controls</td>\n<td>\u662f\u5426\u663e\u793a\u64ad\u653e\u63a7\u4ef6</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>true</td>\n</tr>\n<tr>\n<td>origin</td>\n<td>\u662f\u5426\u4f7f\u7528\u539f\u751f video \u6807\u7b7e\uff0c\u4e0d\u5e26\u5bb9\u5668</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n<tr>\n<td>getElement</td>\n<td>\u83b7\u53d6 video \u5143\u7d20\u7684\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>className</td>\n<td>\u81ea\u5b9a\u4e49\u7c7b\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>OfficePreview \u7ec4\u4ef6</h3>\n<p>Office \u6587\u4ef6\u9884\u89c8\u7ec4\u4ef6\uff0c\u4f7f\u7528 Office Online Viewer \u8fdb\u884c\u9884\u89c8\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>url</td>\n<td>Office \u6587\u4ef6\u5730\u5740</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>className</td>\n<td>\u81ea\u5b9a\u4e49\u7c7b\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>apis</td>\n<td>API \u914d\u7f6e\u5bf9\u8c61\uff0c\u53ef\u914d\u7f6e\u81ea\u5b9a\u4e49\u9884\u89c8\u670d\u52a1</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>UnknownPreview \u7ec4\u4ef6</h3>\n<p>\u672a\u77e5\u7c7b\u578b\u6587\u4ef6\u9884\u89c8\u7ec4\u4ef6\uff0c\u7528\u4e8e\u4e0d\u652f\u6301\u9884\u89c8\u7684\u6587\u4ef6\u7c7b\u578b\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>maxWidth</td>\n<td>\u6700\u5927\u663e\u793a\u5bbd\u5ea6</td>\n<td>number</td>\n<td>\u5426</td>\n<td>1200</td>\n</tr>\n</tbody>\n</table>",example:{isFull:!0,className:"",style:"",list:[{title:"HtmlPreview",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const { default: FilePreview, HtmlPreview } = _FilePreview;\nconst { getPublicPath } = remoteLoader;\nconst BaseExample = () => {\n return (\n <HtmlPreview\n maxWidth={900}\n url={getPublicPath("components-core") + "/mock/demo2.html"}\n />\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_FilePreview",packageName:"@components/FilePreview",component:a},{name:"remoteLoader",packageName:"@kne/remote-loader",component:d}]},{title:"PdfPreview",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const { PdfPreview } = _FilePreview;\nconst { getPublicPath } = remoteLoader;\nconst BaseExample = () => {\n return (\n <PdfPreview\n maxWidth={900}\n url={getPublicPath("components-core") + "/mock/resume.pdf"}\n renderTextLayer={true}\n />\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_FilePreview",packageName:"@components/FilePreview",component:a},{name:"remoteLoader",packageName:"@kne/remote-loader",component:d}]},{title:"TextPreview",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const { TextPreview } = _FilePreview;\nconst { getPublicPath } = remoteLoader;\nconst BaseExample = () => {\n return (\n <TextPreview\n maxWidth={900}\n url={getPublicPath("components-core") + "/mock/demo.txt"}\n />\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_FilePreview",packageName:"@components/FilePreview",component:a},{name:"remoteLoader",packageName:"@kne/remote-loader",component:d}]},{title:"ImagePreview",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const { ImagePreview } = _FilePreview;\nconst { getPublicPath } = remoteLoader;\nconst BaseExample = () => {\n return (\n <ImagePreview url={getPublicPath("components-core") + "/mock/resume.png"} />\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_FilePreview",packageName:"@components/FilePreview",component:a},{name:"remoteLoader",packageName:"@kne/remote-loader",component:d}]},{title:"unknown",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const { UnknownPreview } = _FilePreview;\nconst { getPublicPath } = remoteLoader;\nconst BaseExample = () => {\n return (\n <UnknownPreview url={getPublicPath("components-core") + "/mock/demo.des"} />\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_FilePreview",packageName:"@components/FilePreview",component:a},{name:"remoteLoader",packageName:"@kne/remote-loader",component:d}]},{title:"office",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const {default: FilePreview} = _FilePreview;\nconst {getPublicPath} = remoteLoader;\nconst {PureGlobal} = _Global;\nconst BaseExample = () => {\n return (\n <PureGlobal\n preset={{\n apis: {\n file: {\n getUrl: {\n loader:()=>{\n return "http://ieee802.org:80/secmail/docIZSEwEqHFr.doc";\n },\n },\n },\n },\n }}\n >\n <FilePreview\n id="63bb2013-c743-4d2d-9d91-935c865f1c4d"\n originName="docIZSEwEqHFr.doc"\n />\n </PureGlobal>\n );\n};\n\nrender(<BaseExample/>);\n\n',scope:[{name:"_FilePreview",packageName:"@components/FilePreview",component:a},{name:"remoteLoader",packageName:"@kne/remote-loader",component:d},{name:"_Global",packageName:"@components/Global",component:o}]},{title:"audio",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const { AudioPreview } = _FilePreview;\nconst { getPublicPath } = remoteLoader;\nconst BaseExample = () => {\n return (\n <AudioPreview\n maxWidth={900}\n url={getPublicPath("components-core") + "/mock/audio.wav"}\n />\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_FilePreview",packageName:"@components/FilePreview",component:a},{name:"remoteLoader",packageName:"@kne/remote-loader",component:d},{name:"_Global",packageName:"@components/Global",component:o}]},{title:"video",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const { VideoPreview } = _FilePreview;\nconst { getPublicPath } = remoteLoader;\nconst BaseExample = () => {\n return (\n <VideoPreview\n maxWidth={900}\n url={getPublicPath("components-core") + "/mock/video.mp4"}\n />\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_FilePreview",packageName:"@components/FilePreview",component:a},{name:"remoteLoader",packageName:"@kne/remote-loader",component:d},{name:"_Global",packageName:"@components/Global",component:o}]}]}}},74199(n,t,e){e.d(t,{A:()=>r});var a=e(77765),d=e(55199);const o=JSON.parse('{"id":1,"coId":1,"name":"\u6d88\u606f\u7b80\u4f53","parentId":0,"enName":"xiaoxijianti","leaf":false,"children":[{"id":428,"coId":1,"name":"a\u6d4b\u8bd5\u90e8\u95e801","parentId":1,"enName":"Test BU1","leaf":false,"children":[{"id":430,"coId":1,"name":"01\u5f00\u53d1\u90e8","parentId":428,"enName":null,"leaf":true,"children":[]},{"id":431,"coId":1,"name":"01\u6d4b\u8bd5\u90e8","parentId":428,"enName":"Test bu-01","leaf":false,"children":[{"id":432,"coId":1,"name":"01\u81ea\u52a8\u5316\u90e8","parentId":431,"enName":null,"leaf":false,"children":[{"id":434,"coId":1,"name":"02UI\u81ea\u52a8\u5316","parentId":432,"enName":null,"leaf":false,"children":[{"id":485,"coId":1,"name":"\u4ee3\u7801\u7f16\u5199\u5458","parentId":434,"enName":null,"leaf":true,"children":[]},{"id":484,"coId":1,"name":"\u81ea\u52a8\u5316\u6846\u67b6\u642d\u5efa\u5458","parentId":434,"enName":null,"leaf":true,"children":[]}]}]}]}]},{"id":429,"coId":1,"name":"a\u6d4b\u8bd5\u90e8\u95e802","parentId":1,"enName":"YYY","leaf":false,"children":[{"id":483,"coId":1,"name":"\u5f00\u53d1\u7ec4","parentId":429,"enName":null,"leaf":true,"children":[]},{"id":482,"coId":1,"name":"\u6d4b\u8bd5\u90e8","parentId":429,"enName":null,"leaf":true,"children":[]}]},{"id":184,"coId":1,"name":"\u4e0a\u6d77a","parentId":1,"enName":"shanghai","leaf":true,"children":[]},{"id":78,"coId":1,"name":"\u4e8b\u4e1a\u4e00\u90e8","parentId":1,"enName":"shiyeyibu","leaf":false,"children":[{"id":89,"coId":1,"name":"RPO-\u5e7f\u5dde","parentId":78,"enName":null,"leaf":true,"children":[]},{"id":90,"coId":1,"name":"RPO-\u82cf\u5dde","parentId":78,"enName":null,"leaf":true,"children":[]},{"id":83,"coId":1,"name":"\u4e0a\u6d77-\u5de5\u4e1a\u5236\u9020","parentId":78,"enName":null,"leaf":true,"children":[]},{"id":82,"coId":1,"name":"\u4e0a\u6d77-\u6570\u5b57\u79d1\u6280","parentId":78,"enName":null,"leaf":true,"children":[]}]},{"id":80,"coId":1,"name":"\u4e8b\u4e1a\u4e09\u90e8","parentId":1,"enName":null,"leaf":false,"children":[{"id":93,"coId":1,"name":"RPO-\u5317\u4eac-\u56e2\u961f2","parentId":80,"enName":null,"leaf":true,"children":[]},{"id":92,"coId":1,"name":"\u5317\u4eac-\u9ad8\u79d1\u6280\u53ca\u4e92\u8054\u7f51","parentId":80,"enName":null,"leaf":true,"children":[]}]},{"id":79,"coId":1,"name":"\u4e8b\u4e1a\u4e8c\u90e8","parentId":1,"enName":null,"leaf":false,"children":[{"id":88,"coId":1,"name":"PRO-\u5de5\u4e1a\u5236\u9020","parentId":79,"enName":null,"leaf":true,"children":[]},{"id":87,"coId":1,"name":"PRO-\u751f\u547d\u79d1\u5b66-\u56e2\u961f2","parentId":79,"enName":null,"leaf":true,"children":[]},{"id":91,"coId":1,"name":"RPO-\u5feb\u6d88\u96f6\u552e","parentId":79,"enName":null,"leaf":true,"children":[]},{"id":86,"coId":1,"name":"RPO-\u751f\u547d\u79d1\u5b66","parentId":79,"enName":null,"leaf":true,"children":[]},{"id":85,"coId":1,"name":"\u4e0a\u6d77-\u91d1\u878d","parentId":79,"enName":null,"leaf":true,"children":[]},{"id":84,"coId":1,"name":"\u4e0a\u6d77-\u96f6\u552e","parentId":79,"enName":null,"leaf":true,"children":[]}]},{"id":173,"coId":1,"name":"\u5ba1\u6279\u6d41\u90e8\u95e8","parentId":1,"enName":null,"leaf":false,"children":[{"id":176,"coId":1,"name":"GM","parentId":173,"enName":null,"leaf":true,"children":[]},{"id":175,"coId":1,"name":"VP","parentId":173,"enName":null,"leaf":true,"children":[]},{"id":174,"coId":1,"name":"\u51fa\u7eb3","parentId":173,"enName":null,"leaf":true,"children":[]},{"id":180,"coId":1,"name":"\u6284\u9001\u4eba","parentId":173,"enName":null,"leaf":true,"children":[]},{"id":178,"coId":1,"name":"\u6cd5\u52a1","parentId":173,"enName":null,"leaf":true,"children":[]},{"id":177,"coId":1,"name":"\u8d22\u52a1\u5206\u6790","parentId":173,"enName":null,"leaf":true,"children":[]},{"id":179,"coId":1,"name":"\u9ed8\u8ba4\u5ba1\u6279\u4eba","parentId":173,"enName":null,"leaf":true,"children":[]}]},{"id":81,"coId":1,"name":"\u6570\u5b57\u5316\u56e2\u961f","parentId":1,"enName":"Shu Zi-Hua","leaf":false,"children":[{"id":201,"coId":1,"name":"\u6d4b\u8bd5\u56e2\u961f","parentId":81,"enName":"ceshi---","leaf":true,"children":[]}]},{"id":103,"coId":1,"name":"\u661f\u8fb0\u6c34","parentId":1,"enName":null,"leaf":false,"children":[{"id":106,"coId":1,"name":"\u661f\u8fb0\u4e00\u90e8","parentId":103,"enName":null,"leaf":true,"children":[]},{"id":111,"coId":1,"name":"\u661f\u8fb0\u4e09\u90e8","parentId":103,"enName":null,"leaf":true,"children":[]},{"id":107,"coId":1,"name":"\u661f\u8fb0\u4e8c\u90e8","parentId":103,"enName":null,"leaf":true,"children":[]},{"id":151,"coId":1,"name":"\u661f\u8fb0\u56db\u90e8","parentId":103,"enName":null,"leaf":true,"children":[]}]},{"id":101,"coId":1,"name":"\u667a\u6167\u661f","parentId":1,"enName":null,"leaf":false,"children":[{"id":104,"coId":1,"name":"\u667a\u6167\u4e00\u90e8","parentId":101,"enName":null,"leaf":false,"children":[{"id":150,"coId":1,"name":"\u667a\u6167\u4e00\u90e8-\u6708\u4eae\u661f","parentId":104,"enName":null,"leaf":true,"children":[]}]},{"id":109,"coId":1,"name":"\u667a\u6167\u4e09\u90e8","parentId":101,"enName":null,"leaf":true,"children":[]},{"id":105,"coId":1,"name":"\u667a\u6167\u4e8c\u90e8","parentId":101,"enName":null,"leaf":true,"children":[]}]},{"id":182,"coId":1,"name":"\u667a\u80fd\u540e\u53f0\uff08\u4e0a\u6d77\uff09","parentId":1,"enName":null,"leaf":true,"children":[]},{"id":181,"coId":1,"name":"\u7ba1\u7406\u4e2d\u5fc3","parentId":1,"enName":null,"leaf":true,"children":[]},{"id":194,"coId":1,"name":"\u81ea\u52a8\u5316\u90e8\u95e8","parentId":1,"enName":null,"leaf":true,"children":[]}]}');const r={name:"Filter",summary:"<p>Filter \u662f\u4e00\u4e2a\u529f\u80fd\u5f3a\u5927\u7684\u7b5b\u9009\u7ec4\u4ef6\u5e93\uff0c\u7528\u4e8e\u6784\u5efa\u7075\u6d3b\u7684\u7b5b\u9009\u6761\u4ef6\u754c\u9762\u3002\u8be5\u7ec4\u4ef6\u63d0\u4f9b\u4e86\u591a\u79cd\u9884\u7f6e\u7684\u7b5b\u9009\u5b57\u6bb5\u7c7b\u578b\uff0c\u652f\u6301\u81ea\u5b9a\u4e49\u7b5b\u9009\u9879\uff0c\u5e76\u63d0\u4f9b\u4e86\u5b8c\u6574\u7684\u7b5b\u9009\u503c\u7ba1\u7406\u548c\u5c55\u793a\u529f\u80fd\u3002</p>\n<p>\u6838\u5fc3\u7279\u6027\u5305\u62ec\uff1a\u4e30\u5bcc\u7684\u9884\u7f6e\u7b5b\u9009\u5b57\u6bb5\uff0c\u6db5\u76d6\u6587\u672c\u8f93\u5165\u3001\u65e5\u671f\u9009\u62e9\u3001\u57ce\u5e02\u9009\u62e9\u3001\u7528\u6237\u9009\u62e9\u3001\u884c\u4e1a\u9009\u62e9\u3001\u804c\u80fd\u9009\u62e9\u7b49\u591a\u79cd\u7c7b\u578b\uff1b\u7075\u6d3b\u7684\u7b5b\u9009\u503c\u7ba1\u7406\uff0c\u652f\u6301\u53d7\u63a7\u548c\u975e\u53d7\u63a7\u6a21\u5f0f\uff1b\u652f\u6301\u5c55\u5f00/\u6536\u8d77\u7b5b\u9009\u9879\uff0c\u907f\u514d\u7b5b\u9009\u6761\u4ef6\u8fc7\u591a\u5bfc\u81f4\u754c\u9762\u6df7\u4e71\uff1b\u63d0\u4f9b\u9ad8\u7ea7\u7b5b\u9009\u7ec4\u4ef6\uff0c\u9002\u7528\u4e8e\u590d\u6742\u7b5b\u9009\u573a\u666f\uff1b\u652f\u6301\u81ea\u5b9a\u4e49\u5b57\u6bb5\u548c\u7ec4\u5408\u4f7f\u7528\uff0c\u6ee1\u8db3\u5404\u79cd\u4e1a\u52a1\u9700\u6c42\uff1b\u5185\u7f6e\u641c\u7d22\u8f93\u5165\u6846\u548c\u7b5b\u9009\u503c\u5c55\u793a\u7ec4\u4ef6\uff0c\u63d0\u5347\u7528\u6237\u4f53\u9a8c\u3002</p>\n<p>\u9002\u7528\u4e8e\u6570\u636e\u5217\u8868\u3001\u8868\u683c\u7b5b\u9009\u3001\u62a5\u8868\u67e5\u8be2\u7b49\u9700\u8981\u591a\u6761\u4ef6\u7b5b\u9009\u7684\u573a\u666f\u3002\u7ec4\u4ef6\u91c7\u7528 Context API \u8fdb\u884c\u72b6\u6001\u7ba1\u7406\uff0c\u652f\u6301\u5d4c\u5957\u4f7f\u7528\u548c\u7ec4\u5408\uff0c\u80fd\u591f\u6ee1\u8db3\u4f01\u4e1a\u7ea7\u5e94\u7528\u4e2d\u5404\u79cd\u590d\u6742\u7684\u7b5b\u9009\u9700\u6c42\u3002</p>",api:"<h3>Filter \u7ec4\u4ef6</h3>\n<p>\u7b5b\u9009\u7ec4\u4ef6\u7684\u4e3b\u5165\u53e3\uff0c\u7528\u4e8e\u6784\u5efa\u7075\u6d3b\u7684\u7b5b\u9009\u6761\u4ef6\u754c\u9762\u3002\u652f\u6301\u53d7\u63a7\u548c\u975e\u53d7\u63a7\u6a21\u5f0f\uff0c\u81ea\u52a8\u7ba1\u7406\u7b5b\u9009\u503c\u72b6\u6001\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>\u7b5b\u9009\u503c\u6570\u7ec4\uff0c\u53d7\u63a7\u6a21\u5f0f\u4f7f\u7528</td>\n<td>array</td>\n<td>\u5426</td>\n<td>[]</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u7b5b\u9009\u503c\u53d8\u5316\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultValue</td>\n<td>\u9ed8\u8ba4\u7b5b\u9009\u503c</td>\n<td>array</td>\n<td>\u5426</td>\n<td>[]</td>\n</tr>\n<tr>\n<td>list</td>\n<td>\u7b5b\u9009\u9879\u914d\u7f6e\u6570\u7ec4\uff0c\u652f\u6301\u591a\u884c\u5e03\u5c40</td>\n<td>array</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>displayLine</td>\n<td>\u9ed8\u8ba4\u663e\u793a\u7684\u884c\u6570\uff0c\u8d85\u8fc7\u5219\u652f\u6301\u5c55\u5f00/\u6536\u8d77</td>\n<td>number</td>\n<td>\u5426</td>\n<td>1</td>\n</tr>\n<tr>\n<td>label</td>\n<td>\u7b5b\u9009\u6807\u9898\uff0c\u9ed8\u8ba4\u663e\u793a\"\u7b5b\u9009\"</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>extra</td>\n<td>\u989d\u5916\u5185\u5bb9\uff0c\u901a\u5e38\u7528\u4e8e\u653e\u7f6e\u641c\u7d22\u8f93\u5165\u6846\u7b49</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>extraExpand</td>\n<td>\u989d\u5916\u5c55\u5f00\u5185\u5bb9\uff0c\u663e\u793a\u5728\u5df2\u9009\u7b5b\u9009\u503c\u53f3\u4fa7</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>className</td>\n<td>\u81ea\u5b9a\u4e49\u7c7b\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h4>value \u6570\u636e\u7ed3\u6784</h4>\n<p>\u7b5b\u9009\u503c\u6570\u7ec4\u4e2d\u6bcf\u4e2a\u5143\u7d20\u7684\u7ed3\u6784\uff1a</p>\n<pre><code class=\"language-javascript\">{\n name: 'city', // \u7b5b\u9009\u5b57\u6bb5\u540d\n label: '\u57ce\u5e02', // \u7b5b\u9009\u9879\u6807\u7b7e\n value: [ // \u7b5b\u9009\u503c\uff0c\u53ef\u4ee5\u662f\u5355\u4e2a\u503c\u6216\u6570\u7ec4\n { label: '\u4e0a\u6d77', value: '010' },\n { label: '\u5317\u4eac', value: '020' }\n ]\n}\n</code></pre>\n<h3>AdvancedFilter \u7ec4\u4ef6</h3>\n<p>\u9ad8\u7ea7\u7b5b\u9009\u7ec4\u4ef6\uff0c\u9002\u7528\u4e8e\u9700\u8981\u5c55\u793a\u591a\u4e2a\u7b5b\u9009\u6761\u4ef6\u4e14\u652f\u6301\u5c55\u5f00/\u6536\u8d77\u7684\u573a\u666f\u3002\u76f8\u6bd4\u666e\u901a Filter \u7ec4\u4ef6\uff0c\u63d0\u4f9b\u66f4\u7d27\u51d1\u7684\u5e03\u5c40\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>\u7b5b\u9009\u503c\u6570\u7ec4</td>\n<td>array</td>\n<td>\u5426</td>\n<td>[]</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u7b5b\u9009\u503c\u53d8\u5316\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultValue</td>\n<td>\u9ed8\u8ba4\u7b5b\u9009\u503c</td>\n<td>array</td>\n<td>\u5426</td>\n<td>[]</td>\n</tr>\n<tr>\n<td>list</td>\n<td>\u7b5b\u9009\u9879\u914d\u7f6e\u6570\u7ec4</td>\n<td>array</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>more</td>\n<td>\u66f4\u591a\u7b5b\u9009\u9879\uff0c\u652f\u6301\u5c55\u5f00/\u6536\u8d77</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>FilterLines \u7ec4\u4ef6</h3>\n<p>\u7b5b\u9009\u9879\u5e03\u5c40\u7ec4\u4ef6\uff0c\u7528\u4e8e\u6309\u7167\u884c\u5c55\u793a\u7b5b\u9009\u9879\uff0c\u652f\u6301\u5c55\u5f00/\u6536\u8d77\u529f\u80fd\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>list</td>\n<td>\u7b5b\u9009\u9879\u914d\u7f6e\u6570\u7ec4\uff0c\u652f\u6301\u591a\u884c\u5e03\u5c40</td>\n<td>array</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>displayLine</td>\n<td>\u9ed8\u8ba4\u663e\u793a\u7684\u884c\u6570</td>\n<td>number</td>\n<td>\u5426</td>\n<td>1</td>\n</tr>\n<tr>\n<td>label</td>\n<td>\u7b5b\u9009\u6807\u9898</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>extra</td>\n<td>\u989d\u5916\u5185\u5bb9</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>className</td>\n<td>\u81ea\u5b9a\u4e49\u7c7b\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>FilterValueDisplay \u7ec4\u4ef6</h3>\n<p>\u7b5b\u9009\u503c\u5c55\u793a\u7ec4\u4ef6\uff0c\u7528\u4e8e\u5c55\u793a\u5df2\u9009\u62e9\u7684\u7b5b\u9009\u6761\u4ef6\uff0c\u652f\u6301\u5355\u4e2a\u5220\u9664\u548c\u6e05\u7a7a\u5168\u90e8\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>\u7b5b\u9009\u503c\u6570\u7ec4</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u7b5b\u9009\u503c\u53d8\u5316\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>extraExpand</td>\n<td>\u989d\u5916\u5c55\u5f00\u5185\u5bb9\uff0c\u663e\u793a\u5728\u6e05\u7a7a\u6309\u94ae\u5de6\u4fa7</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>FilterItem \u7ec4\u4ef6</h3>\n<p>\u7b5b\u9009\u9879\u5bb9\u5668\u7ec4\u4ef6\uff0c\u63d0\u4f9b\u7edf\u4e00\u7684\u6837\u5f0f\u548c\u4ea4\u4e92\u6548\u679c\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>\u7b5b\u9009\u9879\u6807\u7b7e</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>open</td>\n<td>\u662f\u5426\u6253\u5f00\u4e0b\u62c9</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>active</td>\n<td>\u662f\u5426\u6fc0\u6d3b\u72b6\u6001\uff08\u6709\u9009\u4e2d\u503c\u65f6\u81ea\u52a8\u6fc0\u6d3b\uff09</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u7b5b\u9009\u9879\u5185\u5bb9</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>PopoverItem \u7ec4\u4ef6</h3>\n<p>\u5f39\u51fa\u5f0f\u7b5b\u9009\u9879\u7ec4\u4ef6\uff0c\u57fa\u4e8e Popover \u5b9e\u73b0\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>\u7b5b\u9009\u9879\u6807\u7b7e</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u6e32\u67d3\u51fd\u6570\uff0c\u63a5\u6536 { value, onChange } \u53c2\u6570</td>\n<td>function</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>SearchInput \u7ec4\u4ef6</h3>\n<p>\u641c\u7d22\u8f93\u5165\u6846\u7ec4\u4ef6\uff0c\u901a\u5e38\u7528\u4e8e\u653e\u7f6e\u5728\u7b5b\u9009\u5668\u53f3\u4fa7\u7684\u641c\u7d22\u529f\u80fd\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>\u8f93\u5165\u6846\u5360\u4f4d\u7b26</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>value</td>\n<td>\u8f93\u5165\u6846\u503c</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u503c\u53d8\u5316\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>FilterItemContainer \u7ec4\u4ef6</h3>\n<p>\u7b5b\u9009\u9879\u5bb9\u5668\u7ec4\u4ef6\uff0c\u7528\u4e8e\u5305\u88c5\u9700\u8981\u4f20\u9012\u989d\u5916\u5c5e\u6027\u7684\u7b5b\u9009\u9879\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u6e32\u67d3\u51fd\u6570\uff0c\u63a5\u6536\u7b5b\u9009\u9879 props</td>\n<td>function</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>InputFilterItem \u7ec4\u4ef6</h3>\n<p>\u6587\u672c\u8f93\u5165\u7b5b\u9009\u9879\u7ec4\u4ef6\uff0c\u7528\u4e8e\u6587\u672c\u7c7b\u578b\u7684\u7b5b\u9009\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>\u8f93\u5165\u6846\u5360\u4f4d\u7b26</td>\n<td>string</td>\n<td>\u5426</td>\n<td>\u8bf7\u8f93\u5165{label}</td>\n</tr>\n<tr>\n<td>value</td>\n<td>\u8f93\u5165\u6846\u503c</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u503c\u53d8\u5316\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>DatePickerFilterItem \u7ec4\u4ef6</h3>\n<p>\u65e5\u671f\u9009\u62e9\u7b5b\u9009\u9879\u7ec4\u4ef6\uff0c\u652f\u6301\u591a\u79cd\u65e5\u671f\u9009\u62e9\u6a21\u5f0f\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>picker</td>\n<td>\u65e5\u671f\u9009\u62e9\u5668\u7c7b\u578b\uff0c\u53ef\u9009\u503c\uff1a<code>date</code>\u3001<code>week</code>\u3001<code>month</code>\u3001<code>quarter</code>\u3001<code>year</code></td>\n<td>string</td>\n<td>\u5426</td>\n<td><code>date</code></td>\n</tr>\n<tr>\n<td>value</td>\n<td>\u65e5\u671f\u503c</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u503c\u53d8\u5316\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>DateRangePickerFilterItem \u7ec4\u4ef6</h3>\n<p>\u65e5\u671f\u8303\u56f4\u9009\u62e9\u7b5b\u9009\u9879\u7ec4\u4ef6\uff0c\u7528\u4e8e\u9009\u62e9\u65e5\u671f\u8303\u56f4\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>value</td>\n<td>\u65e5\u671f\u8303\u56f4\u503c</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u503c\u53d8\u5316\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>TypeDateRangePickerFilterItem \u7ec4\u4ef6</h3>\n<p>\u7c7b\u578b\u5316\u65e5\u671f\u8303\u56f4\u9009\u62e9\u7b5b\u9009\u9879\u7ec4\u4ef6\uff0c\u652f\u6301\u65e5\u671f\u7c7b\u578b\u9009\u62e9\uff08\u5982\u521b\u5efa\u65f6\u95f4\u3001\u66f4\u65b0\u65f6\u95f4\u7b49\uff09\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>allowEmpty</td>\n<td>\u662f\u5426\u5141\u8bb8\u6e05\u7a7a [\u5f00\u59cb\u65f6\u95f4\u6e05\u7a7a, \u7ed3\u675f\u65f6\u95f4\u6e05\u7a7a]</td>\n<td>array</td>\n<td>\u5426</td>\n<td>[false, false]</td>\n</tr>\n<tr>\n<td>value</td>\n<td>\u65e5\u671f\u8303\u56f4\u503c</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u503c\u53d8\u5316\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>CityFilterItem \u7ec4\u4ef6</h3>\n<p>\u57ce\u5e02\u9009\u62e9\u7b5b\u9009\u9879\u7ec4\u4ef6\uff0c\u652f\u6301\u7701\u5e02\u533a\u4e09\u7ea7\u8054\u52a8\u9009\u62e9\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>value</td>\n<td>\u57ce\u5e02\u503c</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u503c\u53d8\u5316\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>single</td>\n<td>\u662f\u5426\u5355\u9009</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n</tbody>\n</table>\n<h3>NumberRangeFilterItem \u7ec4\u4ef6</h3>\n<p>\u6570\u503c\u8303\u56f4\u7b5b\u9009\u9879\u7ec4\u4ef6\uff0c\u7528\u4e8e\u9009\u62e9\u6570\u503c\u8303\u56f4\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>unit</td>\n<td>\u6570\u503c\u5355\u4f4d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>value</td>\n<td>\u6570\u503c\u8303\u56f4\u503c</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u503c\u53d8\u5316\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>AdvancedSelectFilterItem \u7ec4\u4ef6</h3>\n<p>\u9ad8\u7ea7\u9009\u62e9\u7b5b\u9009\u9879\u7ec4\u4ef6\uff0c\u652f\u6301\u8fdc\u7a0b\u6570\u636e\u52a0\u8f7d\u3001\u5206\u9875\u3001\u641c\u7d22\u7b49\u529f\u80fd\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>api</td>\n<td>API \u914d\u7f6e\u5bf9\u8c61</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>api.loader</td>\n<td>\u6570\u636e\u52a0\u8f7d\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>value</td>\n<td>\u9009\u62e9\u503c</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u503c\u53d8\u5316\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>SuperSelectFilterItem \u7ec4\u4ef6</h3>\n<p>\u8d85\u7ea7\u9009\u62e9\u7b5b\u9009\u9879\u7ec4\u4ef6\uff0c\u652f\u6301\u5c55\u793a\u63cf\u8ff0\u4fe1\u606f\u3001\u56fe\u6807\u7b49\u4e30\u5bcc\u7684\u9009\u9879\u5185\u5bb9\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>options</td>\n<td>\u9009\u9879\u6570\u636e\u6570\u7ec4</td>\n<td>array</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>value</td>\n<td>\u9009\u62e9\u503c</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u503c\u53d8\u5316\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>UserFilterItem \u7ec4\u4ef6</h3>\n<p>\u7528\u6237\u9009\u62e9\u7b5b\u9009\u9879\u7ec4\u4ef6\uff0c\u4e13\u95e8\u7528\u4e8e\u7528\u6237\u9009\u62e9\u573a\u666f\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>api</td>\n<td>API \u914d\u7f6e\u5bf9\u8c61</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>api.loader</td>\n<td>\u6570\u636e\u52a0\u8f7d\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>value</td>\n<td>\u7528\u6237\u503c</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u503c\u53d8\u5316\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>SuperSelectUserFilterItem \u7ec4\u4ef6</h3>\n<p>\u8d85\u7ea7\u7528\u6237\u9009\u62e9\u7b5b\u9009\u9879\u7ec4\u4ef6\uff0c\u652f\u6301\u5c55\u793a\u7528\u6237\u63cf\u8ff0\u4fe1\u606f\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>api</td>\n<td>API \u914d\u7f6e\u5bf9\u8c61</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>api.loader</td>\n<td>\u6570\u636e\u52a0\u8f7d\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>value</td>\n<td>\u7528\u6237\u503c</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u503c\u53d8\u5316\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>FunctionSelectFilterItem \u7ec4\u4ef6</h3>\n<p>\u804c\u80fd\u9009\u62e9\u7b5b\u9009\u9879\u7ec4\u4ef6\uff0c\u7528\u4e8e\u9009\u62e9\u804c\u80fd\u4fe1\u606f\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>selectLevel</td>\n<td>\u9009\u62e9\u5c42\u7ea7</td>\n<td>number</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>maxLength</td>\n<td>\u6700\u5927\u9009\u62e9\u6570\u91cf</td>\n<td>number</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>single</td>\n<td>\u662f\u5426\u5355\u9009</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n<tr>\n<td>onlyAllowLastLevel</td>\n<td>\u662f\u5426\u53ea\u5141\u8bb8\u9009\u62e9\u6700\u540e\u4e00\u7ea7</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n<tr>\n<td>value</td>\n<td>\u804c\u80fd\u503c</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u503c\u53d8\u5316\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>IndustrySelectFilterItem \u7ec4\u4ef6</h3>\n<p>\u884c\u4e1a\u9009\u62e9\u7b5b\u9009\u9879\u7ec4\u4ef6\uff0c\u7528\u4e8e\u9009\u62e9\u884c\u4e1a\u4fe1\u606f\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>selectLevel</td>\n<td>\u9009\u62e9\u5c42\u7ea7</td>\n<td>number</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>maxLength</td>\n<td>\u6700\u5927\u9009\u62e9\u6570\u91cf</td>\n<td>number</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>single</td>\n<td>\u662f\u5426\u5355\u9009</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n<tr>\n<td>onlyAllowLastLevel</td>\n<td>\u662f\u5426\u53ea\u5141\u8bb8\u9009\u62e9\u6700\u540e\u4e00\u7ea7</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n<tr>\n<td>value</td>\n<td>\u884c\u4e1a\u503c</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u503c\u53d8\u5316\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>CascaderFilterItem \u7ec4\u4ef6</h3>\n<p>\u7ea7\u8054\u9009\u62e9\u7b5b\u9009\u9879\u7ec4\u4ef6\uff0c\u7528\u4e8e\u7ea7\u8054\u6570\u636e\u7684\u9009\u62e9\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>options</td>\n<td>\u9009\u9879\u6570\u636e\u6570\u7ec4</td>\n<td>array</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>value</td>\n<td>\u9009\u62e9\u503c</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u503c\u53d8\u5316\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>TreeFilterItem \u7ec4\u4ef6</h3>\n<p>\u6811\u5f62\u9009\u62e9\u7b5b\u9009\u9879\u7ec4\u4ef6\uff0c\u7528\u4e8e\u6811\u5f62\u7ed3\u6784\u6570\u636e\u7684\u9009\u62e9\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>api</td>\n<td>API \u914d\u7f6e\u5bf9\u8c61</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>api.loader</td>\n<td>\u6570\u636e\u52a0\u8f7d\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>fieldNames</td>\n<td>\u5b57\u6bb5\u540d\u6620\u5c04</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>fieldNames.title</td>\n<td>\u6807\u9898\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td><code>title</code></td>\n</tr>\n<tr>\n<td>fieldNames.key</td>\n<td>\u952e\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td><code>key</code></td>\n</tr>\n<tr>\n<td>fieldNames.children</td>\n<td>\u5b50\u8282\u70b9\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td><code>children</code></td>\n</tr>\n<tr>\n<td>single</td>\n<td>\u662f\u5426\u5355\u9009</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n<tr>\n<td>value</td>\n<td>\u9009\u62e9\u503c</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u503c\u53d8\u5316\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>\u9ad8\u7ea7\u5b57\u6bb5\u7ec4\u4ef6</h3>\n<h4>ListFilterItem \u7ec4\u4ef6\uff08AdvancedFilter.fields\uff09</h4>\n<p>\u5217\u8868\u9009\u62e9\u7b5b\u9009\u9879\u7ec4\u4ef6\uff0c\u4ee5\u6807\u7b7e\u5f62\u5f0f\u5c55\u793a\u9009\u9879\uff0c\u652f\u6301\u5355\u9009\u548c\u591a\u9009\u3002</p>\n<h4>\u7ec4\u4ef6\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>items</td>\n<td>\u9009\u9879\u6570\u636e\u6570\u7ec4</td>\n<td>array</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>single</td>\n<td>\u662f\u5426\u5355\u9009</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n<tr>\n<td>maxLength</td>\n<td>\u6700\u5927\u9009\u62e9\u6570\u91cf</td>\n<td>number</td>\n<td>\u5426</td>\n<td>5</td>\n</tr>\n<tr>\n<td>custom</td>\n<td>\u81ea\u5b9a\u4e49\u7b5b\u9009\u9879</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>value</td>\n<td>\u9009\u62e9\u503c</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u503c\u53d8\u5316\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>\u5de5\u5177\u51fd\u6570</h3>\n<h4>getFilterValue</h4>\n<p>\u5c06\u7b5b\u9009\u503c\u6570\u7ec4\u8f6c\u6362\u4e3a\u5bf9\u8c61\u683c\u5f0f\u3002</p>\n<p><strong>\u51fd\u6570\u7b7e\u540d\uff1a</strong></p>\n<pre><code class=\"language-javascript\">getFilterValue(filterValue: array): object\n</code></pre>\n<p><strong>\u53c2\u6570\u8bf4\u660e\uff1a</strong></p>\n<table>\n<thead>\n<tr>\n<th>\u53c2\u6570\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>filterValue</td>\n<td>\u7b5b\u9009\u503c\u6570\u7ec4</td>\n<td>array</td>\n</tr>\n</tbody>\n</table>\n<p><strong>\u8fd4\u56de\u503c\uff1a</strong></p>\n<p>\u8f6c\u6362\u540e\u7684\u5bf9\u8c61\uff0c\u683c\u5f0f\u4e3a <code>{ name: value, ... }</code>\uff0c\u5176\u4e2d value \u662f\u63d0\u53d6\u7684\u503c\u6570\u7ec4\u6216\u5355\u4e2a\u503c\u3002</p>\n<p><strong>\u793a\u4f8b\uff1a</strong></p>\n<pre><code class=\"language-javascript\">const filterValue = [\n { name: 'city', value: [{ label: '\u4e0a\u6d77', value: '010' }] },\n { name: 'text', value: { label: '\u6d4b\u8bd5', value: 'test' } }\n];\nconst result = getFilterValue(filterValue);\n// result: { city: ['010'], text: 'test' }\n</code></pre>\n<h4>useFilter</h4>\n<p>\u83b7\u53d6\u7b5b\u9009\u4e0a\u4e0b\u6587\u7684 Hook\u3002</p>\n<p><strong>\u51fd\u6570\u7b7e\u540d\uff1a</strong></p>\n<pre><code class=\"language-javascript\">useFilter(): object\n</code></pre>\n<p><strong>\u8fd4\u56de\u503c\uff1a</strong></p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>\u7b5b\u9009\u503c Map</td>\n<td>Map</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u7b5b\u9009\u503c\u53d8\u5316\u51fd\u6570</td>\n<td>function</td>\n</tr>\n</tbody>\n</table>\n<h4>withFilterValue</h4>\n<p>\u9ad8\u9636\u7ec4\u4ef6\uff0c\u7528\u4e8e\u81ea\u52a8\u8fde\u63a5\u7b5b\u9009\u4e0a\u4e0b\u6587\u3002</p>\n<p><strong>\u51fd\u6570\u7b7e\u540d\uff1a</strong></p>\n<pre><code class=\"language-javascript\">withFilterValue(WrappedComponent): ReactComponent\n</code></pre>\n<p><strong>\u53c2\u6570\u8bf4\u660e\uff1a</strong></p>\n<table>\n<thead>\n<tr>\n<th>\u53c2\u6570\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>WrappedComponent</td>\n<td>\u88ab\u5305\u88c5\u7684\u7ec4\u4ef6</td>\n<td>ReactComponent</td>\n</tr>\n</tbody>\n</table>\n<p><strong>\u65b0\u589e Props\uff1a</strong></p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n</tr>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>string</td>\n</tr>\n</tbody>\n</table>\n<h4>withFieldItem</h4>\n<p>\u9ad8\u9636\u7ec4\u4ef6\uff0c\u7528\u4e8e\u5c06\u8868\u5355\u5b57\u6bb5\u7ec4\u4ef6\u5305\u88c5\u4e3a\u7b5b\u9009\u9879\u7ec4\u4ef6\u3002</p>\n<p><strong>\u51fd\u6570\u7b7e\u540d\uff1a</strong></p>\n<pre><code class=\"language-javascript\">withFieldItem(WrappedComponent): ReactComponent\n</code></pre>\n<p><strong>\u53c2\u6570\u8bf4\u660e\uff1a</strong></p>\n<table>\n<thead>\n<tr>\n<th>\u53c2\u6570\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>WrappedComponent</td>\n<td>\u88ab\u5305\u88c5\u7684\u7ec4\u4ef6</td>\n<td>ReactComponent</td>\n</tr>\n</tbody>\n</table>\n<p><strong>\u65b0\u589e Props\uff1a</strong></p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n</tr>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>string</td>\n</tr>\n<tr>\n<td>interceptor</td>\n<td>\u62e6\u622a\u5668\uff0c\u7528\u4e8e\u503c\u8f6c\u6362</td>\n<td>object</td>\n</tr>\n<tr>\n<td>interceptor.input</td>\n<td>\u8f93\u5165\u62e6\u622a\u5668</td>\n<td>function</td>\n</tr>\n<tr>\n<td>interceptor.output</td>\n<td>\u8f93\u51fa\u62e6\u622a\u5668</td>\n<td>function</td>\n</tr>\n</tbody>\n</table>",example:{isFull:!0,className:"",style:"",list:[{title:"\u57fa\u7840\u7528\u6cd5",description:"\u5c55\u793a Filter \u7ec4\u4ef6\u7684\u57fa\u672c\u4f7f\u7528\u65b9\u5f0f\uff0c\u5305\u62ec\u5404\u79cd\u5e38\u89c1\u7684\u7b5b\u9009\u5b57\u6bb5\u7c7b\u578b",code:'const {\n default: Filter,\n InputFilterItem,\n DatePickerFilterItem,\n DateRangePickerFilterItem,\n TypeDateRangePickerFilterItem,\n CityFilterItem,\n AdvancedSelectFilterItem,\n SuperSelectFilterItem,\n SuperSelectUserFilterItem,\n UserFilterItem,\n FunctionSelectFilterItem,\n IndustrySelectFilterItem,\n getFilterValue,\n FilterItemContainer,\n} = _Filter;\nconst { useState } = React;\nconst BaseExample = () => {\n const [value, onChange] = useState([]);\n return (\n <Filter\n value={value}\n onChange={(value) => {\n console.log(getFilterValue(value));\n onChange(value);\n }}\n extra={<Filter.SearchInput name="name" label="\u59d3\u540d" />}\n list={[\n [\n <InputFilterItem label="\u6587\u5b57" name="text" />,\n <CityFilterItem label="\u57ce\u5e02" name="city" />,\n <FilterItemContainer name="select" label="\u9ad8\u7ea7\u9009\u62e9">\n {(props) => (\n <div>\n <AdvancedSelectFilterItem\n {...props}\n api={{\n loader: () => {\n return {\n pageData: [\n { label: "\u7b2c\u4e00\u9879", value: 1 },\n {\n label: "\u7b2c\u4e8c\u9879",\n value: 2,\n disabled: true,\n },\n {\n label: "\u7b2c\u4e09\u9879",\n value: 3,\n },\n ],\n };\n },\n }}\n />\n </div>\n )}\n </FilterItemContainer>,\n <DatePickerFilterItem label="\u65e5\u671f" name="date" picker="week" />,\n <TypeDateRangePickerFilterItem\n label="\u590d\u6742\u65e5\u671f\u8303\u56f4"\n name="type-data-range"\n allowEmpty={[true, true]}\n />,\n <DateRangePickerFilterItem label="\u65e5\u671f\u8303\u56f4" name="date-range" />,\n <SuperSelectFilterItem\n label="\u9009\u62e9\u4fe1\u606f"\n name="select-value"\n options={[\n {\n label: "\u7528\u6237\u4e00",\n value: 1,\n description: "\u6211\u662f\u7528\u6237\u63cf\u8ff0",\n },\n {\n label: "\u7528\u6237\u4e8c",\n value: 2,\n description: "\u6211\u662f\u7528\u6237\u63cf\u8ff0",\n },\n ]}\n />,\n <SuperSelectUserFilterItem\n label="\u7528\u6237\u9009\u62e9"\n name="user"\n api={{\n loader: () => {\n return {\n pageData: [\n {\n label: "\u7528\u6237\u4e00",\n value: 1,\n description: "\u6211\u662f\u7528\u6237\u63cf\u8ff0",\n },\n {\n label: "\u7528\u6237\u4e8c",\n value: 2,\n description: "\u6211\u662f\u7528\u6237\u63cf\u8ff0",\n },\n {\n label: "\u7528\u6237\u4e09",\n value: 3,\n description: "\u6211\u662f\u7528\u6237\u63cf\u8ff0",\n },\n ],\n };\n },\n }}\n />,\n <FunctionSelectFilterItem\n label="\u804c\u80fd\u9009\u62e9"\n name="functionLast"\n onlyAllowLastLevel\n />,\n <FunctionSelectFilterItem\n label="\u804c\u80fd\u9009\u62e9"\n name="function"\n selectLevel={3}\n maxLength={3}\n />,\n <FunctionSelectFilterItem\n label="\u804c\u80fd\u9009\u62e9"\n name="functionSingle"\n single\n />,\n <IndustrySelectFilterItem\n label="\u884c\u4e1a\u9009\u62e9"\n name="industryLast"\n onlyAllowLastLevel\n />,\n <IndustrySelectFilterItem\n label="\u884c\u4e1a\u9009\u62e9"\n name="industry"\n selectLevel={2}\n maxLength={3}\n />,\n <IndustrySelectFilterItem\n label="\u884c\u4e1a\u9009\u62e9"\n name="industrySingle"\n single\n />,\n ],\n ]}\n />\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Filter",packageName:"@components/Filter",component:a}]},{title:"\u9ad8\u7ea7\u7b5b\u9009",description:"\u5c55\u793a AdvancedFilter \u7ec4\u4ef6\u7684\u9ad8\u7ea7\u7b5b\u9009\u529f\u80fd\uff0c\u9002\u7528\u4e8e\u590d\u6742\u7b5b\u9009\u573a\u666f",code:'const {\n default: Filter,\n AdvancedFilter,\n InputFilterItem,\n DatePickerFilterItem,\n DateRangePickerFilterItem,\n TypeDateRangePickerFilterItem,\n CityFilterItem,\n AdvancedSelectFilterItem,\n UserFilterItem,\n FunctionSelectFilterItem,\n IndustrySelectFilterItem,\n NumberRangeFilterItem,\n getFilterValue,\n FilterItemContainer,\n} = _Filter;\nconst { useState } = React;\n\nconst {\n CityFilterItem: CityAdvancedFilterItem,\n ListFilterItem,\n InputFilterItem: InputAdvancedFilterItem,\n} = AdvancedFilter.fields;\nconst BaseExample = () => {\n const [value, onChange] = useState([]);\n return (\n <AdvancedFilter\n value={value}\n onChange={(value) => {\n console.log(getFilterValue(value));\n onChange(value);\n }}\n list={[\n [<CityAdvancedFilterItem name="currentCity" label="\u5f53\u524d\u57ce\u5e02" single />],\n [<CityAdvancedFilterItem name="expectCity" label="\u671f\u671b\u57ce\u5e02" />],\n [\n <ListFilterItem\n name="experience"\n label="\u5de5\u4f5c\u7ecf\u9a8c"\n single\n items={[\n {\n value: [null, 1],\n label: "1\u5e74\u4ee5\u4e0b",\n },\n {\n value: [1, 5],\n label: "1-5\u5e74",\n },\n { value: [5, null], label: "5\u5e74\u4ee5\u4e0a" },\n ]}\n custom={<NumberRangeFilterItem label="\u81ea\u5b9a\u4e49" unit="\u5e74" />}\n />,\n ],\n [<InputAdvancedFilterItem name="company" label="\u516c\u53f8" />],\n ]}\n more={[\n <InputFilterItem label="\u6587\u5b57" name="text" />,\n <CityFilterItem label="\u57ce\u5e02" name="city" />,\n <FilterItemContainer name="select" label="\u9ad8\u7ea7\u9009\u62e9">\n {(props) => (\n <div>\n <AdvancedSelectFilterItem\n {...props}\n api={{\n loader: () => {\n return {\n pageData: [\n { label: "\u7b2c\u4e00\u9879", value: 1 },\n {\n label: "\u7b2c\u4e8c\u9879",\n value: 2,\n disabled: true,\n },\n {\n label: "\u7b2c\u4e09\u9879",\n value: 3,\n },\n ],\n };\n },\n }}\n />\n </div>\n )}\n </FilterItemContainer>,\n <DatePickerFilterItem label="\u65e5\u671f" name="date" picker="week" />,\n <TypeDateRangePickerFilterItem\n label="\u590d\u6742\u65e5\u671f\u8303\u56f4"\n name="type-data-range"\n allowEmpty={[true, true]}\n />,\n <DateRangePickerFilterItem label="\u65e5\u671f\u8303\u56f4" name="date-range" />,\n <UserFilterItem\n label="\u7528\u6237\u9009\u62e9"\n name="user"\n api={{\n loader: () => {\n return {\n pageData: [\n {\n label: "\u7528\u6237\u4e00",\n value: 1,\n description: "\u6211\u662f\u7528\u6237\u63cf\u8ff0",\n },\n {\n label: "\u7528\u6237\u4e8c",\n value: 2,\n description: "\u6211\u662f\u7528\u6237\u63cf\u8ff0",\n },\n {\n label: "\u7528\u6237\u4e09",\n value: 3,\n description: "\u6211\u662f\u7528\u6237\u63cf\u8ff0",\n },\n ],\n };\n },\n }}\n />,\n <FunctionSelectFilterItem\n label="\u804c\u80fd\u9009\u62e9"\n name="function"\n onlyAllowLastLevel\n single\n />,\n <IndustrySelectFilterItem\n label="\u884c\u4e1a\u9009\u62e9"\n name="industry"\n onlyAllowLastLevel\n />,\n ]}\n />\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Filter",packageName:"@components/Filter",component:a}]},{title:"\u6811\u5f62\u7b5b\u9009",description:"\u5c55\u793a TreeFilterItem \u6811\u5f62\u9009\u62e9\u7ec4\u4ef6\u7684\u4f7f\u7528",code:'const { default: Filter, TreeFilterItem } = _Filter;\nconst { default: treeData } = _data;\nconst { useState } = React;\nconst { Space } = antd;\n\nconst BaseExample = () => {\n const [filter, setFilter] = useState([]);\n const [filter2, setFilter2] = useState([]);\n\n return (\n <Space direction="vertical">\n <Filter\n value={filter}\n onChange={setFilter}\n list={[\n [\n <TreeFilterItem\n name="tree"\n single\n label="\u6811\u7ec4\u4ef6"\n fieldNames={{\n title: "name",\n key: "id",\n children: "children",\n }}\n api={{\n loader: () => {\n return treeData.children;\n },\n }}\n />,\n ],\n ]}\n />\n <Filter\n value={filter2}\n onChange={setFilter2}\n list={[\n [\n <TreeFilterItem\n name="tree"\n label="\u6811\u7ec4\u4ef6"\n fieldNames={{\n title: "name",\n key: "id",\n children: "children",\n }}\n api={{\n loader: () => {\n return treeData.children;\n },\n }}\n />,\n ],\n ]}\n />\n </Space>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Filter",packageName:"@components/Filter",component:a},{name:"antd",packageName:"antd",component:d},{name:"_data",packageName:"@components/Filter/doc/mock/tree-data.json",component:e.t(o,2)}]},{title:"\u7b5b\u9009\u503c\u5c55\u793a",description:"\u5c55\u793a FilterValueDisplay\u3001FilterItem\u3001FilterLines\u3001PopoverItem \u7b49\u7ec4\u4ef6\u7684\u72ec\u7acb\u4f7f\u7528",code:'const {\n FilterValueDisplay,\n FilterItem,\n FilterLines,\n PopoverItem,\n InputFilterItem,\n CityFilterItem,\n AdvancedSelectFilterItem,\n UserFilterItem,\n FunctionSelectFilterItem,\n IndustrySelectFilterItem,\n} = _Filter;\nconst { Space, Input } = antd;\nconst { useState } = React;\nconst BaseExample = () => {\n const [value, setValue] = useState([\n {\n label: "\u57ce\u5e02",\n name: "city",\n value: [\n { label: "\u4e0a\u6d77", value: "010" },\n { label: "\u5317\u4eac", value: "020" },\n ],\n },\n {\n label: "\u804c\u80fd",\n name: "function",\n value: [\n { label: "\u4ea7\u54c1\u7ecf\u7406", value: "010" },\n { label: "\u9500\u552e", value: "020" },\n {\n label: "\u5ba2\u6237\u7ecf\u7406",\n value: "030",\n },\n ],\n },\n ]);\n return (\n <Space direction="vertical">\n <FilterValueDisplay value={value} onChange={setValue} />\n <Space>\n <FilterItem label="\u5ba2\u6237" />\n <FilterItem label="\u5ba2\u6237" active />\n <FilterItem label="\u5ba2\u6237" open />\n <FilterItem label="\u8d85\u957f\u8d85\u957f\u8d85\u957f\u8d85\u957f\u8d85\u957f\u8d85\u957f\u8d85\u957f\u8d85\u957f" active open />\n </Space>\n <FilterLines\n list={[\n [\n <FilterItem label="\u5ba2\u6237" />,\n <FilterItem label="\u804c\u4f4d" />,\n <FilterItem label="\u804c\u4f4d\u8d1f\u8d23\u4eba" />,\n ],\n [\n <FilterItem label="\u5f00\u59cb\u65f6\u95f4" />,\n <FilterItem label="\u7ed3\u675f\u65f6\u95f4" />,\n <FilterItem label="\u804c\u4f4dBD\u4eba" />,\n ],\n [\n <FilterItem label="\u5f00\u59cb\u65f6\u95f4" />,\n <FilterItem label="\u7ed3\u675f\u65f6\u95f4" />,\n <FilterItem label="\u804c\u4f4dBD\u4eba" />,\n ],\n [\n <FilterItem label="\u5f00\u59cb\u65f6\u95f4" />,\n <FilterItem label="\u7ed3\u675f\u65f6\u95f4" />,\n <FilterItem label="\u804c\u4f4dBD\u4eba" />,\n ],\n ]}\n />\n <PopoverItem label="\u5ba2\u6237">\n {({ value, onChange }) => (\n <Input value={value} onChange={(e) => onChange(e.target.value)} />\n )}\n </PopoverItem>\n <FilterLines\n list={[\n [\n <InputFilterItem label="\u6587\u5b57" />,\n <CityFilterItem label="\u57ce\u5e02" />,\n <AdvancedSelectFilterItem\n label="\u9ad8\u7ea7\u9009\u62e9"\n api={{\n loader: () => {\n return {\n pageData: [\n { label: "\u7b2c\u4e00\u9879", value: 1 },\n { label: "\u7b2c\u4e8c\u9879", value: 2, disabled: true },\n {\n label: "\u7b2c\u4e09\u9879",\n value: 3,\n },\n ],\n };\n },\n }}\n />,\n <UserFilterItem\n label="\u7528\u6237\u9009\u62e9"\n api={{\n loader: () => {\n return {\n pageData: [\n {\n label: "\u7528\u6237\u4e00",\n value: 1,\n description: "\u6211\u662f\u7528\u6237\u63cf\u8ff0",\n },\n {\n label: "\u7528\u6237\u4e8c",\n value: 2,\n description: "\u6211\u662f\u7528\u6237\u63cf\u8ff0",\n },\n {\n label: "\u7528\u6237\u4e09",\n value: 3,\n description: "\u6211\u662f\u7528\u6237\u63cf\u8ff0",\n },\n ],\n };\n },\n }}\n />,\n <FunctionSelectFilterItem label="\u804c\u80fd\u9009\u62e9" />,\n <IndustrySelectFilterItem label="\u884c\u4e1a\u9009\u62e9" />,\n ],\n ]}\n />\n </Space>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Filter",packageName:"@components/Filter",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u6570\u503c\u8303\u56f4\u7b5b\u9009",description:"\u5c55\u793a NumberRangeFilterItem \u6570\u503c\u8303\u56f4\u7b5b\u9009\u7ec4\u4ef6\u7684\u4f7f\u7528",code:'const {\n default: Filter,\n NumberRangeFilterItem,\n getFilterValue,\n} = _Filter;\nconst { useState } = React;\n\nconst BaseExample = () => {\n const [value, onChange] = useState([]);\n\n return (\n <Filter\n value={value}\n onChange={(value) => {\n console.log(\'\u7b5b\u9009\u503c:\', getFilterValue(value));\n onChange(value);\n }}\n list={[\n [\n <NumberRangeFilterItem label="\u5e74\u9f84" name="age" unit="\u5c81" />,\n <NumberRangeFilterItem label="\u85aa\u8d44" name="salary" unit="\u4e07" />,\n <NumberRangeFilterItem label="\u5de5\u4f5c\u7ecf\u9a8c" name="experience" unit="\u5e74" />,\n ],\n ]}\n />\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Filter",packageName:"@components/Filter",component:a}]},{title:"\u7ea7\u8054\u7b5b\u9009",description:"\u5c55\u793a CascaderFilterItem \u7ea7\u8054\u9009\u62e9\u7ec4\u4ef6\u7684\u4f7f\u7528",code:"const {\n default: Filter,\n CascaderFilterItem,\n getFilterValue,\n} = _Filter;\nconst { useState } = React;\n\nconst options = [\n {\n label: '\u6d59\u6c5f',\n value: 'zhejiang',\n children: [\n {\n label: '\u676d\u5dde',\n value: 'hangzhou',\n children: [\n { label: '\u897f\u6e56\u533a', value: 'xihu' },\n { label: '\u6ee8\u6c5f\u533a', value: 'binjiang' },\n { label: '\u4f59\u676d\u533a', value: 'yuhang' },\n ],\n },\n {\n label: '\u5b81\u6ce2',\n value: 'ningbo',\n children: [\n { label: '\u6d77\u66d9\u533a', value: 'haishu' },\n { label: '\u6c5f\u5317\u533a', value: 'jiangbei' },\n ],\n },\n ],\n },\n {\n label: '\u6c5f\u82cf',\n value: 'jiangsu',\n children: [\n {\n label: '\u5357\u4eac',\n value: 'nanjing',\n children: [\n { label: '\u7384\u6b66\u533a', value: 'xuanwu' },\n { label: '\u79e6\u6dee\u533a', value: 'qinhuai' },\n ],\n },\n {\n label: '\u82cf\u5dde',\n value: 'suzhou',\n children: [\n { label: '\u59d1\u82cf\u533a', value: 'gusu' },\n { label: '\u5434\u4e2d\u533a', value: 'wuzhong' },\n ],\n },\n ],\n },\n];\n\nconst BaseExample = () => {\n const [value, onChange] = useState([]);\n\n return (\n <Filter\n value={value}\n onChange={(value) => {\n console.log('\u7b5b\u9009\u503c:', getFilterValue(value));\n onChange(value);\n }}\n list={[\n [\n <CascaderFilterItem\n label=\"\u5730\u533a\u9009\u62e9\"\n name=\"region\"\n options={options}\n placeholder=\"\u8bf7\u9009\u62e9\u5730\u533a\"\n />,\n ],\n ]}\n />\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_Filter",packageName:"@components/Filter",component:a}]},{title:"\u81ea\u5b9a\u4e49\u7b5b\u9009\u5b57\u6bb5",description:"\u5c55\u793a\u5982\u4f55\u4f7f\u7528 withFilterValue \u5c06\u539f\u751f Select \u7ec4\u4ef6\u5305\u88c5\u6210\u7b5b\u9009\u5b57\u6bb5",code:"const {\n default: Filter,\n InputFilterItem,\n CityFilterItem,\n withFilterValue,\n} = _Filter;\nconst { Select } = antd;\nconst { useState } = React;\n\n// \u81ea\u5b9a\u4e49\u4e0b\u62c9\u7b5b\u9009\u7ec4\u4ef6 - \u5c55\u793a\u5982\u4f55\u4f7f\u7528 withFilterValue \u5305\u88c5\u539f\u751f\u7ec4\u4ef6\nconst CustomSelectFilter = withFilterValue(({ label, value, onChange, options }) => {\n return (\n <Select\n placeholder={`\u8bf7\u9009\u62e9${label}`}\n value={value?.value}\n onChange={(val) => onChange({ label, value: val })}\n allowClear\n style={{ width: 200 }}\n options={options}\n />\n );\n});\n\nconst BaseExample = () => {\n const [value, onChange] = useState([]);\n\n return (\n <Filter\n value={value}\n onChange={(value) => {\n console.log('\u7b5b\u9009\u503c:', value);\n onChange(value);\n }}\n list={[\n [\n <InputFilterItem label=\"\u90e8\u95e8\" name=\"department\" placeholder=\"\u8bf7\u8f93\u5165\u90e8\u95e8\u540d\u79f0\" />,\n <CityFilterItem label=\"\u57ce\u5e02\" name=\"city\" />,\n <CustomSelectFilter\n label=\"\u9879\u76ee\u72b6\u6001\"\n name=\"status\"\n options={[\n { label: '\u8fdb\u884c\u4e2d', value: 'ongoing' },\n { label: '\u5df2\u5b8c\u6210', value: 'completed' },\n { label: '\u5df2\u6682\u505c', value: 'paused' },\n { label: '\u5df2\u53d6\u6d88', value: 'cancelled' },\n ]}\n />,\n <CustomSelectFilter\n label=\"\u4f18\u5148\u7ea7\"\n name=\"priority\"\n options={[\n { label: '\u9ad8', value: 'high' },\n { label: '\u4e2d', value: 'medium' },\n { label: '\u4f4e', value: 'low' },\n ]}\n />,\n ],\n ]}\n />\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_Filter",packageName:"@components/Filter",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"FilterProvider \u548c useFilter",description:"\u5c55\u793a\u5982\u4f55\u4f7f\u7528 FilterProvider \u548c useFilter Hook \u81ea\u5b9a\u4e49\u7b5b\u9009\u754c\u9762",code:'const {\n FilterProvider,\n FilterLines,\n FilterValueDisplay,\n useFilter,\n InputFilterItem,\n CityFilterItem,\n UserFilterItem,\n FunctionSelectFilterItem,\n IndustrySelectFilterItem,\n DatePickerFilterItem,\n NumberRangeFilterItem,\n} = _Filter;\nconst { Space, Card, Button, Modal, Tag, Alert } = antd;\nconst { useState } = React;\n\n// \u6f14\u793a FilterProvider \u548c useFilter \u7684\u4f7f\u7528\nconst CustomFilterContent = () => {\n const { value, onChange } = useFilter();\n const [modalVisible, setModalVisible] = useState(false);\n\n const handleViewFilterValue = () => {\n setModalVisible(true);\n };\n\n const renderFilterValue = () => {\n if (!value) {\n return <p>\u6682\u65e0\u7b5b\u9009\u6761\u4ef6</p>;\n }\n\n // \u5904\u7406 value \u53ef\u80fd\u662f Map \u7684\u60c5\u51b5\n const valueArray = value instanceof Map ? Array.from(value.values()) : (Array.isArray(value) ? value : []);\n\n if (valueArray.length === 0) {\n return <p>\u6682\u65e0\u7b5b\u9009\u6761\u4ef6</p>;\n }\n\n return (\n <Space direction="vertical" size={12}>\n {valueArray.map((item, index) => (\n <Tag key={index} color="blue" style={{ fontSize: 14 }}>\n <strong>{item.label}</strong>: {Array.isArray(item.value)\n ? item.value.map(v => v.label).join(\', \')\n : item.value?.label \|\| item.value}\n </Tag>\n ))}\n </Space>\n );\n };\n\n return (\n <Space direction="vertical" size={16} style={{ width: \'100%\' }}>\n <Alert\n message="\u4f7f\u7528\u63d0\u793a"\n description="\u70b9\u51fb\u7b5b\u9009\u9879\uff0c\u8f93\u5165\u503c\u540e\u70b9\u51fb\u300c\u786e\u5b9a\u300d\u6309\u94ae\uff0c\u7136\u540e\u70b9\u51fb\u4e0b\u65b9\u6309\u94ae\u67e5\u770b\u7b5b\u9009\u6761\u4ef6"\n type="info"\n showIcon\n />\n\n <Card title="\u7b5b\u9009\u5668" size="small">\n <FilterLines\n list={[\n [\n <InputFilterItem label="\u59d3\u540d" name="name" />,\n <CityFilterItem label="\u57ce\u5e02" name="city" />,\n <UserFilterItem label="\u7528\u6237" name="user" />,\n <FunctionSelectFilterItem label="\u804c\u80fd" name="function" />,\n ],\n [\n <IndustrySelectFilterItem label="\u884c\u4e1a" name="industry" />,\n <DatePickerFilterItem label="\u521b\u5efa\u65f6\u95f4" name="createTime" />,\n <NumberRangeFilterItem label="\u5e74\u9f84" name="age" />,\n ],\n ]}\n />\n </Card>\n\n <Button type="primary" onClick={handleViewFilterValue}>\n \u67e5\u770b\u7b5b\u9009\u503c\n </Button>\n\n <Modal\n title="\u5f53\u524d\u7b5b\u9009\u503c"\n open={modalVisible}\n onCancel={() => setModalVisible(false)}\n footer={[\n <Button key="close" onClick={() => setModalVisible(false)}>\n \u5173\u95ed\n </Button>,\n ]}\n width={600}\n >\n {renderFilterValue()}\n <div style={{ marginTop: 16 }}>\n <Button\n type="link"\n size="small"\n onClick={() => {\n navigator.clipboard.writeText(JSON.stringify(value, null, 2));\n }}\n >\n \u590d\u5236 JSON \u6570\u636e\n </Button>\n </div>\n </Modal>\n </Space>\n );\n};\n\nconst BaseExample = () => {\n const [value, setValue] = useState([]);\n\n return (\n <FilterProvider value={value} onChange={setValue}>\n <CustomFilterContent />\n {value.length > 0 && (\n <FilterValueDisplay value={value} onChange={setValue} />\n )}\n </FilterProvider>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Filter",packageName:"@components/Filter",component:a},{name:"antd",packageName:"antd",component:d}]}]}}},91707(n,t,e){e.d(t,{A:()=>o});var a=e(29871),d=e(55199);const o={name:"flex-box",summary:"",api:'<h3>useFlexBox</h3>\n<p>const {ref, column} = useFlexBox(props);</p>\n<p>\u6ce8\u610f\uff1a\u8fd4\u56de\u7684 ref \u5fc5\u987b\u4f20\u7ed9\u4e00\u4e2a dom \u7684 ref</p>\n<p>\u7ee7\u627f\u4e86<a href="https://ant.design/components/list-cn#list">Ant Design List props</a>\u7684\u53c2\u6570\uff0c\u540c\u65f6\u4e5f\u65b0\u589e\u4e86\u4e24\u4e2a\u53c2\u6570\uff1a</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>columns</td>\n<td>\u5b9e\u9645\u7528\u4e8e <code>List</code> \u7684 <code>grid</code></td>\n<td><code>columnProps[]</code></td>\n<td><code>defaultColumns</code></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u8bbe\u7f6e <code>column</code></td>\n<td>(column) => onChange()</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h4>columnProps</h4>\n<p>\u9ed8\u8ba4\u503c\uff1a</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>width</td>\n<td>\u89c6\u53e3\u5bbd\u5ea6</td>\n<td>number</td>\n<td>-</td>\n</tr>\n<tr>\n<td>col</td>\n<td>\u5217\u6570</td>\n<td>number</td>\n<td>-</td>\n</tr>\n<tr>\n<td>size</td>\n<td>\u6839\u636e <code>col</code> \u5217\u6570\u586b\u6bcf\u9875\u6570\u636e\u52a0\u8f7d\u591a\u5c11\u6761</td>\n<td>number</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<pre><code class="language-text"> defaultColumns = [\n {width: 576, col: 1, size: 15},\n {width: 768, col: 2, size: 12},\n {width: 1200, col: 4, size: 12},\n {width: 1600, col: 5, size: 15}\n ]\n</code></pre>\n<h3>FlexBox</h3>\n<p>\u540c <code>useFlexBox</code> \u53c2\u6570</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>outerClassName</td>\n<td><code>FlexBox</code> \u7236\u5143\u7d20\u7684 <code>className</code></td>\n<td>string</td>\n<td>-</td>\n</tr>\n<tr>\n<td>gutter</td>\n<td>\u6805\u683c\u95f4\u9694</td>\n<td>number</td>\n<td>16</td>\n</tr>\n</tbody>\n</table>\n<h4>FlexBox.Item</h4>\n<p>\u540c <a href="https://ant.design/components/list-cn#listitem">Ant Design List.Item</a></p>',example:{isFull:!1,className:"",style:"",list:[{title:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u6807\u9898",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const {default:FlexBox} = _FlexBox;\nconst { Card } = antd;\n\nconst BaseExample = () => {\n return (\n <FlexBox\n dataSource={[\n {\n title: "Title 1",\n },\n {\n title: "Title 2",\n },\n {\n title: "Title 3",\n },\n {\n title: "Title 4",\n },\n {\n title: "Title 5",\n },\n {\n title: "Title 6",\n },\n ]}\n renderItem={(item) => (\n <FlexBox.Item>\n <Card title={item.title}>Card content</Card>\n </FlexBox.Item>\n )}\n />\n );\n};\n\nrender(<BaseExample />);\n\n\n',scope:[{name:"_FlexBox",packageName:"@kne/flex-box",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u6807\u9898",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:"const {FlexBoxFetch} = _FlexBox;\nconst {Card, Button} = antd;\nconst {useRef} = React;\nconst BaseExample = () => {\n const ref = useRef();\n return (<div>\n <FlexBoxFetch\n ref={ref}\n pagination={{ position: 'bottom', align: 'center' }}\n getFetchApi={({size}) => {\n return {\n data: {\n pageSize: size,\n }, loader: ({data}) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n pageData: Array.from({length: data.pageSize}).map((item, index) => {\n return {\n key: index, title: `\u7b2c${index}\u9879`,\n };\n }),\n });\n }, 1000);\n });\n },\n };\n }}\n renderItem={(item) => (<FlexBoxFetch.Item>\n <Card title={item.title}>Card content</Card>\n </FlexBoxFetch.Item>)}\n />\n <Button\n onClick={() => {\n console.log(ref.current);\n }}\n >\n \u83b7\u53d6FetchApi\n </Button>\n </div>);\n};\n\nrender(<BaseExample/>);\n\n",scope:[{name:"_FlexBox",packageName:"@kne/flex-box",component:a},{name:"antd",packageName:"antd",component:d}]}]}}},68223(n,t,e){e.d(t,{A:()=>s});var a=e(96252),d=e(3382),o=e(55199),r=e(72752),l=e(82723),i=e(65317);const s={name:"FormInfo",summary:"<p>\u529f\u80fd\u5f3a\u5927\u7684\u8868\u5355\u7ec4\u4ef6\uff0c\u63d0\u4f9b\u5b8c\u6574\u7684\u6570\u636e\u7ba1\u7406\u3001\u6821\u9a8c\u548c\u6837\u5f0f\u89e3\u51b3\u65b9\u6848</p>\n<p>FormInfo \u662f\u4e00\u4e2a\u5168\u529f\u80fd\u7684\u8868\u5355\u89e3\u51b3\u65b9\u6848\uff0c\u96c6\u6210\u4e86\u6570\u636e\u5f55\u5165\u3001\u6821\u9a8c\u89c4\u5219\u7ba1\u7406\u3001\u6837\u5f0f\u5e03\u5c40\u7b49\u529f\u80fd\uff0c\u9002\u7528\u4e8e\u5404\u79cd\u590d\u6742\u573a\u666f\u7684\u8868\u5355\u9700\u6c42\u3002</p>\n<h3>\u6838\u5fc3\u7279\u6027</h3>\n<p><strong>\u5206\u5c42\u6821\u9a8c\u89c4\u5219\u7ba1\u7406</strong></p>\n<ul>\n<li>\u652f\u6301\u9ed8\u8ba4\u7ea7\u3001preset \u7ea7\u3001Form \u7ea7\u4e09\u5c42\u6821\u9a8c\u89c4\u5219\u8986\u76d6</li>\n<li>\u5b57\u7b26\u4e32\u5f62\u5f0f\u89c4\u5219\u8c03\u7528\uff0c\u7b80\u6d01\u76f4\u89c2\uff08\u5982 <code>REQ LEN-3-10 EMAIL</code>\uff09</li>\n<li>\u652f\u6301\u5f02\u6b65\u6821\u9a8c\u89c4\u5219\uff0c\u6ee1\u8db3\u590d\u6742\u4e1a\u52a1\u573a\u666f\u9700\u6c42</li>\n<li>\u89c4\u5219\u53c2\u6570\u5316\u652f\u6301\uff0c\u7075\u6d3b\u53ef\u914d\u7f6e</li>\n</ul>\n<p><strong>\u4e30\u5bcc\u7684\u8868\u5355\u7ec4\u4ef6</strong></p>\n<ul>\n<li>\u63d0\u4f9b\u57fa\u7840\u7ec4\u4ef6\uff1aInput\u3001TextArea\u3001Select\u3001DatePicker\u3001RadioGroup\u3001Checkbox\u3001Switch \u7b49</li>\n<li>\u63d0\u4f9b\u4e1a\u52a1\u7ec4\u4ef6\uff1a\u5730\u5740\u9009\u62e9\u3001\u884c\u4e1a\u9009\u62e9\u3001\u804c\u80fd\u9009\u62e9\u3001\u7528\u6237\u9009\u62e9\u3001\u7ea7\u8054\u9009\u62e9\u7b49</li>\n<li>\u63d0\u4f9b\u9ad8\u7ea7\u7ec4\u4ef6\uff1a\u5934\u50cf\u4e0a\u4f20\u3001\u6587\u4ef6\u4e0a\u4f20\u3001\u7b7e\u540d\u3001\u85aa\u8d44\u8f93\u5165\u3001\u7535\u8bdd\u53f7\u7801\u8f93\u5165\u3001\u91d1\u989d\u8f93\u5165\u7b49</li>\n<li>\u6240\u6709\u7ec4\u4ef6\u7edf\u4e00\u5c01\u88c5\uff0c\u4f7f\u7528\u4f53\u9a8c\u4e00\u81f4</li>\n</ul>\n<p><strong>\u7075\u6d3b\u7684\u5e03\u5c40\u65b9\u5f0f</strong></p>\n<ul>\n<li>FormInfo \u652f\u6301\u5206\u7ec4\u5c55\u793a\u548c\u5206\u680f\u5e03\u5c40</li>\n<li>List \u7ec4\u4ef6\u5b9e\u73b0\u591a\u6bb5\u5f0f\u5217\u8868\u8868\u5355\uff0c\u652f\u6301\u52a8\u6001\u6dfb\u52a0\u5220\u9664</li>\n<li>TableList \u7ec4\u4ef6\u63d0\u4f9b\u8868\u683c\u5f62\u5f0f\u7684\u5217\u8868\u5c55\u793a</li>\n<li>\u652f\u6301\u65e0\u9650\u5d4c\u5957\uff0c\u8f7b\u677e\u5b9e\u73b0\u590d\u6742\u8868\u5355\u7ed3\u6784</li>\n</ul>\n<p><strong>\u591a\u79cd\u8868\u5355\u5f62\u6001</strong></p>\n<ul>\n<li>Form\uff1a\u57fa\u7840\u8868\u5355\u7ec4\u4ef6</li>\n<li>FormModal\uff1a\u5f39\u7a97\u8868\u5355\uff0c\u914d\u5408 Modal \u4f7f\u7528</li>\n<li>FormDrawer\uff1a\u62bd\u5c49\u8868\u5355\uff0c\u914d\u5408 Drawer \u4f7f\u7528</li>\n<li>FormStepModal\uff1a\u5206\u6b65\u8868\u5355\uff0c\u652f\u6301\u591a\u6b65\u9aa4\u6570\u636e\u6536\u96c6</li>\n<li>\u63d0\u4f9b useFormModal\u3001useFormDrawer\u3001useFormStepModal Hooks</li>\n</ul>\n<p><strong>\u4e8b\u4ef6\u9a71\u52a8\u67b6\u6784</strong></p>\n<ul>\n<li>\u5b8c\u5584\u7684\u4e8b\u4ef6\u673a\u5236\uff0c\u652f\u6301\u8868\u5355\u751f\u547d\u5468\u671f\u76d1\u542c</li>\n<li>\u53ef\u76d1\u542c\u5b57\u6bb5\u6dfb\u52a0\u3001\u5220\u9664\u3001\u6821\u9a8c\u3001\u503c\u53d8\u5316\u7b49\u4e8b\u4ef6</li>\n<li>\u4fbf\u4e8e\u6269\u5c55\u548c\u96c6\u6210\u81ea\u5b9a\u4e49\u903b\u8f91</li>\n</ul>\n<p><strong>\u62e6\u622a\u5668\u652f\u6301</strong></p>\n<ul>\n<li>\u652f\u6301\u5b57\u6bb5\u503c\u62e6\u622a\u5668</li>\n<li>\u53ef\u5b9e\u73b0 Field \u503c\u548c Form Data \u4e4b\u95f4\u7684\u8f6c\u6362</li>\n<li>\u89e3\u51b3\u65e5\u671f\u683c\u5f0f\u5316\u3001\u6570\u636e\u6620\u5c04\u7b49\u5e38\u89c1\u95ee\u9898</li>\n</ul>\n<h3>\u9002\u7528\u573a\u666f</h3>\n<p><strong>\u6570\u636e\u91c7\u96c6\u573a\u666f</strong></p>\n<ul>\n<li>\u7528\u6237\u6ce8\u518c\u3001\u4fe1\u606f\u5f55\u5165\u3001\u95ee\u5377\u8c03\u67e5\u7b49\u57fa\u7840\u8868\u5355</li>\n<li>\u4e2a\u4eba\u8d44\u6599\u7f16\u8f91\u3001\u8bbe\u7f6e\u4fee\u6539\u7b49\u8868\u5355\u573a\u666f</li>\n</ul>\n<p><strong>\u4e1a\u52a1\u6d41\u7a0b\u573a\u666f</strong></p>\n<ul>\n<li>\u5ba1\u6279\u6d41\u7a0b\u4e2d\u7684\u4fe1\u606f\u586b\u5199</li>\n<li>\u8ba2\u5355\u521b\u5efa\u3001\u9879\u76ee\u7acb\u9879\u7b49\u590d\u6742\u8868\u5355</li>\n<li>\u591a\u6b65\u9aa4\u5411\u5bfc\u5f0f\u6570\u636e\u6536\u96c6</li>\n</ul>\n<p><strong>\u6570\u636e\u7ba1\u7406\u573a\u666f</strong></p>\n<ul>\n<li>\u5217\u8868\u6570\u636e\u7684\u6279\u91cf\u7f16\u8f91</li>\n<li>\u52a8\u6001\u5217\u8868\u7684\u589e\u5220\u6539\u67e5</li>\n<li>\u590d\u6742\u5d4c\u5957\u6570\u636e\u7ed3\u6784\u7684\u5f55\u5165</li>\n</ul>\n<p><strong>\u96c6\u6210\u573a\u666f</strong></p>\n<ul>\n<li>\u914d\u5408\u5f39\u7a97\u3001\u62bd\u5c49\u7ec4\u4ef6\u7684\u8868\u5355\u5c55\u793a</li>\n<li>\u4e0e\u6570\u636e\u52a0\u8f7d\u7ec4\u4ef6\u7ed3\u5408\u7684\u8868\u5355\u7f16\u8f91</li>\n<li>\u81ea\u5b9a\u4e49\u4e1a\u52a1\u7ec4\u4ef6\u7684\u8868\u5355\u96c6\u6210</li>\n</ul>\n<h3>\u6280\u672f\u4eae\u70b9</h3>\n<p><strong>\u4e0a\u4e0b\u6587\u4e0e Ref \u53cc\u91cd API</strong></p>\n<ul>\n<li>\u63d0\u4f9b useFormContext Hook \u5728\u7ec4\u4ef6\u5185\u83b7\u53d6\u8868\u5355\u5b9e\u4f8b</li>\n<li>\u652f\u6301 ref \u65b9\u5f0f\u5728\u5916\u90e8\u8bbf\u95ee\u8868\u5355\u65b9\u6cd5</li>\n<li>\u7075\u6d3b\u7684\u8868\u5355\u64cd\u4f5c\u65b9\u5f0f</li>\n</ul>\n<p><strong>\u591a\u8bed\u8a00\u652f\u6301</strong></p>\n<ul>\n<li>\u5185\u7f6e\u56fd\u9645\u5316\u652f\u6301</li>\n<li>\u53ef\u81ea\u5b9a\u4e49\u591a\u8bed\u8a00\u914d\u7f6e</li>\n<li>\u652f\u6301\u5b57\u6bb5\u7ea7\u522b\u7684\u8bed\u8a00\u5207\u6362</li>\n</ul>\n<p><strong>\u7c7b\u578b\u5b89\u5168</strong></p>\n<ul>\n<li>\u5b8c\u5584\u7684 TypeScript \u7c7b\u578b\u5b9a\u4e49</li>\n<li>\u7f16\u8bd1\u65f6\u7c7b\u578b\u68c0\u67e5</li>\n<li>\u826f\u597d\u7684\u5f00\u53d1\u4f53\u9a8c</li>\n</ul>\n<p><strong>\u9ad8\u5ea6\u53ef\u6269\u5c55</strong></p>\n<ul>\n<li>Field \u7ec4\u4ef6\u5b9e\u73b0\u89c4\u8303\u6e05\u6670</li>\n<li>\u652f\u6301\u81ea\u5b9a\u4e49 Field \u7ec4\u4ef6</li>\n<li>\u9009\u62e9\u5668\u7ec4\u4ef6\u7edf\u4e00\u5c01\u88c5\u6a21\u5f0f</li>\n</ul>\n<p><strong>\u6027\u80fd\u4f18\u5316</strong></p>\n<ul>\n<li>\u6309\u9700\u52a0\u8f7d\u7ec4\u4ef6</li>\n<li>\u4f18\u5316\u7684\u91cd\u6e32\u67d3\u673a\u5236</li>\n<li>\u652f\u6301\u5927\u89c4\u6a21\u8868\u5355\u573a\u666f</li>\n</ul>",api:'<h3>Form</h3>\n<p>\u8868\u5355\u6838\u5fc3\u7ec4\u4ef6\uff0c\u63d0\u4f9b\u6570\u636e\u57df\u7ba1\u7406\u3001\u6821\u9a8c\u89c4\u5219\u3001\u4e8b\u4ef6\u9a71\u52a8\u7b49\u529f\u80fd\u3002</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>data</td>\n<td>\u8868\u5355\u521d\u59cb\u6570\u636e</td>\n<td>object</td>\n<td>\u5426</td>\n<td>{}</td>\n</tr>\n<tr>\n<td>rules</td>\n<td>\u81ea\u5b9a\u4e49\u6821\u9a8c\u89c4\u5219\uff0ckey\u4e3a\u89c4\u5219\u540d\uff0cvalue\u4e3a\u6821\u9a8c\u51fd\u6570</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>interceptors</td>\n<td>\u81ea\u5b9a\u4e49\u62e6\u622a\u5668\u914d\u7f6e</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onSubmit</td>\n<td>\u8868\u5355\u63d0\u4ea4\u6210\u529f\u7684\u56de\u8c03\uff0c\u63a5\u6536\u8868\u5355\u6570\u636e</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onError</td>\n<td>\u8868\u5355\u6821\u9a8c\u5931\u8d25\u7684\u56de\u8c03</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onPrevSubmit</td>\n<td>\u63d0\u4ea4\u524d\u56de\u8c03\uff0c\u6821\u9a8c\u524d\u89e6\u53d1</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>debug</td>\n<td>\u662f\u5426\u5f00\u542f\u8c03\u8bd5\u6a21\u5f0f\uff0c\u6253\u5370\u8868\u5355\u72b6\u6001</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n<tr>\n<td>noFilter</td>\n<td>\u662f\u5426\u7981\u7528\u6570\u636e\u8fc7\u6ee4</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n<tr>\n<td>helperGuideName</td>\n<td>\u5e2e\u52a9\u6307\u5f15\u914d\u7f6e\u540d\u79f0</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>lang</td>\n<td>\u8bed\u8a00\u914d\u7f6e\uff0c\u652f\u6301\u591a\u8bed\u8a00</td>\n<td>array</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>FormInfo</h3>\n<p>\u8868\u5355\u4fe1\u606f\u5206\u7ec4\u7ec4\u4ef6\uff0c\u7528\u4e8e\u7ec4\u7ec7\u548c\u7ba1\u7406\u8868\u5355\u5b57\u6bb5\u7684\u5e03\u5c40\u3002</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>title</td>\n<td>\u5206\u7ec4\u6807\u9898</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>list</td>\n<td>\u5b57\u6bb5\u6570\u7ec4</td>\n<td>array</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>column</td>\n<td>\u5206\u680f\u6570\u91cf\uff0c\u54cd\u5e94\u5f0f\u5e03\u5c40</td>\n<td>number</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>gap</td>\n<td>\u5b57\u6bb5\u95f4\u8ddd</td>\n<td>number</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>extra</td>\n<td>\u989d\u5916\u5185\u5bb9\uff0c\u663e\u793a\u5728\u6807\u9898\u53f3\u4fa7</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>List</h3>\n<p>\u591a\u6bb5\u5f0f\u5217\u8868\u8868\u5355\u7ec4\u4ef6\uff0c\u652f\u6301\u52a8\u6001\u6dfb\u52a0\u548c\u5220\u9664\u8868\u5355\u9879\u3002</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d\uff0c\u5bf9\u5e94\u8868\u5355\u6570\u636e\u4e2d\u7684 key</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>title</td>\n<td>\u5217\u8868\u6807\u9898</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>list</td>\n<td>\u5b57\u6bb5\u6570\u7ec4</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>maxLength</td>\n<td>\u6700\u5927\u6570\u91cf\uff0c\u8fbe\u5230\u540e\u9690\u85cf\u6dfb\u52a0\u6309\u94ae</td>\n<td>number</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>minLength</td>\n<td>\u6700\u5c0f\u6570\u91cf\uff0c\u8fbe\u5230\u540e\u9690\u85cf\u5220\u9664\u6309\u94ae</td>\n<td>number</td>\n<td>\u5426</td>\n<td>0</td>\n</tr>\n<tr>\n<td>addText</td>\n<td>\u6dfb\u52a0\u6309\u94ae\u6587\u672c</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>itemTitle</td>\n<td>\u5355\u9879\u6807\u9898\uff0c\u53ef\u4ee5\u662f\u5b57\u7b26\u4e32\u6216\u51fd\u6570</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>important</td>\n<td>\u662f\u5426\u6807\u8bb0\u4e3a\u91cd\u8981\u9879\uff0c\u6837\u5f0f\u533a\u5206</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n<tr>\n<td>block</td>\n<td>\u662f\u5426\u5360\u6ee1\u4e00\u884c</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n<tr>\n<td>outer</td>\n<td>\u5916\u5c42\u5bb9\u5668\u7ec4\u4ef6</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>Outer</td>\n</tr>\n<tr>\n<td>renderChildren</td>\n<td>\u5b50\u9879\u6e32\u67d3\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>deleteButtonProps</td>\n<td>\u5220\u9664\u6309\u94ae\u5c5e\u6027</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>TableList</h3>\n<p>\u8868\u683c\u5f62\u5f0f\u7684\u5217\u8868\u8868\u5355\u7ec4\u4ef6\uff0c\u7ee7\u627f\u81ea List\uff0c\u63d0\u4f9b\u8868\u683c\u5c55\u793a\u65b9\u5f0f\u3002</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>title</td>\n<td>\u5217\u8868\u6807\u9898</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>list</td>\n<td>\u5b57\u6bb5\u6570\u7ec4</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>maxLength</td>\n<td>\u6700\u5927\u6570\u91cf</td>\n<td>number</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>minLength</td>\n<td>\u6700\u5c0f\u6570\u91cf</td>\n<td>number</td>\n<td>\u5426</td>\n<td>0</td>\n</tr>\n<tr>\n<td>isUnshift</td>\n<td>\u65b0\u589e\u9879\u662f\u5426\u6dfb\u52a0\u5230\u5f00\u5934</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>true</td>\n</tr>\n</tbody>\n</table>\n<h3>FormModal</h3>\n<p>\u5f39\u7a97\u8868\u5355\u7ec4\u4ef6\uff0c\u5c06 Form \u548c Modal \u7ec4\u5408\u4f7f\u7528\u3002</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>open</td>\n<td>\u662f\u5426\u663e\u793a\u5f39\u7a97</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>title</td>\n<td>\u5f39\u7a97\u6807\u9898</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onClose</td>\n<td>\u5173\u95ed\u56de\u8c03</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>formProps</td>\n<td>Form \u7ec4\u4ef6\u5c5e\u6027</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u8868\u5355\u5185\u5bb9</td>\n<td>ReactNode</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>footerButtons</td>\n<td>\u5e95\u90e8\u6309\u94ae\u914d\u7f6e</td>\n<td>array</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>width</td>\n<td>\u5f39\u7a97\u5bbd\u5ea6</td>\n<td>string</td>\n<td>\u5426</td>\n<td>520</td>\n</tr>\n<tr>\n<td>withDecorator</td>\n<td>\u88c5\u9970\u5668\u51fd\u6570\uff0c\u7528\u4e8e\u5305\u88c5\u8868\u5355\u5185\u5bb9</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>FormDrawer</h3>\n<p>\u62bd\u5c49\u8868\u5355\u7ec4\u4ef6\uff0c\u5c06 Form \u548c Drawer \u7ec4\u5408\u4f7f\u7528\u3002</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>open</td>\n<td>\u662f\u5426\u663e\u793a\u62bd\u5c49</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>title</td>\n<td>\u62bd\u5c49\u6807\u9898</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onClose</td>\n<td>\u5173\u95ed\u56de\u8c03</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>formProps</td>\n<td>Form \u7ec4\u4ef6\u5c5e\u6027</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u8868\u5355\u5185\u5bb9</td>\n<td>ReactNode</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>footerButtons</td>\n<td>\u5e95\u90e8\u6309\u94ae\u914d\u7f6e</td>\n<td>array</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>width</td>\n<td>\u62bd\u5c49\u5bbd\u5ea6</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>withDecorator</td>\n<td>\u88c5\u9970\u5668\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>FormStepModal</h3>\n<p>\u5206\u6b65\u8868\u5355\u5f39\u7a97\u7ec4\u4ef6\uff0c\u652f\u6301\u591a\u6b65\u9aa4\u6570\u636e\u6536\u96c6\u3002</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>open</td>\n<td>\u662f\u5426\u663e\u793a\u5f39\u7a97</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>items</td>\n<td>\u6b65\u9aa4\u914d\u7f6e\u6570\u7ec4</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onClose</td>\n<td>\u5173\u95ed\u56de\u8c03</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>footerButtons</td>\n<td>\u5e95\u90e8\u6309\u94ae\u914d\u7f6e</td>\n<td>array</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>withDecorator</td>\n<td>\u88c5\u9970\u5668\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>autoClose</td>\n<td>\u6700\u540e\u4e00\u6b65\u5b8c\u6210\u540e\u662f\u5426\u81ea\u52a8\u5173\u95ed</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>true</td>\n</tr>\n<tr>\n<td>cancelText</td>\n<td>\u53d6\u6d88\u6309\u94ae\u6587\u672c</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>completeText</td>\n<td>\u5b8c\u6210\u6309\u94ae\u6587\u672c</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>nextText</td>\n<td>\u4e0b\u4e00\u6b65\u6309\u94ae\u6587\u672c</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h4>items \u914d\u7f6e\u8bf4\u660e</h4>\n<p>items \u6570\u7ec4\u4e2d\u6bcf\u4e2a\u5143\u7d20\u4e3a\u6b65\u9aa4\u914d\u7f6e\u5bf9\u8c61\uff1a</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>title</td>\n<td>\u6b65\u9aa4\u6807\u9898</td>\n<td>ReactNode</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>formProps</td>\n<td>Form \u7ec4\u4ef6\u5c5e\u6027\uff0c\u53ef\u4ee5\u662f\u5bf9\u8c61\u6216\u51fd\u6570</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>footerButtons</td>\n<td>\u6b65\u9aa4\u5e95\u90e8\u6309\u94ae\u914d\u7f6e</td>\n<td>array</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>useFormModal</h3>\n<p>\u83b7\u53d6\u8868\u5355\u5f39\u7a97 Hook\uff0c\u8fd4\u56de\u4e00\u4e2a\u53ef\u8c03\u7528\u51fd\u6570\u6765\u5f39\u51fa\u8868\u5355\u5f39\u7a97\u3002</p>\n<h4>\u8fd4\u56de\u503c</h4>\n<p>\u8fd4\u56de\u4e00\u4e2a\u51fd\u6570\uff0c\u8c03\u7528\u8be5\u51fd\u6570\u5f39\u51fa FormModal \u5f39\u7a97\uff0c\u53c2\u6570\u540c FormModal \u7ec4\u4ef6\u5c5e\u6027\u3002</p>\n<h3>useFormDrawer</h3>\n<p>\u83b7\u53d6\u8868\u5355\u62bd\u5c49 Hook\uff0c\u8fd4\u56de\u4e00\u4e2a\u53ef\u8c03\u7528\u51fd\u6570\u6765\u5f39\u51fa\u8868\u5355\u62bd\u5c49\u3002</p>\n<h4>\u8fd4\u56de\u503c</h4>\n<p>\u8fd4\u56de\u4e00\u4e2a\u51fd\u6570\uff0c\u8c03\u7528\u8be5\u51fd\u6570\u5f39\u51fa FormDrawer \u62bd\u5c49\uff0c\u53c2\u6570\u540c FormDrawer \u7ec4\u4ef6\u5c5e\u6027\u3002</p>\n<h3>useFormStepModal</h3>\n<p>\u83b7\u53d6\u5206\u6b65\u8868\u5355\u5f39\u7a97 Hook\uff0c\u8fd4\u56de\u4e00\u4e2a\u53ef\u8c03\u7528\u51fd\u6570\u6765\u5f39\u51fa\u5206\u6b65\u8868\u5355\u5f39\u7a97\u3002</p>\n<h4>\u8fd4\u56de\u503c</h4>\n<p>\u8fd4\u56de\u4e00\u4e2a\u51fd\u6570\uff0c\u8c03\u7528\u8be5\u51fd\u6570\u5f39\u51fa FormStepModal \u5f39\u7a97\uff0c\u53c2\u6570\u540c FormStepModal \u7ec4\u4ef6\u5c5e\u6027\u3002</p>\n<h3>FormModalButton</h3>\n<p>\u6309\u94ae\u89e6\u53d1\u8868\u5355\u5f39\u7a97\u7ec4\u4ef6\uff0c\u652f\u6301\u52a0\u8f7d\u6570\u636e\u540e\u5f39\u51fa\u3002</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>api</td>\n<td>\u6570\u636e\u52a0\u8f7d\u914d\u7f6e\uff0c\u53c2\u8003 @kne/react-fetch</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>modalProps</td>\n<td>FormModal \u5f39\u7a97\u5c5e\u6027\uff0c\u53ef\u4ee5\u662f\u5bf9\u8c61\u6216\u51fd\u6570</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u6309\u94ae\u5185\u5bb9</td>\n<td>ReactNode</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h4>modalProps \u51fd\u6570\u5f62\u5f0f\u53c2\u6570</h4>\n<p>\u5f53 modalProps \u4e3a\u51fd\u6570\u65f6\uff0c\u63a5\u6536\u4ee5\u4e0b\u53c2\u6570\uff1a</p>\n<table>\n<thead>\n<tr>\n<th>\u53c2\u6570\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>data</td>\n<td>\u52a0\u8f7d\u7684\u6570\u636e</td>\n<td>any</td>\n</tr>\n<tr>\n<td>fetchApi</td>\n<td>fetch \u5b9e\u4f8b</td>\n<td>object</td>\n</tr>\n<tr>\n<td>close</td>\n<td>\u5173\u95ed\u5f39\u7a97\u65b9\u6cd5</td>\n<td>function</td>\n</tr>\n</tbody>\n</table>\n<h3>FormStepModalButton</h3>\n<p>\u6309\u94ae\u89e6\u53d1\u7684\u5206\u6b65\u8868\u5355\u5f39\u7a97\u7ec4\u4ef6\u3002</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>api</td>\n<td>\u6570\u636e\u52a0\u8f7d\u914d\u7f6e</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>modalProps</td>\n<td>FormStepModal \u5f39\u7a97\u5c5e\u6027</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u6309\u94ae\u5185\u5bb9</td>\n<td>ReactNode</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>FormDrawerButton</h3>\n<p>\u6309\u94ae\u89e6\u53d1\u7684\u8868\u5355\u62bd\u5c49\u7ec4\u4ef6\u3002</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>api</td>\n<td>\u6570\u636e\u52a0\u8f7d\u914d\u7f6e</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>drawerProps</td>\n<td>FormDrawer \u62bd\u5c49\u5c5e\u6027</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u6309\u94ae\u5185\u5bb9</td>\n<td>ReactNode</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>SubmitButton</h3>\n<p>\u63d0\u4ea4\u6309\u94ae\u7ec4\u4ef6\uff0c\u70b9\u51fb\u540e\u89e6\u53d1\u8868\u5355\u6821\u9a8c\u548c\u63d0\u4ea4\u3002</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>autoClose</td>\n<td>\u63d0\u4ea4\u6210\u529f\u540e\u662f\u5426\u81ea\u52a8\u5173\u95ed\u5f39\u7a97</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>true</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u6309\u94ae\u5185\u5bb9</td>\n<td>ReactNode</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>CancelButton</h3>\n<p>\u53d6\u6d88\u6309\u94ae\u7ec4\u4ef6\uff0c\u70b9\u51fb\u540e\u91cd\u7f6e\u8868\u5355\u6216\u5173\u95ed\u5f39\u7a97\u3002</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>\u6309\u94ae\u5185\u5bb9</td>\n<td>ReactNode</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>FormApiButton</h3>\n<p>\u8868\u5355 API \u6309\u94ae\u7ec4\u4ef6\uff0c\u53ef\u6267\u884c\u8868\u5355\u64cd\u4f5c\u3002</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>onClick</td>\n<td>\u70b9\u51fb\u56de\u8c03\uff0c\u63a5\u6536\u8868\u5355 API \u5bf9\u8c61</td>\n<td>function</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>autoClose</td>\n<td>\u70b9\u51fb\u540e\u662f\u5426\u81ea\u52a8\u5173\u95ed\u5f39\u7a97</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>true</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u6309\u94ae\u5185\u5bb9</td>\n<td>ReactNode</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h4>onClick \u56de\u8c03\u53c2\u6570</h4>\n<p>onClick \u56de\u8c03\u63a5\u6536\u5305\u542b\u8868\u5355\u64cd\u4f5c API \u7684\u5bf9\u8c61\uff1a</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>openApi</td>\n<td>\u8868\u5355 API \u5bf9\u8c61</td>\n<td>object</td>\n</tr>\n<tr>\n<td>submit</td>\n<td>\u89e6\u53d1\u8868\u5355\u63d0\u4ea4\u65b9\u6cd5</td>\n<td>function</td>\n</tr>\n<tr>\n<td>reset</td>\n<td>\u91cd\u7f6e\u8868\u5355\u65b9\u6cd5</td>\n<td>function</td>\n</tr>\n<tr>\n<td>validate</td>\n<td>\u6821\u9a8c\u8868\u5355\u65b9\u6cd5</td>\n<td>function</td>\n</tr>\n<tr>\n<td>setFields</td>\n<td>\u8bbe\u7f6e\u5b57\u6bb5\u503c\u65b9\u6cd5</td>\n<td>function</td>\n</tr>\n<tr>\n<td>getFields</td>\n<td>\u83b7\u53d6\u5b57\u6bb5\u503c\u65b9\u6cd5</td>\n<td>function</td>\n</tr>\n</tbody>\n</table>\n<h3>useFormContext</h3>\n<p>\u8868\u5355\u4e0a\u4e0b\u6587 Hook\uff0c\u5728 Form \u5185\u90e8\u83b7\u53d6\u8868\u5355\u5b9e\u4f8b\u548c\u65b9\u6cd5\u3002</p>\n<h4>\u8fd4\u56de\u503c</h4>\n<p>\u8fd4\u56de\u8868\u5355 API \u5bf9\u8c61\uff0c\u5305\u542b\u4ee5\u4e0b\u5c5e\u6027\u548c\u65b9\u6cd5\uff1a</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d/\u65b9\u6cd5\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>openApi</td>\n<td>\u8868\u5355 API \u5bf9\u8c61</td>\n<td>object</td>\n</tr>\n<tr>\n<td>formData</td>\n<td>\u8868\u5355\u6570\u636e</td>\n<td>object</td>\n</tr>\n</tbody>\n</table>\n<p>openApi \u5305\u542b\u4ee5\u4e0b\u65b9\u6cd5\uff1a</p>\n<table>\n<thead>\n<tr>\n<th>\u65b9\u6cd5\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u53c2\u6570</th>\n<th>\u8fd4\u56de\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>submit</td>\n<td>\u63d0\u4ea4\u8868\u5355</td>\n<td>-</td>\n<td>Promise</td>\n</tr>\n<tr>\n<td>reset</td>\n<td>\u91cd\u7f6e\u8868\u5355</td>\n<td>-</td>\n<td>void</td>\n</tr>\n<tr>\n<td>validate</td>\n<td>\u6821\u9a8c\u8868\u5355</td>\n<td>-</td>\n<td>Promise</td>\n</tr>\n<tr>\n<td>setFields</td>\n<td>\u8bbe\u7f6e\u5b57\u6bb5\u503c</td>\n<td>fields: array, options: object</td>\n<td>void</td>\n</tr>\n<tr>\n<td>getFields</td>\n<td>\u83b7\u53d6\u5b57\u6bb5\u503c</td>\n<td>names: array</td>\n<td>object</td>\n</tr>\n</tbody>\n</table>\n<h3>MultiField</h3>\n<p>\u591a\u5b57\u6bb5\u7ec4\u4ef6\uff0c\u652f\u6301\u5728\u5355\u4e2a Field \u4e2d\u5305\u542b\u591a\u4e2a\u5b50\u5b57\u6bb5\u3002</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>rule</td>\n<td>\u6821\u9a8c\u89c4\u5219</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u5b50\u5b57\u6bb5\u7ec4\u4ef6</td>\n<td>ReactNode</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>ErrorTip</h3>\n<p>\u9519\u8bef\u63d0\u793a\u7ec4\u4ef6\uff0c\u53ef\u81ea\u5b9a\u4e49\u5b57\u6bb5\u9519\u8bef\u4fe1\u606f\u7684\u5c55\u793a\u65b9\u5f0f\u3002</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>errorRender</td>\n<td>\u81ea\u5b9a\u4e49\u9519\u8bef\u6e32\u67d3\u51fd\u6570</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u5b57\u6bb5\u7ec4\u4ef6</td>\n<td>ReactNode</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h4>errorRender \u56de\u8c03\u53c2\u6570</h4>\n<p>errorRender \u56de\u8c03\u63a5\u6536\u4ee5\u4e0b\u53c2\u6570\uff1a</p>\n<table>\n<thead>\n<tr>\n<th>\u53c2\u6570\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>validateData</td>\n<td>\u5b57\u6bb5\u6821\u9a8c\u6570\u636e</td>\n<td>object</td>\n</tr>\n<tr>\n<td>hasError</td>\n<td>\u662f\u5426\u6709\u9519\u8bef</td>\n<td>boolean</td>\n</tr>\n<tr>\n<td>errorMsg</td>\n<td>\u9519\u8bef\u4fe1\u606f</td>\n<td>string</td>\n</tr>\n</tbody>\n</table>\n<h3>FormItem</h3>\n<p>\u8868\u5355\u9879\u5bb9\u5668\u7ec4\u4ef6\uff0c\u7528\u4e8e\u5305\u88c5\u8868\u5355\u5b57\u6bb5\u3002</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>rule</td>\n<td>\u6821\u9a8c\u89c4\u5219</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>tips</td>\n<td>\u63d0\u793a\u4fe1\u606f</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>labelHidden</td>\n<td>\u662f\u5426\u9690\u85cf\u6807\u7b7e</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u5b57\u6bb5\u7ec4\u4ef6</td>\n<td>ReactNode</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>Field \u7c7b\u578b\uff1a\u57fa\u7840\u7ec4\u4ef6</h3>\n<p>\u4ee5\u4e0b\u4e3a\u57fa\u7840\u8868\u5355\u5b57\u6bb5\u7ec4\u4ef6\uff0c\u8bf7\u53c2\u8003 antd \u6587\u6863\uff1a</p>\n<p><strong>Input</strong> - \u6587\u672c\u8f93\u5165\u6846</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>rule</td>\n<td>\u6821\u9a8c\u89c4\u5219</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>\u5360\u4f4d\u7b26</td>\n<td>string</td>\n<td>\u5426</td>\n<td>\u8bf7\u8f93\u5165{label}</td>\n</tr>\n<tr>\n<td>tips</td>\n<td>\u63d0\u793a\u4fe1\u606f\uff0c\u663e\u793a\u95ee\u53f7\u56fe\u6807</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<p><strong>TextArea</strong> - \u591a\u884c\u6587\u672c\u8f93\u5165\u6846</p>\n<p><strong>InputNumber</strong> - \u6570\u5b57\u8f93\u5165\u6846</p>\n<p><strong>Select</strong> - \u4e0b\u62c9\u9009\u62e9\u6846</p>\n<p><strong>DatePicker</strong> - \u65e5\u671f\u9009\u62e9\u5668</p>\n<ul>\n<li>DatePicker.MonthPicker</li>\n<li>DatePicker.RangePicker</li>\n<li>DatePicker.WeekPicker</li>\n</ul>\n<p><strong>TimePicker</strong> - \u65f6\u95f4\u9009\u62e9\u5668</p>\n<ul>\n<li>TimePicker.RangePicker</li>\n</ul>\n<p><strong>RadioGroup</strong> - \u5355\u9009\u6309\u94ae\u7ec4</p>\n<p><strong>Checkbox</strong> - \u590d\u9009\u6846</p>\n<p><strong>CheckboxGroup</strong> - \u590d\u9009\u6846\u7ec4</p>\n<p><strong>Switch</strong> - \u5f00\u5173</p>\n<p><strong>Rate</strong> - \u8bc4\u5206</p>\n<p><strong>Slider</strong> - \u6ed1\u5757</p>\n<p><strong>TreeSelect</strong> - \u6811\u9009\u62e9</p>\n<h3>Field \u7c7b\u578b\uff1a\u4e1a\u52a1\u7ec4\u4ef6</h3>\n<p><strong>AddressSelect</strong> - \u5730\u5740\u9009\u62e9\u7ec4\u4ef6</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>rule</td>\n<td>\u6821\u9a8c\u89c4\u5219</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>single</td>\n<td>\u662f\u5426\u5355\u9009</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n<tr>\n<td>isPopup</td>\n<td>\u662f\u5426\u4f7f\u7528\u5f39\u7a97\u5f62\u5f0f</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<p><strong>FunctionSelect</strong> - \u804c\u80fd\u9009\u62e9\u7ec4\u4ef6</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>rule</td>\n<td>\u6821\u9a8c\u89c4\u5219</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>single</td>\n<td>\u662f\u5426\u5355\u9009</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n</tbody>\n</table>\n<p><strong>IndustrySelect</strong> - \u884c\u4e1a\u9009\u62e9\u7ec4\u4ef6</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>rule</td>\n<td>\u6821\u9a8c\u89c4\u5219</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>single</td>\n<td>\u662f\u5426\u5355\u9009</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n</tbody>\n</table>\n<p><strong>Cascader</strong> - \u7ea7\u8054\u9009\u62e9\u7ec4\u4ef6</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>options</td>\n<td>\u9009\u9879\u6570\u636e</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>rule</td>\n<td>\u6821\u9a8c\u89c4\u5219</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>single</td>\n<td>\u662f\u5426\u5355\u9009</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n</tbody>\n</table>\n<p><strong>Avatar</strong> - \u5934\u50cf\u4e0a\u4f20\u7ec4\u4ef6</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>rule</td>\n<td>\u6821\u9a8c\u89c4\u5219</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>border</td>\n<td>\u88c1\u526a\u8fb9\u6846</td>\n<td>number</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>width</td>\n<td>\u5bbd\u5ea6</td>\n<td>number</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>height</td>\n<td>\u9ad8\u5ea6</td>\n<td>number</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>dropModalSize</td>\n<td>\u5f39\u7a97\u5c3a\u5bf8</td>\n<td>string</td>\n<td>\u5426</td>\n<td>small</td>\n</tr>\n<tr>\n<td>block</td>\n<td>\u662f\u5426\u5360\u6ee1\u4e00\u884c</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n</tbody>\n</table>\n<p><strong>PhoneNumber</strong> - \u7535\u8bdd\u53f7\u7801\u8f93\u5165\u7ec4\u4ef6</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>rule</td>\n<td>\u6821\u9a8c\u89c4\u5219</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<p><strong>MoneyInput</strong> - \u91d1\u989d\u8f93\u5165\u7ec4\u4ef6</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>rule</td>\n<td>\u6821\u9a8c\u89c4\u5219</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<p><strong>SalaryInput</strong> - \u85aa\u8d44\u8303\u56f4\u8f93\u5165\u7ec4\u4ef6</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>rule</td>\n<td>\u6821\u9a8c\u89c4\u5219</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<p><strong>Upload</strong> - \u6587\u4ef6\u4e0a\u4f20\u7ec4\u4ef6</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>rule</td>\n<td>\u6821\u9a8c\u89c4\u5219</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>maxCount</td>\n<td>\u6700\u5927\u4e0a\u4f20\u6570\u91cf</td>\n<td>number</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>block</td>\n<td>\u662f\u5426\u5360\u6ee1\u4e00\u884c</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n</tbody>\n</table>\n<p><strong>ColorPicker</strong> - \u989c\u8272\u9009\u62e9\u5668</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<p><strong>Signature</strong> - \u7b7e\u540d\u7ec4\u4ef6</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>Field \u7c7b\u578b\uff1a\u9ad8\u7ea7\u9009\u62e9\u7ec4\u4ef6</h3>\n<p><strong>AdvancedSelect</strong> - \u9ad8\u7ea7\u9009\u62e9\u7ec4\u4ef6\uff0c\u652f\u6301\u5217\u8868\u548c\u8868\u683c\u4e24\u79cd\u5f62\u6001</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>api</td>\n<td>\u6570\u636e\u52a0\u8f7d API \u914d\u7f6e</td>\n<td>object</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>rule</td>\n<td>\u6821\u9a8c\u89c4\u5219</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>single</td>\n<td>\u662f\u5426\u5355\u9009</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n<tr>\n<td>isPopup</td>\n<td>\u662f\u5426\u4f7f\u7528\u5f39\u7a97\u5f62\u5f0f</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>getSearchProps</td>\n<td>\u641c\u7d22\u6846\u914d\u7f6e</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h4>api \u914d\u7f6e\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>loader</td>\n<td>\u6570\u636e\u52a0\u8f7d\u51fd\u6570</td>\n<td>function</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>params</td>\n<td>\u52a0\u8f7d\u53c2\u6570</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<p><strong>SuperSelect</strong> - \u8d85\u7ea7\u9009\u62e9\u7ec4\u4ef6</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>api</td>\n<td>\u6570\u636e\u52a0\u8f7d API \u914d\u7f6e</td>\n<td>object</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>rule</td>\n<td>\u6821\u9a8c\u89c4\u5219</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>single</td>\n<td>\u662f\u5426\u5355\u9009</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n</tr>\n</tbody>\n</table>\n<p><strong>SuperSelectTableList</strong> - \u8868\u683c\u5217\u8868\u9009\u62e9\u7ec4\u4ef6</p>\n<p><strong>SuperSelectUser</strong> - \u7528\u6237\u9009\u62e9\u7ec4\u4ef6</p>\n<p><strong>SuperSelectTree</strong> - \u6811\u9009\u62e9\u7ec4\u4ef6</p>\n<h3>Field \u7c7b\u578b\uff1a\u7279\u6b8a\u7ec4\u4ef6</h3>\n<p><strong>TypeDateRangePicker</strong> - \u7c7b\u578b\u65e5\u671f\u8303\u56f4\u9009\u62e9\u5668</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>rule</td>\n<td>\u6821\u9a8c\u89c4\u5219</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<p><strong>DatePickerToday</strong> - \u81f3\u4eca\u65e5\u671f\u9009\u62e9\u5668</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>\u5b57\u6bb5\u540d</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>label</td>\n<td>\u5b57\u6bb5\u6807\u7b7e</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>rule</td>\n<td>\u6821\u9a8c\u89c4\u5219</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n</tr>\n<tr>\n<td>soFarText</td>\n<td>\u81f3\u4eca\u6587\u672c</td>\n<td>string</td>\n<td>\u5426</td>\n<td>\u81f3\u4eca</td>\n</tr>\n</tbody>\n</table>\n<h3>fieldDecorator</h3>\n<p>\u5b57\u6bb5\u88c5\u9970\u5668\u5de5\u5177\uff0c\u7528\u4e8e\u521b\u5efa\u81ea\u5b9a\u4e49 Field \u7ec4\u4ef6\u3002</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>createWithFieldDecorator</td>\n<td>\u521b\u5efa\u5e26\u88c5\u9970\u5668\u7684\u5b57\u6bb5\u7ec4\u4ef6</td>\n<td>function</td>\n</tr>\n<tr>\n<td>withInputDefaultPlaceholder</td>\n<td>\u6dfb\u52a0\u8f93\u5165\u6846\u9ed8\u8ba4\u5360\u4f4d\u7b26</td>\n<td>function</td>\n</tr>\n<tr>\n<td>withSelectDefaultPlaceholder</td>\n<td>\u6dfb\u52a0\u9009\u62e9\u5668\u9ed8\u8ba4\u5360\u4f4d\u7b26</td>\n<td>function</td>\n</tr>\n<tr>\n<td>withLang</td>\n<td>\u6dfb\u52a0\u591a\u8bed\u8a00\u652f\u6301</td>\n<td>function</td>\n</tr>\n</tbody>\n</table>\n<h3>hooks</h3>\n<p>\u8868\u5355\u76f8\u5173 Hooks \u96c6\u5408\u3002</p>\n<h4>\u5e38\u7528 Hooks</h4>\n<table>\n<thead>\n<tr>\n<th>Hook \u540d</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>useField</td>\n<td>\u83b7\u53d6\u5b57\u6bb5 API</td>\n</tr>\n<tr>\n<td>useReset</td>\n<td>\u83b7\u53d6\u91cd\u7f6e\u65b9\u6cd5</td>\n</tr>\n<tr>\n<td>useSubmit</td>\n<td>\u83b7\u53d6\u63d0\u4ea4\u65b9\u6cd5</td>\n</tr>\n</tbody>\n</table>\n<h3>widget</h3>\n<p>\u8868\u5355\u7ec4\u4ef6\u5de5\u5177\u96c6\u3002</p>\n<h3>utils</h3>\n<p>\u8868\u5355\u5de5\u5177\u51fd\u6570\u96c6\u3002</p>\n<h3>formUtils</h3>\n<p>\u8868\u5355\u5b9e\u7528\u5de5\u5177\u96c6\u3002</p>\n<h3>RULES</h3>\n<p>\u5185\u7f6e\u6821\u9a8c\u89c4\u5219\u3002</p>\n<h4>\u5e38\u7528\u89c4\u5219</h4>\n<table>\n<thead>\n<tr>\n<th>\u89c4\u5219\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u53c2\u6570</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>REQ</td>\n<td>\u5fc5\u586b</td>\n<td>-</td>\n</tr>\n<tr>\n<td>LEN</td>\n<td>\u957f\u5ea6\u9650\u5236</td>\n<td>MIN-MAX</td>\n</tr>\n<tr>\n<td>EMAIL</td>\n<td>\u90ae\u7bb1\u683c\u5f0f</td>\n<td>-</td>\n</tr>\n<tr>\n<td>TEL</td>\n<td>\u7535\u8bdd\u53f7\u7801</td>\n<td>-</td>\n</tr>\n<tr>\n<td>NUM</td>\n<td>\u6570\u5b57</td>\n<td>-</td>\n</tr>\n<tr>\n<td>INT</td>\n<td>\u6574\u6570</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>interceptors</h3>\n<p>\u5185\u7f6e\u62e6\u622a\u5668\u3002</p>\n<h4>\u4f7f\u7528\u65b9\u5f0f</h4>\n<pre><code class="language-javascript">// \u6ce8\u518c\u62e6\u622a\u5668\ninterceptors.input.use("date-string", (value) => {\n return value ? new Date(value) : null;\n});\n\ninterceptors.output.use("date-string", (value) => {\n return value ? dayjs(value).format("YYYY-MM-DD") : "";\n});\n\n// \u5728\u5b57\u6bb5\u4e2d\u4f7f\u7528\n<Input name="date" label="\u65e5\u671f" interceptor="date-string"/>\n</code></pre>\n<h3>SelectInnerInput</h3>\n<p>\u9009\u62e9\u5668\u5185\u90e8\u8f93\u5165\u6846\u7ec4\u4ef6\uff0c\u7528\u4e8e\u81ea\u5b9a\u4e49\u9009\u62e9\u5668\u5f00\u53d1\u3002</p>\n<h3>FormSteps</h3>\n<p>\u8868\u5355\u6b65\u9aa4\u7ec4\u4ef6\uff0c\u7528\u4e8e FormStepModal \u4e2d\u663e\u793a\u6b65\u9aa4\u6761\u3002</p>\n<h3>formModule</h3>\n<p>\u8868\u5355\u6a21\u5757\uff0c\u5bfc\u51fa\u6240\u6709\u8868\u5355\u76f8\u5173\u7684\u7ec4\u4ef6\u548c\u5de5\u5177\u3002</p>',example:{isFull:!0,className:"FormInfo_f344c",style:".FormInfo_f344c .input > .ant-row > .ant-col {\n padding: 10px 0;\n}\n.FormInfo_f344c .input .ant-space-item:last-child {\n width: 100%;\n}",list:[{title:"\u57fa\u7840\u8868\u5355",description:"\u6700\u7b80\u5355\u7684\u8868\u5355\u793a\u4f8b\uff0c\u5305\u542b\u5e38\u7528\u7684\u8f93\u5165\u6846\u3001\u65e5\u671f\u9009\u62e9\u3001\u4e0b\u62c9\u9009\u62e9\u7b49\u57fa\u7840\u5b57\u6bb5\uff0c\u9002\u5408\u5feb\u901f\u4e0a\u624b",code:'const { default: FormInfo, Form, SubmitButton, fields } = _FormInfo;\nconst { useModal } = _Modal;\nconst { Space } = antd;\n\nconst { Input, TextArea, DatePicker, Select } = fields;\n\nconst BaseExample = () => {\n const modal = useModal();\n return (\n <Form\n onSubmit={(data) => {\n modal({\n title: "\u5ba2\u6237\u4fe1\u606f\u63d0\u4ea4\u6210\u529f",\n children: <pre>{JSON.stringify(data, null, 2)}</pre>,\n });\n }}\n >\n <Space direction="vertical" size={16}>\n <FormInfo\n title="\u5ba2\u6237\u57fa\u672c\u4fe1\u606f"\n list={[\n <Input name="name" label="\u5ba2\u6237\u59d3\u540d" rule="REQ" />,\n <Input name="phone" label="\u8054\u7cfb\u7535\u8bdd" rule="REQ PHONE" />,\n <Input name="email" label="\u7535\u5b50\u90ae\u7bb1" rule="EMAIL" />,\n <DatePicker name="birthday" label="\u51fa\u751f\u65e5\u671f" />,\n <Select\n name="gender"\n label="\u6027\u522b"\n rule="REQ"\n options={[\n { label: "\u7537", value: "male" },\n { label: "\u5973", value: "female" },\n ]}\n />,\n <TextArea name="remark" label="\u5907\u6ce8\u8bf4\u660e" />,\n ]}\n />\n <SubmitButton type="primary">\u4fdd\u5b58\u5ba2\u6237\u4fe1\u606f</SubmitButton>\n </Space>\n </Form>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_FormInfo",packageName:"@components/FormInfo",component:a},{name:"_Modal",packageName:"@components/Modal",component:d},{name:"antd",packageName:"antd",component:o}]},{title:"\u5b57\u6bb5\u7c7b\u578b",description:"\u5c55\u793aFormInfo\u652f\u6301\u7684\u5404\u79cd\u5b57\u6bb5\u7c7b\u578b\uff0c\u5305\u62ec\u8f93\u5165\u7c7b\u3001\u9009\u62e9\u7c7b\u3001\u4ee5\u53ca\u5176\u4ed6\u7279\u6b8a\u5b57\u6bb5\u7c7b\u578b",code:'const { default: FormInfo, Form, SubmitButton, fields } = _FormInfo;\nconst { useModal } = _Modal;\nconst { Space, Divider } = antd;\n\nconst {\n Input,\n TextArea,\n InputNumber,\n DatePicker,\n DateRangePicker,\n Select,\n Switch,\n Rate,\n Slider,\n MoneyInput,\n ColorPicker,\n} = fields;\n\nconst BaseExample = () => {\n const modal = useModal();\n return (\n <Form\n onSubmit={(data) => {\n modal({\n title: "\u4f9b\u5e94\u5546\u4fe1\u606f\u63d0\u4ea4\u6210\u529f",\n children: <pre>{JSON.stringify(data, null, 2)}</pre>,\n });\n }}\n >\n <Space direction="vertical" size={24}>\n <FormInfo\n title="\u57fa\u672c\u8d44\u6599"\n list={[\n <Input name="companyName" label="\u4f9b\u5e94\u5546\u540d\u79f0" rule="REQ LEN-3-50" />,\n <TextArea name="description" label="\u516c\u53f8\u7b80\u4ecb" maxLength={500} />,\n <InputNumber name="creditScore" label="\u4fe1\u7528\u8bc4\u5206" min={0} max={100} />,\n <MoneyInput name="annualRevenue" label="\u5e74\u8425\u4e1a\u989d" />,\n ]}\n />\n\n <Divider />\n\n <FormInfo\n title="\u5408\u4f5c\u4fe1\u606f"\n list={[\n <DatePicker name="cooperateDate" label="\u5408\u4f5c\u8d77\u59cb\u65e5\u671f" />,\n <DateRangePicker name="contractPeriod" label="\u5408\u540c\u6709\u6548\u671f" />,\n <Select\n name="cooperateType"\n label="\u5408\u4f5c\u7c7b\u578b"\n rule="REQ"\n options={[\n { label: "\u72ec\u5bb6\u4ee3\u7406", value: "exclusive" },\n { label: "\u4e00\u822c\u4ee3\u7406", value: "normal" },\n { label: "\u6218\u7565\u5408\u4f5c\u4f19\u4f34", value: "strategic" },\n ]}\n />,\n <Select\n name="productCategory"\n label="\u4f9b\u5e94\u4ea7\u54c1\u7c7b\u522b"\n mode="multiple"\n options={[\n { label: "\u7535\u5b50\u5143\u5668\u4ef6", value: "electronics" },\n { label: "\u673a\u68b0\u914d\u4ef6", value: "machinery" },\n { label: "\u539f\u6750\u6599", value: "materials" },\n { label: "\u5305\u88c5\u6750\u6599", value: "packaging" },\n ]}\n />,\n ]}\n />\n\n <Divider />\n\n <FormInfo\n title="\u5176\u4ed6\u914d\u7f6e"\n list={[\n <Switch name="isPreferred" label="\u662f\u5426\u4f18\u5148\u4f9b\u5e94\u5546" />,\n <Rate name="qualityRating" label="\u8d28\u91cf\u8bc4\u7ea7" />,\n <Slider name="deliveryScore" label="\u4ea4\u4ed8\u53ca\u65f6\u6027\u8bc4\u5206" />,\n <ColorPicker name="brandColor" label="\u54c1\u724c\u6807\u8bc6\u8272" />,\n ]}\n />\n\n <SubmitButton type="primary">\u63d0\u4ea4\u4f9b\u5e94\u5546\u4fe1\u606f</SubmitButton>\n </Space>\n </Form>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_FormInfo",packageName:"@components/FormInfo",component:a},{name:"_Modal",packageName:"@components/Modal",component:d},{name:"antd",packageName:"antd",component:o}]},{title:"\u8868\u5355\u6821\u9a8c",description:"\u5c55\u793a\u8868\u5355\u7684\u6821\u9a8c\u89c4\u5219\u4f7f\u7528\uff0c\u5305\u62ec\u5185\u7f6e\u89c4\u5219\u548c\u81ea\u5b9a\u4e49\u89c4\u5219\uff0c\u4ee5\u53ca\u5f02\u6b65\u6821\u9a8c\u548c\u9519\u8bef\u63d0\u793a",code:'const { default: FormInfo, Form, SubmitButton, ErrorTip, fields } = _FormInfo;\nconst { useModal } = _Modal;\nconst { Space, Alert } = antd;\n\nconst { Input, Password } = fields;\n\nconst BaseExample = () => {\n const modal = useModal();\n return (\n <Form\n rules={{\n USERNAME: (value) => {\n // \u81ea\u5b9a\u4e49\u89c4\u5219\uff1a\u7528\u6237\u540d\u5fc5\u987b\u662f\u5b57\u6bcd\u5f00\u5934\uff0c4-16\u4f4d\n const pattern = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;\n return {\n result: pattern.test(value),\n errMsg: "\u7528\u6237\u540d\u5fc5\u987b\u4ee5\u5b57\u6bcd\u5f00\u5934\uff0c4-16\u4f4d\u5b57\u6bcd\u6216\u6570\u5b57",\n };\n },\n PASSWORD_STRENGTH: (value) => {\n // \u81ea\u5b9a\u4e49\u89c4\u5219\uff1a\u5bc6\u7801\u5f3a\u5ea6\u6821\u9a8c\n const hasLetter = /[a-zA-Z]/.test(value);\n const hasNumber = /[0-9]/.test(value);\n const hasSpecial = /[!@#$%^&]/.test(value);\n if (!hasLetter \|\| !hasNumber \|\| !hasSpecial) {\n return {\n result: false,\n errMsg: "\u5bc6\u7801\u5fc5\u987b\u5305\u542b\u5b57\u6bcd\u3001\u6570\u5b57\u548c\u7279\u6b8a\u5b57\u7b26",\n };\n }\n return { result: true, errMsg: "" };\n },\n USERNAME_EXISTS: (value) => {\n // \u5f02\u6b65\u6821\u9a8c\uff1a\u68c0\u67e5\u7528\u6237\u540d\u662f\u5426\u5df2\u5b58\u5728\n return new Promise((resolve) => {\n setTimeout(() => {\n const exists = ["admin", "wangming", "zhangwei"].includes(value);\n resolve({\n result: !exists,\n errMsg: exists ? "\u8be5\u7528\u6237\u540d\u5df2\u88ab\u5360\u7528" : "",\n });\n }, 500);\n });\n },\n }}\n onSubmit={(data) => {\n modal({\n title: "\u7ba1\u7406\u5458\u8d26\u53f7\u521b\u5efa\u6210\u529f",\n children: <pre>{JSON.stringify(data, null, 2)}</pre>,\n });\n }}\n >\n <Space direction="vertical" size={16}>\n <Alert\n message="\u8d26\u53f7\u6ce8\u518c\u89c4\u8303"\n description="REQ-\u5fc5\u586b \| LEN-\u6700\u5c0f-\u6700\u5927 \| EMAIL-\u90ae\u7bb1 \| PHONE-\u624b\u673a\u53f7 \| URL-\u7f51\u5740 \| USERNAME-\u81ea\u5b9a\u4e49\u89c4\u5219"\n type="info"\n />\n\n <FormInfo\n title="\u7ba1\u7406\u5458\u8d26\u53f7\u4fe1\u606f"\n list={[\n <ErrorTip name="username">\n <Input\n name="username"\n label="\u7528\u6237\u540d"\n rule="REQ LEN-4-16 USERNAME USERNAME_EXISTS"\n tips="4-16\u4f4d\u5b57\u6bcd\u6216\u6570\u5b57\uff0c\u4ee5\u5b57\u6bcd\u5f00\u5934\uff08admin\u3001wangming\u3001zhangwei\u5df2\u88ab\u5360\u7528\uff09"\n />\n </ErrorTip>,\n <Password\n name="password"\n label="\u767b\u5f55\u5bc6\u7801"\n rule="REQ LEN-8-20 PASSWORD_STRENGTH"\n tips="\u81f3\u5c118\u4f4d\uff0c\u5305\u542b\u5b57\u6bcd\u3001\u6570\u5b57\u548c\u7279\u6b8a\u5b57\u7b26"\n />,\n <Password\n name="confirmPassword"\n label="\u786e\u8ba4\u5bc6\u7801"\n rule="REQ"\n tips="\u8bf7\u518d\u6b21\u8f93\u5165\u5bc6\u7801"\n />,\n <Input name="email" label="\u5de5\u4f5c\u90ae\u7bb1" rule="REQ EMAIL" />,\n <Input name="phone" label="\u8054\u7cfb\u7535\u8bdd" rule="REQ PHONE" />,\n ]}\n />\n <SubmitButton type="primary">\u521b\u5efa\u7ba1\u7406\u5458\u8d26\u53f7</SubmitButton>\n </Space>\n </Form>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_FormInfo",packageName:"@components/FormInfo",component:a},{name:"_Modal",packageName:"@components/Modal",component:d},{name:"antd",packageName:"antd",component:o}]},{title:"\u591a\u884c\u5b57\u6bb5",description:"\u5c55\u793aMultiField\u7684\u4f7f\u7528\uff0c\u53ef\u4ee5\u5c06\u591a\u4e2a\u5b57\u6bb5\u5728\u4e00\u884c\u4e2d\u6a2a\u5411\u6392\u5217",code:'const { default: FormInfo, Form, MultiField, SubmitButton, fields } = _FormInfo;\nconst { useModal } = _Modal;\n\nconst { Input, TextArea, DatePicker } = fields;\n\nconst BaseExample = () => {\n const modal = useModal();\n return (\n <Form\n onSubmit={(data) => {\n modal({\n title: "\u91c7\u8d2d\u8ba2\u5355\u4fe1\u606f\u63d0\u4ea4\u6210\u529f",\n children: <pre>{JSON.stringify(data, null, 2)}</pre>,\n });\n }}\n >\n <FormInfo\n list={[\n <MultiField\n name="purchaseOrderNo"\n label="\u91c7\u8d2d\u5355\u53f7"\n rule="REQ"\n field={Input}\n maxLength={20}\n />,\n <MultiField name="productName" label="\u91c7\u8d2d\u4ea7\u54c1" field={Input} />,\n <MultiField name="quantity" label="\u91c7\u8d2d\u6570\u91cf" field={Input} type="number" />,\n <MultiField name="unitPrice" label="\u5355\u4ef7" field={Input} type="number" />,\n <MultiField name="deliveryDate" label="\u4ea4\u4ed8\u65e5\u671f" field={DatePicker} />,\n <MultiField name="note" label="\u5907\u6ce8\u8bf4\u660e" field={TextArea} />,\n ]}\n />\n <SubmitButton type="primary">\u63d0\u4ea4\u91c7\u8d2d\u8ba2\u5355</SubmitButton>\n </Form>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_FormInfo",packageName:"@components/FormInfo",component:a},{name:"_Modal",packageName:"@components/Modal",component:d}]},{title:"\u4e1a\u52a1\u5b57\u6bb5",description:"\u5c55\u793aFormInfo\u63d0\u4f9b\u7684\u4e1a\u52a1\u5b57\u6bb5\u7ec4\u4ef6\uff0c\u5982\u624b\u673a\u53f7\u3001\u804c\u80fd\u9009\u62e9\u3001\u884c\u4e1a\u9009\u62e9\u3001\u5730\u5740\u9009\u62e9\u7b49",code:'const { default: FormInfo, Form, SubmitButton, fields } = _FormInfo;\nconst { useModal } = _Modal;\nconst { PureGlobal } = global;\nconst { Space } = antd;\n\nconst {\n PhoneNumber,\n FunctionSelect,\n IndustrySelect,\n AddressSelect,\n SuperSelectUser,\n Avatar,\n Upload,\n SalaryInput,\n Input,\n} = fields;\n\nconst BaseExample = () => {\n const modal = useModal();\n return (\n <Form\n onSubmit={(data) => {\n modal({\n title: "\u5019\u9009\u4eba\u4fe1\u606f\u63d0\u4ea4\u6210\u529f",\n children: <pre>{JSON.stringify(data, null, 2)}</pre>,\n });\n }}\n >\n <Space direction="vertical" size={16}>\n <FormInfo\n title="\u5019\u9009\u4eba\u57fa\u672c\u4fe1\u606f"\n list={[\n <Avatar name="avatar" label="\u5934\u50cf\u7167\u7247" />,\n <SuperSelectUser name="userId" label="\u5185\u90e8\u63a8\u8350\u4eba" rule="REQ" />,\n <PhoneNumber name="phone" label="\u8054\u7cfb\u7535\u8bdd" rule="REQ" />,\n <Input name="email" label="\u7535\u5b50\u90ae\u7bb1" rule="EMAIL" />,\n ]}\n />\n\n <FormInfo\n title="\u804c\u4e1a\u53d1\u5c55\u4fe1\u606f"\n list={[\n <FunctionSelect name="function" label="\u804c\u80fd\u9886\u57df" rule="REQ" />,\n <IndustrySelect name="industry" label="\u6240\u5c5e\u884c\u4e1a" rule="REQ" />,\n <SalaryInput\n name="salaryRange"\n label="\u671f\u671b\u85aa\u8d44\u8303\u56f4"\n rule="REQ"\n showMonth\n remindUnit\n />,\n ]}\n />\n\n <FormInfo\n title="\u5176\u4ed6\u8865\u5145\u4fe1\u606f"\n list={[\n <AddressSelect name="address" label="\u5de5\u4f5c\u5730\u5740" level={3} />,\n <Upload name="resume" label="\u7b80\u5386\u9644\u4ef6" block />,\n ]}\n />\n\n <SubmitButton type="primary">\u63d0\u4ea4\u5019\u9009\u4eba\u4fe1\u606f</SubmitButton>\n </Space>\n </Form>\n );\n};\n\nrender(\n <PureGlobal>\n <BaseExample />\n </PureGlobal>\n);\n\n',scope:[{name:"_FormInfo",packageName:"@components/FormInfo",component:a},{name:"_Modal",packageName:"@components/Modal",component:d},{name:"global",packageName:"@components/Global",component:r},{name:"antd",packageName:"antd",component:o}]},{title:"\u9ad8\u7ea7\u9009\u62e9\u7ec4\u4ef6",description:"\u5c55\u793aAdvancedSelect\u9ad8\u7ea7\u9009\u62e9\u7ec4\u4ef6\u7684\u4f7f\u7528\uff0c\u652f\u6301\u4eceAPI\u52a0\u8f7d\u6570\u636e\u3001\u81ea\u5b9a\u4e49\u5217\u914d\u7f6e\u3001\u591a\u9009\u7b49\u529f\u80fd",code:'const { default: FormInfo, Form, SubmitButton, AdvancedSelect, fields } = _FormInfo;\nconst { useModal } = _Modal;\nconst { Space } = antd;\n\nconst { Input, TextArea } = fields;\n\nconst BaseExample = () => {\n const modal = useModal();\n return (\n <Form\n onSubmit={(data) => {\n modal({\n title: "\u57f9\u8bad\u8ba1\u5212\u914d\u7f6e\u6210\u529f",\n children: <pre>{JSON.stringify(data, null, 2)}</pre>,\n });\n }}\n >\n <Space direction="vertical" size={16}>\n <FormInfo\n title="\u8bfe\u7a0b\u9009\u62e9"\n list={[\n <AdvancedSelect\n name="trainingCourses"\n label="\u9009\u62e9\u57f9\u8bad\u8bfe\u7a0b"\n rule="REQ"\n mode="multiple"\n api={{\n loader: () => {\n return {\n pageData: [\n {\n id: 1,\n name: "\u524d\u7aef\u67b6\u6784\u8bbe\u8ba1\u6700\u4f73\u5b9e\u8df5",\n category: "\u524d\u7aef\u6280\u672f",\n duration: 12,\n description: "\u6df1\u5165\u5b66\u4e60\u4f01\u4e1a\u7ea7\u524d\u7aef\u67b6\u6784\u8bbe\u8ba1\u65b9\u6cd5",\n },\n {\n id: 2,\n name: "\u5fae\u670d\u52a1\u67b6\u6784\u8bbe\u8ba1\u4e0e\u5b9e\u73b0",\n category: "\u540e\u7aef\u6280\u672f",\n duration: 16,\n description: "\u638c\u63e1\u5fae\u670d\u52a1\u67b6\u6784\u7684\u6838\u5fc3\u8bbe\u8ba1\u6a21\u5f0f",\n },\n {\n id: 3,\n name: "\u4e91\u539f\u751f\u5e94\u7528\u5f00\u53d1",\n category: "\u4e91\u539f\u751f",\n duration: 20,\n description: "\u57fa\u4e8eKubernetes\u7684\u4e91\u539f\u751f\u5e94\u7528\u5f00\u53d1",\n },\n {\n id: 4,\n name: "\u5927\u6570\u636e\u5904\u7406\u4e0e\u5206\u6790",\n category: "\u6570\u636e\u6280\u672f",\n duration: 18,\n description: "Hadoop/Spark\u5927\u6570\u636e\u5904\u7406\u6280\u672f",\n },\n {\n id: 5,\n name: "AI\u4e0e\u673a\u5668\u5b66\u4e60\u5b9e\u6218",\n category: "\u4eba\u5de5\u667a\u80fd",\n duration: 24,\n description: "\u6df1\u5ea6\u5b66\u4e60\u6a21\u578b\u8bad\u7ec3\u4e0e\u90e8\u7f72",\n },\n ],\n };\n },\n }}\n columns={[\n { title: "\u8bfe\u7a0b\u540d\u79f0", key: "name" },\n { title: "\u6280\u672f\u65b9\u5411", key: "category" },\n { title: "\u8bfe\u65f6", key: "duration" },\n ]}\n nameKey="id"\n labelKey="name"\n />,\n ]}\n />\n\n <FormInfo\n title="\u57f9\u8bad\u8ba1\u5212\u8be6\u60c5"\n list={[\n <Input name="trainingObjective" label="\u57f9\u8bad\u76ee\u6807" />,\n <TextArea name="trainingRequirements" label="\u57f9\u8bad\u8981\u6c42\u4e0e\u8bf4\u660e" block />,\n ]}\n />\n\n <SubmitButton type="primary">\u63d0\u4ea4\u57f9\u8bad\u8ba1\u5212</SubmitButton>\n </Space>\n </Form>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_FormInfo",packageName:"@components/FormInfo",component:a},{name:"_Modal",packageName:"@components/Modal",component:d},{name:"antd",packageName:"antd",component:o}]},{title:"\u5217\u8868\u5b57\u6bb5",description:"\u5c55\u793aList\u548cTableList\u591a\u6bb5\u5f0f\u5217\u8868\u5b57\u6bb5\u7684\u4f7f\u7528\uff0c\u652f\u6301\u52a8\u6001\u6dfb\u52a0\u3001\u5220\u9664\u3001\u6700\u5927\u957f\u5ea6\u9650\u5236\u7b49\u529f\u80fd",code:'const { default: FormInfo, Form, List, TableList, SubmitButton, fields } = _FormInfo;\nconst { useModal } = _Modal;\nconst { Space } = antd;\n\nconst { Input, DatePicker, TextArea } = fields;\n\nconst BaseExample = () => {\n const modal = useModal();\n return (\n <Form\n onSubmit={(data) => {\n modal({\n title: "\u4f01\u4e1a\u4fe1\u606f\u63d0\u4ea4\u6210\u529f",\n children: <pre>{JSON.stringify(data, null, 2)}</pre>,\n });\n }}\n >\n <Space direction="vertical" size={16}>\n <FormInfo\n title="\u4f01\u4e1a\u57fa\u672c\u4fe1\u606f"\n list={[\n <Input name="companyName" label="\u4f01\u4e1a\u540d\u79f0" rule="REQ" />,\n <TextArea name="companyDescription" label="\u4f01\u4e1a\u7b80\u4ecb" block />,\n ]}\n />\n\n <List\n name="productLines"\n title="\u4ea7\u54c1\u7ebf\u5217\u8868"\n itemTitle={({ index }) => `\u4ea7\u54c1\u7ebf ${index + 1}`}\n maxLength={10}\n list={[\n <Input name="lineName" label="\u4ea7\u54c1\u7ebf\u540d\u79f0" rule="REQ" />,\n <Input name="annualSales" label="\u5e74\u9500\u552e\u989d(\u4e07\u5143)" rule="REQ" />,\n <TextArea name="lineFeatures" label="\u4ea7\u54c1\u7ebf\u7279\u70b9" block />,\n ]}\n />\n\n <TableList\n name="partnerContacts"\n title="\u5408\u4f5c\u4f19\u4f34\u8054\u7cfb\u4eba"\n maxLength={5}\n list={[\n <Input name="contactName" label="\u8054\u7cfb\u4eba\u59d3\u540d" rule="REQ" />,\n <DatePicker name="cooperateDate" label="\u5408\u4f5c\u8d77\u59cb\u65e5\u671f" />,\n <Input name="contactPhone" label="\u8054\u7cfb\u7535\u8bdd" rule="REQ" />,\n ]}\n />\n\n <SubmitButton type="primary">\u63d0\u4ea4\u4f01\u4e1a\u4fe1\u606f</SubmitButton>\n </Space>\n </Form>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_FormInfo",packageName:"@components/FormInfo",component:a},{name:"_Modal",packageName:"@components/Modal",component:d},{name:"antd",packageName:"antd",component:o}]},{title:"\u5d4c\u5957\u5217\u8868",description:"\u5c55\u793a\u5728List\u4e2d\u5d4c\u5957TableList\u7684\u4f7f\u7528\u573a\u666f\uff0c\u5b9e\u73b0\u66f4\u590d\u6742\u7684\u591a\u5c42\u7ea7\u6570\u636e\u7ed3\u6784",code:'const { default: FormInfo, Form, List, TableList, SubmitButton, fields } = _FormInfo;\nconst { useModal } = _Modal;\nconst { Space } = antd;\n\nconst { Input, DatePicker, TextArea, Select } = fields;\n\nconst BaseExample = () => {\n const modal = useModal();\n return (\n <Form\n onSubmit={(data) => {\n modal({\n title: "\u7814\u53d1\u9879\u76ee\u4fe1\u606f\u63d0\u4ea4\u6210\u529f",\n children: <pre>{JSON.stringify(data, null, 2)}</pre>,\n });\n }}\n >\n <Space direction="vertical" size={16}>\n <FormInfo\n title="\u9879\u76ee\u57fa\u672c\u4fe1\u606f"\n list={[\n <Input name="projectName" label="\u9879\u76ee\u540d\u79f0" rule="REQ" />,\n <TextArea name="projectDescription" label="\u9879\u76ee\u63cf\u8ff0" block />,\n ]}\n />\n\n <List\n name="releaseMilestones"\n title="\u53d1\u5e03\u91cc\u7a0b\u7891"\n itemTitle={({ index }) => `\u91cc\u7a0b\u7891 ${index + 1}`}\n maxLength={5}\n important\n list={[\n <Input name="milestoneName" label="\u91cc\u7a0b\u7891\u540d\u79f0" rule="REQ" />,\n <DatePicker name="releaseDate" label="\u53d1\u5e03\u65e5\u671f" rule="REQ" />,\n <TableList\n name="deliverables"\n title="\u4ea4\u4ed8\u7269\u6e05\u5355"\n maxLength={10}\n block\n list={[\n <Input name="deliverableName" label="\u4ea4\u4ed8\u7269\u540d\u79f0" rule="REQ" />,\n <Select\n name="deliverableType"\n label="\u4ea4\u4ed8\u7269\u7c7b\u578b"\n rule="REQ"\n options={[\n { label: "\u6e90\u4ee3\u7801", value: "code" },\n { label: "\u6587\u6863", value: "doc" },\n { label: "\u6d4b\u8bd5\u7528\u4f8b", value: "test" },\n ]}\n />,\n ]}\n />,\n ]}\n />\n\n <SubmitButton type="primary">\u63d0\u4ea4\u9879\u76ee\u4fe1\u606f</SubmitButton>\n </Space>\n </Form>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_FormInfo",packageName:"@components/FormInfo",component:a},{name:"_Modal",packageName:"@components/Modal",component:d},{name:"antd",packageName:"antd",component:o}]},{title:"\u52a8\u6001\u5b57\u6bb5",description:"\u5c55\u793a\u6839\u636e\u9009\u62e9\u503c\u52a8\u6001\u663e\u793a/\u9690\u85cf\u5b57\u6bb5\u7684\u4f7f\u7528\u573a\u666f\uff0c\u5b9e\u73b0\u5b57\u6bb5\u8054\u52a8\u6548\u679c",code:'const { default: FormInfo, Form, SubmitButton, fields } = _FormInfo;\nconst { useModal } = _Modal;\nconst { Space, Alert } = antd;\nconst { useState } = React;\n\nconst { Input, Select, TextArea } = fields;\n\nconst BaseExample = () => {\n const modal = useModal();\n const [employmentType, setEmploymentType] = useState("fulltime");\n\n return (\n <Form\n onSubmit={(data) => {\n modal({\n title: "\u4eba\u624d\u5f55\u7528\u4fe1\u606f\u63d0\u4ea4\u6210\u529f",\n children: <pre>{JSON.stringify(data, null, 2)}</pre>,\n });\n }}\n >\n <Space direction="vertical" size={16}>\n <Alert\n message="\u52a8\u6001\u5b57\u6bb5\u5c55\u793a"\n description="\u6839\u636e\u5f55\u7528\u7c7b\u578b\u663e\u793a\u4e0d\u540c\u7684\u5b57\u6bb5\u4fe1\u606f\uff0c\u5b9e\u73b0\u5b57\u6bb5\u8054\u52a8\u6548\u679c"\n type="info"\n />\n\n <FormInfo\n title="\u5019\u9009\u4eba\u57fa\u672c\u4fe1\u606f"\n list={[\n <Input name="candidateName" label="\u5019\u9009\u4eba\u59d3\u540d" rule="REQ" />,\n <Select\n name="employmentType"\n label="\u5f55\u7528\u7c7b\u578b"\n rule="REQ"\n onChange={(value) => {\n setEmploymentType(value);\n }}\n options={[\n { label: "\u5168\u804c\u5458\u5de5", value: "fulltime" },\n { label: "\u517c\u804c\u987e\u95ee", value: "parttime" },\n { label: "\u5916\u5305\u5408\u540c", value: "contract" },\n ]}\n />,\n ]}\n />\n\n {employmentType === "fulltime" && (\n <FormInfo\n title="\u5168\u804c\u5458\u5de5\u4fe1\u606f"\n list={[\n <Input name="employeeId" label="\u5458\u5de5\u5de5\u53f7" rule="REQ" />,\n <Input name="monthlySalary" label="\u6708\u85aa(\u5143)" rule="REQ" />,\n <Input name="socialSecurityNo" label="\u793e\u4fdd\u8d26\u53f7" />,\n <Select\n name="benefitLevel"\n label="\u798f\u5229\u7b49\u7ea7"\n options={[\n { label: "\u57fa\u7840\u798f\u5229", value: "basic" },\n { label: "\u6807\u51c6\u798f\u5229", value: "standard" },\n { label: "\u4f18\u539a\u798f\u5229", value: "premium" },\n ]}\n />,\n ]}\n />\n )}\n\n {employmentType === "parttime" && (\n <FormInfo\n title="\u517c\u804c\u987e\u95ee\u4fe1\u606f"\n list={[\n <Input name="hourlyRate" label="\u65f6\u85aa(\u5143/\u5c0f\u65f6)" rule="REQ" />,\n <Input name="maxMonthlyHours" label="\u6700\u5927\u6708\u5de5\u65f6" rule="REQ" />,\n <TextArea name="serviceScope" label="\u670d\u52a1\u8303\u56f4" block />,\n ]}\n />\n )}\n\n {employmentType === "contract" && (\n <FormInfo\n title="\u5916\u5305\u5408\u540c\u4fe1\u606f"\n list={[\n <Input name="contractPeriod" label="\u5408\u540c\u671f\u9650" rule="REQ" />,\n <Input name="projectFee" label="\u9879\u76ee\u8d39\u7528(\u5143)" rule="REQ" />,\n <Select\n name="paymentTerm"\n label="\u4ed8\u6b3e\u65b9\u5f0f"\n options={[\n { label: "\u4e00\u6b21\u6027\u4ed8\u6b3e", value: "onetime" },\n { label: "\u5206\u671f\u4ed8\u6b3e", value: "installment" },\n { label: "\u6309\u91cc\u7a0b\u7891\u4ed8\u6b3e", value: "milestone" },\n ]}\n />,\n ]}\n />\n )}\n\n <FormInfo\n title="\u5176\u4ed6\u5907\u6ce8"\n list={[<TextArea name="remark" label="\u5f55\u7528\u5907\u6ce8\u8bf4\u660e" block />]}\n />\n\n <SubmitButton type="primary">\u63d0\u4ea4\u5f55\u7528\u4fe1\u606f</SubmitButton>\n </Space>\n </Form>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_FormInfo",packageName:"@components/FormInfo",component:a},{name:"_Modal",packageName:"@components/Modal",component:d},{name:"antd",packageName:"antd",component:o}]},{title:"\u8868\u5355\u5f39\u7a97",description:"\u5c55\u793aFormModal\u7684\u4f7f\u7528\uff0c\u5728\u5f39\u7a97\u4e2d\u5c55\u793a\u8868\u5355\uff0c\u9002\u5408\u6570\u636e\u5f55\u5165\u3001\u7f16\u8f91\u7b49\u573a\u666f",code:'const {default: FormInfo, useFormModal, fields} = _FormInfo;\nconst {PureGlobal} = global;\nconst {Button, Space} = antd;\nconst {useState} = React;\n\nconst {Input, DatePicker, Select} = fields;\n\nconst EmployeeModal = () => {\n const modal = useFormModal();\n\n const handleAddEmployee = () => {\n const modalApi = modal({\n title: "\u65b0\u5efa\u5458\u5de5\u6863\u6848", formProps: {\n onSubmit: (data) => {\n console.log("\u63d0\u4ea4\u6570\u636e:", data);\n modalApi.close();\n },\n }, children: (<FormInfo\n list={[<Input name="name" label="\u5458\u5de5\u59d3\u540d" rule="REQ"/>,\n <Input name="phone" label="\u8054\u7cfb\u7535\u8bdd" rule="REQ PHONE"/>,\n <DatePicker name="joinDate" label="\u5165\u804c\u65e5\u671f" rule="REQ"/>, <Select\n name="department"\n label="\u6240\u5c5e\u90e8\u95e8"\n rule="REQ"\n options={[{label: "\u6280\u672f\u7814\u53d1\u4e2d\u5fc3", value: "tech"}, {\n label: "\u4ea7\u54c1\u7ba1\u7406\u4e2d\u5fc3",\n value: "product"\n }, {label: "\u5e02\u573a\u8425\u9500\u4e2d\u5fc3", value: "marketing"},]}\n />, <Select\n name="position"\n label="\u804c\u4f4d\u540d\u79f0"\n rule="REQ"\n options={[{label: "\u9ad8\u7ea7\u5de5\u7a0b\u5e08", value: "senior"}, {\n label: "\u4ea7\u54c1\u7ecf\u7406",\n value: "pm"\n }, {label: "UI\u8bbe\u8ba1\u5e08", value: "designer"},]}\n />,]}\n />),\n });\n };\n\n return (<Space>\n <Button type="primary" onClick={handleAddEmployee}>\n \u65b0\u5efa\u5458\u5de5\u6863\u6848\n </Button>\n <Button onClick={() => modalApi.close()}>\u5173\u95ed</Button>\n </Space>);\n};\n\nconst BaseExample = () => {\n return (<PureGlobal>\n <EmployeeModal/>\n </PureGlobal>);\n};\n\nrender(<BaseExample/>);\n\n',scope:[{name:"_FormInfo",packageName:"@components/FormInfo",component:a},{name:"global",packageName:"@components/Global",component:r},{name:"antd",packageName:"antd",component:o}]},{title:"\u8868\u5355\u62bd\u5c49",description:"\u5c55\u793aFormDrawer\u7684\u4f7f\u7528\uff0c\u5728\u62bd\u5c49\u4e2d\u5c55\u793a\u8868\u5355\uff0c\u9002\u5408\u5c55\u793a\u66f4\u591a\u8868\u5355\u5185\u5bb9\u7684\u573a\u666f",code:'const { default: FormInfo, useFormDrawer, fields } = _FormInfo;\nconst { PureGlobal } = global;\nconst { Button, Space } = antd;\n\nconst { Input, DatePicker, Select, TextArea } = fields;\n\nconst ProjectDrawer = () => {\n const drawer = useFormDrawer();\n\n const handleCreateProject = () => {\n const drawerApi = drawer({\n title: "\u53d1\u8d77\u7814\u53d1\u9879\u76ee",\n width: 600,\n formProps: {\n onSubmit: (data) => {\n console.log("\u63d0\u4ea4\u6570\u636e:", data);\n drawerApi.close();\n },\n },\n children: (\n <FormInfo\n list={[\n <Input name="name" label="\u9879\u76ee\u540d\u79f0" rule="REQ" />,\n <TextArea name="description" label="\u9879\u76ee\u80cc\u666f\u4e0e\u76ee\u6807" block />,\n <DatePicker name="startDate" label="\u8ba1\u5212\u542f\u52a8\u65e5\u671f" rule="REQ" />,\n <DatePicker name="endDate" label="\u8ba1\u5212\u5b8c\u6210\u65e5\u671f" rule="REQ" />,\n <Select\n name="projectManager"\n label="\u9879\u76ee\u8d1f\u8d23\u4eba"\n rule="REQ"\n options={[\n { label: "\u738b\u5efa\u56fd", value: 1 },\n { label: "\u674e\u6653\u534e", value: 2 },\n { label: "\u5f20\u601d\u8fdc", value: 3 },\n ]}\n />,\n <Select\n name="projectStatus"\n label="\u9879\u76ee\u9636\u6bb5"\n rule="REQ"\n options={[\n { label: "\u9700\u6c42\u5206\u6790", value: "requirement" },\n { label: "\u5f00\u53d1\u5b9e\u65bd", value: "development" },\n { label: "\u6d4b\u8bd5\u9a8c\u6536", value: "testing" },\n { label: "\u4e0a\u7ebf\u90e8\u7f72", value: "deployment" },\n ]}\n />,\n ]}\n />\n ),\n });\n };\n\n return (\n <Space>\n <Button type="primary" onClick={handleCreateProject}>\n \u53d1\u8d77\u7814\u53d1\u9879\u76ee\n </Button>\n <Button onClick={() => drawerApi.close()}>\u5173\u95ed</Button>\n </Space>\n );\n};\n\nconst BaseExample = () => {\n return (\n <PureGlobal>\n <ProjectDrawer />\n </PureGlobal>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_FormInfo",packageName:"@components/FormInfo",component:a},{name:"global",packageName:"@components/Global",component:r},{name:"antd",packageName:"antd",component:o}]},{title:"\u5206\u6b65\u8868\u5355\u5f39\u7a97",description:"\u5c55\u793aFormStepModal\u7684\u4f7f\u7528\uff0c\u5c06\u8868\u5355\u5206\u4e3a\u591a\u4e2a\u6b65\u9aa4\uff0c\u9010\u6b65\u5f15\u5bfc\u7528\u6237\u586b\u5199\uff0c\u9002\u5408\u590d\u6742\u8868\u5355\u573a\u666f",code:'const {default: FormInfo, useFormStepModal, fields} = _FormInfo;\nconst {PureGlobal} = global;\nconst {Button, Space, Card, Tag, Divider} = antd;\nconst {useModal} = _Modal;\n\nconst {Input, DatePicker, Select, TextArea, PhoneNumber} = fields;\n\nconst RecruitmentStepModal = () => {\n const modal = useFormStepModal();\n const handleOpenRecruitment = () => {\n const modalApi = modal({\n title: "\u4eba\u624d\u62db\u8058\u6d41\u7a0b", items: [{\n title: "\u57fa\u672c\u4fe1\u606f", formProps: {\n onSubmit: (data, {stepCacheRef, currentIndex}) => {\n console.log("\u57fa\u672c\u4fe1\u606f\u63d0\u4ea4:", data);\n console.log("\u6b65\u9aa4\u7f13\u5b58:", stepCacheRef.current);\n }\n }, children: (<FormInfo\n list={[<Input name="candidateName" label="\u5019\u9009\u4eba\u59d3\u540d" rule="REQ"/>,\n <PhoneNumber name="contactPhone" label="\u8054\u7cfb\u7535\u8bdd" rule="REQ"/>,\n <Input name="email" label="\u7535\u5b50\u90ae\u7bb1" rule="REQ EMAIL"/>,\n <DatePicker name="dateOfBirth" label="\u51fa\u751f\u65e5\u671f"/>,]}\n />),\n }, {\n title: "\u6559\u80b2\u7ecf\u5386", formProps: {\n onSubmit: (data, {stepCacheRef, currentIndex}) => {\n console.log("\u6559\u80b2\u7ecf\u5386\u63d0\u4ea4:", data);\n console.log("\u6b65\u9aa4\u7f13\u5b58:", stepCacheRef.current);\n }\n }, children: (<FormInfo\n list={[<Input name="university" label="\u6bd5\u4e1a\u9662\u6821" rule="REQ"/>, <Select\n name="educationDegree"\n label="\u6700\u9ad8\u5b66\u5386"\n rule="REQ"\n options={[{label: "\u672c\u79d1", value: "bachelor"}, {\n label: "\u7855\u58eb\u7814\u7a76\u751f", value: "master"\n }, {label: "\u535a\u58eb\u7814\u7a76\u751f", value: "doctor"},]}\n />, <Select\n name="major"\n label="\u4e13\u4e1a\u9886\u57df"\n rule="REQ"\n options={[{label: "\u8ba1\u7b97\u673a\u79d1\u5b66\u4e0e\u6280\u672f", value: "cs"}, {\n label: "\u8f6f\u4ef6\u5de5\u7a0b", value: "se"\n }, {label: "\u4fe1\u606f\u7ba1\u7406\u4e0e\u4fe1\u606f\u7cfb\u7edf", value: "im"},]}\n />,]}\n />),\n }, {\n title: "\u5de5\u4f5c\u7ecf\u5386", formProps: {\n onSubmit: (data, {stepCacheRef, currentIndex, isLastStep}) => {\n console.log("\u5de5\u4f5c\u7ecf\u5386\u63d0\u4ea4:", data);\n console.log("\u6240\u6709\u6b65\u9aa4\u7f13\u5b58\u6570\u636e:", stepCacheRef.current);\n // \u5728\u6700\u540e\u4e00\u6b65\u5408\u5e76\u6240\u6709\u6b65\u9aa4\u7684\u6570\u636e\n const allData = {};\n Object.keys(stepCacheRef.current).forEach(key => {\n Object.assign(allData, stepCacheRef.current[key].data);\n });\n console.log("\u5408\u5e76\u540e\u7684\u5b8c\u6574\u6570\u636e:", allData);\n alert("\u4eba\u624d\u4fe1\u606f\u63d0\u4ea4\u6210\u529f\uff01" + JSON.stringify(allData, null, 2));\n }\n }, children: (<FormInfo\n list={[<Input name="lastCompany" label="\u4e0a\u5bb6\u516c\u53f8\u540d\u79f0"/>, <Select\n name="position"\n label="\u804c\u4f4d\u7ea7\u522b"\n options={[{label: "\u521d\u7ea7\u5de5\u7a0b\u5e08", value: "junior"}, {\n label: "\u4e2d\u7ea7\u5de5\u7a0b\u5e08", value: "mid"\n }, {label: "\u9ad8\u7ea7\u5de5\u7a0b\u5e08", value: "senior"},]}\n />, <TextArea name="workExperience" label="\u5de5\u4f5c\u7ecf\u5386\u63cf\u8ff0" block/>,]}\n />),\n },],\n });\n };\n\n return (<Space>\n <Button type="primary" onClick={handleOpenRecruitment}>\n \u53d1\u8d77\u4eba\u624d\u62db\u8058\n </Button>\n <Button onClick={() => modalApi.close()}>\u5173\u95ed</Button>\n </Space>);\n};\n\n// \u6f14\u793a stepCacheRef \u7684\u4f7f\u7528\nconst StepCacheExample = () => {\n const modal = useFormStepModal();\n const normalModal = useModal();\n const handleOpen = () => {\n const modalApi = modal({\n title: "stepCacheRef \u6f14\u793a", items: [{\n title: "\u7b2c\u4e00\u6b65", formProps: {\n onSubmit: (data, {stepCacheRef, currentIndex}) => {\n console.log("\u7b2c\u4e00\u6b65\u6570\u636e:", data);\n console.log("\u5f53\u524d\u7f13\u5b58:", stepCacheRef.current);\n }\n }, children: (<FormInfo\n list={[<Input name="field1" label="\u5b57\u6bb51" rule="REQ"/>, <Input name="field2" label="\u5b57\u6bb52"/>,]}\n />),\n }, {\n title: "\u7b2c\u4e8c\u6b65", formProps: {\n onSubmit: (data, {stepCacheRef, currentIndex}) => {\n console.log("\u7b2c\u4e8c\u6b65\u6570\u636e:", data);\n console.log("\u5f53\u524d\u7f13\u5b58:", stepCacheRef.current);\n console.log("\u7b2c\u4e00\u6b65\u7f13\u5b58\u6570\u636e:", stepCacheRef.current[0]);\n }\n }, children: (<FormInfo\n list={[<Input name="field3" label="\u5b57\u6bb53" rule="REQ"/>, <Input name="field4" label="\u5b57\u6bb54"/>,]}\n />),\n }, {\n title: "\u7b2c\u4e09\u6b65", formProps: {\n onSubmit: (data, {stepCacheRef, currentIndex, isLastStep}) => {\n console.log("\u7b2c\u4e09\u6b65\u6570\u636e:", data);\n console.log("\u6240\u6709\u7f13\u5b58\u6570\u636e:", stepCacheRef.current);\n\n // \u5408\u5e76\u6240\u6709\u6b65\u9aa4\u7684\u6570\u636e\n const allData = {};\n Object.keys(stepCacheRef.current).forEach(key => {\n Object.assign(allData, stepCacheRef.current[key].data);\n });\n console.log("\u5b8c\u6574\u6570\u636e:", allData);\n\n // \u663e\u793a\u7f13\u5b58\u5185\u5bb9\n const cacheContent = Object.entries(stepCacheRef.current).map(([index, cache]) => ({\n step: index, data: cache.data, output: cache.output\n }));\n\n normalModal({\n children: (<Space direction="vertical" size={16} style={{padding: 24}}>\n <Card title="\u63d0\u4ea4\u6210\u529f" size="small">\n <Space direction="vertical" size={8}>\n {cacheContent.map((item, idx) => (<Card key={idx} size="small" type="inner"\n title={`\u6b65\u9aa4 ${parseInt(item.step) + 1}`}>\n <Space direction="vertical" size={4}>\n {Object.entries(item.data).map(([key, value]) => (\n <Tag key={key}>{key}: {String(value)}</Tag>))}\n </Space>\n </Card>))}\n </Space>\n </Card>\n <Button onClick={() => modalApi.close()}>\u5173\u95ed</Button>\n </Space>), footerButtons: []\n });\n }\n }, children: (<FormInfo\n list={[<Input name="field5" label="\u5b57\u6bb55" rule="REQ"/>, <Input name="field6" label="\u5b57\u6bb56"/>,]}\n />),\n },],\n });\n };\n\n return (<Button onClick={handleOpen}>stepCacheRef \u6f14\u793a</Button>);\n};\n\nconst BaseExample = () => {\n return (<PureGlobal>\n <Space direction="vertical">\n <RecruitmentStepModal/>\n <Divider/>\n <Space>\n <StepCacheExample/>\n </Space>\n </Space>\n </PureGlobal>);\n};\n\nrender(<BaseExample/>);\n\n',scope:[{name:"_FormInfo",packageName:"@components/FormInfo",component:a},{name:"global",packageName:"@components/Global",component:r},{name:"_Modal",packageName:"@components/Modal",component:d},{name:"antd",packageName:"antd",component:o}]},{title:"useFormContext",description:"\u5c55\u793a\u5982\u4f55\u4f7f\u7528useFormContext Hook\u8bbf\u95ee\u8868\u5355API\uff0c\u5b9e\u73b0\u67e5\u770b\u503c\u3001\u8bbe\u7f6e\u503c\u3001\u6821\u9a8c\u3001\u91cd\u7f6e\u7b49\u64cd\u4f5c",code:'const { default: FormInfo, Form, useFormContext, fields } = _FormInfo;\nconst { Space, Card, Button, Tag, Divider } = antd;\nconst { useState } = React;\n\nconst { Input, DatePicker, Select } = fields;\n\nconst FormActions = () => {\n const { openApi, formData } = useFormContext();\n const [showData, setShowData] = useState(false);\n\n return (\n <Space direction="vertical" size={16} style={{ width: "100%" }}>\n <Space wrap>\n <Button\n type="primary"\n onClick={() => {\n openApi.setFields(\n [\n { name: "employeeName", value: "\u738b\u5efa\u56fd" },\n { name: "workEmail", value: "wangjianguo@company.com" },\n { name: "department", value: "tech" },\n ],\n { runValidate: false }\n );\n }}\n >\n \u586b\u5145\u5458\u5de5\u4fe1\u606f\n </Button>\n <Button\n onClick={() => {\n setShowData(!showData);\n }}\n >\n {showData ? "\u9690\u85cf\u6570\u636e" : "\u67e5\u770b\u6570\u636e"}\n </Button>\n <Button\n onClick={() => {\n openApi.validateAll();\n }}\n >\n \u6821\u9a8c\u8868\u5355\n </Button>\n <Button onClick={openApi.reset}>\u91cd\u7f6e\u8868\u5355</Button>\n </Space>\n\n {showData && (\n <Card title="\u5f53\u524d\u8868\u5355\u6570\u636e" size="small">\n <Space direction="vertical" size={8}>\n {Object.entries(formData).map(([key, value]) => (\n <Tag key={key} color="blue">\n <strong>{key}</strong>:{" "}\n {typeof value === "object" && value !== null\n ? JSON.stringify(value)\n : String(value)}\n </Tag>\n ))}\n </Space>\n </Card>\n )}\n <Divider />\n </Space>\n );\n};\n\nconst BaseExample = () => {\n return (\n <Form\n onSubmit={(data) => {\n console.log("\u63d0\u4ea4\u6570\u636e:", data);\n alert("\u5458\u5de5\u4fe1\u606f\u4fdd\u5b58\u6210\u529f\uff01");\n }}\n >\n <Space direction="vertical" size={16}>\n <FormInfo\n title="\u5458\u5de5\u57fa\u672c\u4fe1\u606f"\n list={[\n <Input name="employeeName" label="\u5458\u5de5\u59d3\u540d" rule="REQ" />,\n <Input name="workEmail" label="\u5de5\u4f5c\u90ae\u7bb1" rule="REQ EMAIL" />,\n <DatePicker name="onboardingDate" label="\u5165\u804c\u65e5\u671f" />,\n <Select\n name="department"\n label="\u6240\u5c5e\u90e8\u95e8"\n options={[\n { label: "\u6280\u672f\u7814\u53d1\u4e2d\u5fc3", value: "tech" },\n { label: "\u4ea7\u54c1\u7ba1\u7406\u4e2d\u5fc3", value: "product" },\n { label: "\u5e02\u573a\u8425\u9500\u4e2d\u5fc3", value: "marketing" },\n ]}\n />,\n ]}\n />\n\n <FormActions />\n </Space>\n </Form>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_FormInfo",packageName:"@components/FormInfo",component:a},{name:"antd",packageName:"antd",component:o}]},{title:"FormApiButton",description:"\u5c55\u793aFormApiButton\u7684\u4f7f\u7528\uff0c\u901a\u8fc7\u6309\u94ae\u8bbf\u95ee\u8868\u5355API\uff0c\u5b9e\u73b0\u5404\u79cd\u8868\u5355\u64cd\u4f5c",code:'const { default: FormInfo, Form, FormApiButton, fields } = _FormInfo;\nconst { Space, Flex } = antd;\n\nconst { Input, DatePicker, Select } = fields;\n\nconst BaseExample = () => {\n return (\n <Form\n onSubmit={(data) => {\n console.log("\u63d0\u4ea4\u6570\u636e:", data);\n alert("\u5458\u5de5\u4fe1\u606f\u4fdd\u5b58\u6210\u529f\uff01");\n }}\n >\n <Space direction="vertical" size={16} style={{ width: "100%" }}>\n <FormInfo\n title="\u5458\u5de5\u57fa\u672c\u4fe1\u606f"\n list={[\n <Input name="employeeName" label="\u5458\u5de5\u59d3\u540d" rule="REQ" />,\n <Input name="workEmail" label="\u5de5\u4f5c\u90ae\u7bb1" rule="REQ EMAIL" />,\n <DatePicker name="onboardingDate" label="\u5165\u804c\u65e5\u671f" />,\n <Select\n name="department"\n label="\u6240\u5c5e\u90e8\u95e8"\n options={[\n { label: "\u6280\u672f\u7814\u53d1\u4e2d\u5fc3", value: "tech" },\n { label: "\u4ea7\u54c1\u7ba1\u7406\u4e2d\u5fc3", value: "product" },\n { label: "\u5e02\u573a\u8425\u9500\u4e2d\u5fc3", value: "marketing" },\n ]}\n />,\n ]}\n />\n\n <FormInfo\n list={[\n <Flex gap={8} wrap>\n <FormApiButton\n type="default"\n onClick={({ openApi, formData }) => {\n alert("\u5f53\u524d\u8868\u5355\u6570\u636e\uff1a" + JSON.stringify(formData, null, 2));\n }}\n >\n \u67e5\u770b\u8868\u5355\u6570\u636e\n </FormApiButton>\n <FormApiButton\n type="default"\n onClick={({ openApi }) => {\n openApi.setFields(\n [\n { name: "employeeName", value: "\u738b\u5efa\u56fd" },\n { name: "workEmail", value: "wangjianguo@company.com" },\n { name: "department", value: "tech" },\n ],\n { runValidate: false }\n );\n }}\n >\n \u586b\u5145\u5458\u5de5\u4fe1\u606f\n </FormApiButton>\n <FormApiButton\n type="default"\n onClick={({ openApi }) => {\n openApi.validateAll();\n }}\n >\n \u6821\u9a8c\u8868\u5355\n </FormApiButton>\n <FormApiButton\n type="default"\n danger\n onClick={({ openApi }) => {\n openApi.reset();\n }}\n >\n \u91cd\u7f6e\u8868\u5355\n </FormApiButton>\n <FormApiButton\n type="primary"\n htmlType="submit"\n onClick={({ openApi }) => {\n openApi.submit();\n }}\n >\n \u4fdd\u5b58\u5458\u5de5\u4fe1\u606f\n </FormApiButton>\n </Flex>,\n ]}\n />\n </Space>\n </Form>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_FormInfo",packageName:"@components/FormInfo",component:a},{name:"antd",packageName:"antd",component:o}]},{title:"\u81ea\u5b9a\u4e49\u6821\u9a8c\u89c4\u5219",description:"\u5c55\u793a\u5982\u4f55\u5b9a\u4e49\u81ea\u5b9a\u4e49\u6821\u9a8c\u89c4\u5219\uff0c\u5305\u62ec\u540c\u6b65\u6821\u9a8c\u3001\u5f02\u6b65\u6821\u9a8c\u548c\u5b57\u6bb5\u95f4\u8054\u52a8\u6821\u9a8c",code:'const { default: FormInfo, Form, SubmitButton, ErrorTip, fields } = _FormInfo;\nconst { useModal } = _Modal;\nconst { Space, Alert } = antd;\n\nconst { Input, Password, Select } = fields;\n\nconst BaseExample = () => {\n const modal = useModal();\n return (\n <Form\n rules={{\n // \u81ea\u5b9a\u4e49\u89c4\u5219\uff1a\u5bc6\u7801\u5f3a\u5ea6\u6821\u9a8c\n PASSWORD_STRENGTH: (value) => {\n const hasLetter = /[a-zA-Z]/.test(value);\n const hasNumber = /[0-9]/.test(value);\n const hasSpecial = /[!@#$%^&]/.test(value);\n if (!hasLetter \|\| !hasNumber \|\| !hasSpecial) {\n return {\n result: false,\n errMsg: "\u5bc6\u7801\u5fc5\u987b\u5305\u542b\u5b57\u6bcd\u3001\u6570\u5b57\u548c\u7279\u6b8a\u5b57\u7b26",\n };\n }\n return { result: true, errMsg: "" };\n },\n // \u81ea\u5b9a\u4e49\u89c4\u5219\uff1a\u5f02\u6b65\u6821\u9a8c\u7528\u6237\u540d\n USERNAME_EXISTS: (value) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n const exists = ["wangming", "lihua", "zhangwei"].includes(value);\n resolve({\n result: !exists,\n errMsg: exists ? "\u8be5\u7528\u6237\u540d\u5df2\u88ab\u5360\u7528" : "",\n });\n }, 800);\n });\n },\n }}\n onSubmit={(data) => {\n modal({\n title: "\u7ba1\u7406\u5458\u8d26\u53f7\u521b\u5efa\u6210\u529f",\n children: <pre>{JSON.stringify(data, null, 2)}</pre>,\n });\n }}\n >\n <Space direction="vertical" size={16}>\n <Alert\n message="\u81ea\u5b9a\u4e49\u6821\u9a8c\u89c4\u5219\u8bf4\u660e"\n description="PASSWORD_STRENGTH-\u5bc6\u7801\u5f3a\u5ea6\u6821\u9a8c\uff08\u5fc5\u987b\u5305\u542b\u5b57\u6bcd\u3001\u6570\u5b57\u548c\u7279\u6b8a\u5b57\u7b26\uff09\| USERNAME_EXISTS-\u5f02\u6b65\u6821\u9a8c\u7528\u6237\u540d\u662f\u5426\u5df2\u5b58\u5728"\n type="info"\n />\n\n <FormInfo\n title="\u7ba1\u7406\u5458\u8d26\u53f7\u914d\u7f6e"\n list={[\n <ErrorTip name="username">\n <Input\n name="username"\n label="\u7ba1\u7406\u5458\u7528\u6237\u540d"\n rule="REQ LEN-4-16 USERNAME_EXISTS"\n tips="4-16\u4f4d\uff0cwangming\u3001lihua\u3001zhangwei\u5df2\u88ab\u5360\u7528"\n />\n </ErrorTip>,\n <Password\n name="password"\n label="\u8bbe\u7f6e\u5bc6\u7801"\n rule="REQ LEN-8-20 PASSWORD_STRENGTH"\n tips="\u81f3\u5c118\u4f4d\uff0c\u5305\u542b\u5b57\u6bcd\u3001\u6570\u5b57\u548c\u7279\u6b8a\u5b57\u7b26"\n />,\n <Password\n name="confirmPassword"\n label="\u786e\u8ba4\u5bc6\u7801"\n rule="REQ"\n tips="\u8bf7\u518d\u6b21\u8f93\u5165\u5bc6\u7801"\n />,\n <Select\n name="adminRole"\n label="\u7ba1\u7406\u6743\u9650\u7ea7\u522b"\n rule="REQ"\n options={[\n { label: "\u7cfb\u7edf\u7ba1\u7406\u5458", value: "superadmin" },\n { label: "\u90e8\u95e8\u7ba1\u7406\u5458", value: "department" },\n { label: "\u5185\u5bb9\u7ba1\u7406\u5458", value: "content" },\n ]}\n />,\n ]}\n />\n\n <SubmitButton type="primary">\u521b\u5efa\u7ba1\u7406\u5458\u8d26\u53f7</SubmitButton>\n </Space>\n </Form>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_FormInfo",packageName:"@components/FormInfo",component:a},{name:"_Modal",packageName:"@components/Modal",component:d},{name:"antd",packageName:"antd",component:o}]},{title:"\u5730\u5740\u9009\u62e9",description:"\u5c55\u793aAddressSelect\u5730\u5740\u9009\u62e9\u7ec4\u4ef6\uff0c\u652f\u6301\u7701\u5e02\u533a\u4e09\u7ea7\u8054\u52a8\u9009\u62e9",code:'const { AddressSelect: _AddressSelect, AddressInput: _AddressInput } =\n _FormInfo;\nconst { PureGlobal } = global;\nconst { Space, Button } = antd;\nconst { default: Content } = _Content;\nconst { range, uniqueId } = lodash;\n\nconst AddressSelect = _AddressSelect.Field;\nconst AddressEnum = _AddressSelect.AddressEnum;\nconst AddressInput = _AddressInput.Field;\n\nconst BaseExample = () => {\n return (\n <Content\n col={2}\n list={[\n {\n label: "\u4e1a\u52a1\u533a\u57df\u591a\u9009",\n content: (\n <AddressSelect\n maxLength={3}\n defaultValue={["110"]}\n onChange={(value) => {\n console.log(value);\n }}\n />\n ),\n },\n {\n label: "\u4e1a\u52a1\u533a\u57df\u5355\u9009",\n content: (\n <AddressSelect\n single\n defaultValue={"110"}\n onChange={(value) => {\n console.log(value);\n }}\n />\n ),\n },\n {\n label: "modal\u4e1a\u52a1\u533a\u57df\u591a\u9009",\n content: (\n <AddressSelect\n maxLength={3}\n isPopup={false}\n defaultValue={["110"]}\n onChange={(value) => {\n console.log(value);\n }}\n />\n ),\n },\n {\n label: "modal\u4e1a\u52a1\u533a\u57df\u5355\u9009",\n content: (\n <AddressSelect\n isPopup={false}\n single\n defaultValue={"110"}\n onChange={(value) => {\n console.log(value);\n }}\n />\n ),\n },\n {\n label: "valueType\u4e3aall",\n content: (\n <AddressSelect\n valueType="all"\n onChange={(value) => {\n console.log(value);\n }}\n />\n ),\n },\n {\n label: "\u5730\u5740\u663e\u793a",\n content: <AddressEnum name="270070" />,\n },\n {\n label: "\u663e\u793a\u7236\u7ea7",\n content: <AddressEnum name="270070" displayParent />,\n },\n {\n label: "\u8be6\u7ec6\u5730\u5740\u8f93\u5165",\n content: (\n <AddressInput\n onChange={(value) => {\n console.log(value);\n }}\n />\n ),\n },\n ]}\n />\n );\n};\n\nrender(\n <div className="input">\n <BaseExample />\n </div>\n);\n\n',scope:[{name:"_FormInfo",packageName:"@components/FormInfo",component:a},{name:"global",packageName:"@components/Global",component:r},{name:"_Content",packageName:"@components/Content",component:l},{name:"antd",packageName:"antd",component:o},{name:"lodash",packageName:"lodash",component:i}]},{title:"\u7ea7\u8054\u9009\u62e9",description:"\u5c55\u793a\u7ea7\u8054\u9009\u62e9\u7ec4\u4ef6\uff0c\u652f\u6301\u591a\u7ea7\u8054\u52a8\u9009\u62e9",code:'const { Cascader: _Cascader } = _FormInfo;\nconst { PureGlobal } = global;\nconst { default: Content } = _Content;\n\nconst { range, get } = lodash;\n\nconst Cascader = _Cascader.Field;\n\nconst BaseExample = () => {\n return (\n <Content\n col={2}\n list={[\n {\n label: "\u4e00\u6b21\u6027\u83b7\u53d6\u6570\u636e",\n content: (\n <Cascader\n onlyAllowLastLevel\n single\n api={{\n loader: async () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve([\n {\n id: "client",\n value: "client",\n type: "module",\n name: "\u5ba2\u6237\u7ba1\u7406",\n label: "\u5ba2\u6237\u7ba1\u7406",\n children: [\n {\n id: "client-list",\n value: "client-list",\n type: "feature",\n name: "\u5ba2\u6237\u5217\u8868",\n label: "\u5ba2\u6237\u5217\u8868",\n },\n {\n id: "client-detail",\n value: "client-detail",\n type: "module",\n name: "\u5ba2\u6237\u8be6\u60c5",\n label: "\u5ba2\u6237\u8be6\u60c5",\n children: [\n {\n id: "contract",\n value: "contract",\n type: "module",\n name: "\u5408\u540c\u7ba1\u7406",\n label: "\u5408\u540c\u7ba1\u7406",\n },\n ],\n },\n {\n id: "client-form",\n value: "client-form",\n type: "feature",\n name: "\u5ba2\u6237\u8868\u5355",\n label: "\u5ba2\u6237\u8868\u5355",\n children: [\n {\n id: "taxpayerIdNumber",\n value: "taxpayerIdNumber",\n type: "feature",\n name: "\u7a0e\u53f7",\n label: "\u7a0e\u53f7",\n },\n ],\n },\n ],\n },\n {\n id: "position",\n value: "position",\n type: "module",\n name: "\u62db\u8058\u7ba1\u7406",\n label: "\u62db\u8058\u7ba1\u7406",\n children: [\n {\n id: "position-list",\n value: "position-list",\n type: "feature",\n name: "\u804c\u4f4d\u5217\u8868",\n label: "\u804c\u4f4d\u5217\u8868",\n },\n {\n id: "position-detail",\n value: "position-detail",\n type: "module",\n name: "\u804c\u4f4d\u8be6\u60c5",\n label: "\u804c\u4f4d\u8be6\u60c5",\n },\n {\n id: "position-form",\n value: "position-form",\n type: "feature",\n name: "\u804c\u4f4d\u8868\u5355",\n label: "\u804c\u4f4d\u8868\u5355",\n children: [\n {\n id: "industry",\n value: "industry",\n type: "feature",\n name: "\u884c\u4e1a\u9009\u62e9",\n label: "\u884c\u4e1a\u9009\u62e9",\n },\n ],\n },\n ],\n },\n ]);\n }, 1000);\n });\n },\n }}\n onChange={(value) => {\n console.log(value);\n }}\n />\n ),\n },\n {\n label: "\u5206\u5c42\u52a0\u8f7d\u6570\u636e",\n content: (\n <Cascader\n openLoadData\n onSearch={async (searchText) => {\n return range(0, 20).map((key) => {\n const parentId = "2";\n return {\n id: `${parentId ? `${parentId}-` : ""}${key + 1}`,\n label: `\u90e8\u95e8-${searchText}-${\n parentId ? `${parentId}-` : ""\n }${key + 1}`,\n parentId,\n };\n });\n }}\n api={{\n loader: async ({ data }) => {\n const parentId = get(data, "id", "");\n const level = parentId.split("-").length;\n console.log("loadData", parentId, level);\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(\n range(0, 20).map((key) => {\n return Object.assign(\n {\n id: `${parentId ? `${parentId}-` : ""}${key + 1}`,\n label: `\u90e8\u95e8-${parentId ? `${parentId}-` : ""}${\n key + 1\n }`,\n parentId,\n },\n level >= 3 ? { children: null } : {}\n );\n })\n );\n }, 1000);\n });\n },\n }}\n />\n ),\n },\n {\n label: "modal\u5206\u5c42\u52a0\u8f7d\u6570\u636e",\n content: (\n <Cascader\n openLoadData\n isPopup={false}\n api={{\n loader: async ({ data }) => {\n const parentId = get(data, "id", "");\n const level = parentId.split("-").length;\n console.log("loadData", parentId, level);\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(\n range(0, 20).map((key) => {\n return Object.assign(\n {\n id: `${parentId ? `${parentId}-` : ""}${key + 1}`,\n label: `\u90e8\u95e8-${parentId ? `${parentId}-` : ""}${\n key + 1\n }`,\n parentId,\n },\n level >= 3 ? { children: null } : {}\n );\n })\n );\n }, 1000);\n });\n },\n }}\n />\n ),\n },\n ]}\n />\n );\n};\n\nrender(\n <PureGlobal>\n <div className="input">\n <BaseExample />\n </div>\n </PureGlobal>\n);\n\n',scope:[{name:"_FormInfo",packageName:"@components/FormInfo",component:a},{name:"global",packageName:"@components/Global",component:r},{name:"_Content",packageName:"@components/Content",component:l},{name:"lodash",packageName:"lodash",component:i}]},{title:"\u804c\u80fd\u9009\u62e9",description:"\u5c55\u793aFunctionSelect\u804c\u80fd\u9009\u62e9\u7ec4\u4ef6\uff0c\u652f\u6301\u591a\u7ea7\u804c\u80fd\u6811\u9009\u62e9",code:'const { FunctionSelect: _FunctionSelect } = _FormInfo;\nconst { PureGlobal } = global;\nconst { default: Content } = _Content;\n\nconst { range, get } = lodash;\n\nconst FunctionSelect = _FunctionSelect.Field;\n\nconst BaseExample = () => {\n return (\n <Content\n col={2}\n list={[\n {\n label: "\u804c\u80fd\u9009\u62e9",\n content: (\n <FunctionSelect\n onChange={(value) => {\n console.log(value);\n }}\n />\n ),\n },\n {\n label: "modal\u804c\u80fd\u9009\u62e9",\n content: (\n <FunctionSelect\n isPopup={false}\n onChange={(value) => {\n console.log(value);\n }}\n />\n ),\n },\n {\n label: "\u804c\u80fd\u9009\u62e9\u65e0\u641c\u7d22",\n content: (\n <FunctionSelect\n search={null}\n onChange={(value) => {\n console.log(value);\n }}\n />\n ),\n },\n {\n label: "\u804c\u80fd\u679a\u4e3e\u663e\u793a",\n content: <FunctionSelect.Enum name="001" />,\n },\n ]}\n />\n );\n};\n\nrender(\n <div className="input">\n <BaseExample />\n </div>\n);\n\n',scope:[{name:"_FormInfo",packageName:"@components/FormInfo",component:a},{name:"global",packageName:"@components/Global",component:r},{name:"_Content",packageName:"@components/Content",component:l},{name:"lodash",packageName:"lodash",component:i}]},{title:"\u884c\u4e1a\u9009\u62e9",description:"\u5c55\u793aIndustrySelect\u884c\u4e1a\u9009\u62e9\u7ec4\u4ef6\uff0c\u652f\u6301\u591a\u7ea7\u884c\u4e1a\u6811\u9009\u62e9",code:'const { IndustrySelect: _IndustrySelect } = _FormInfo;\nconst { PureGlobal } = global;\nconst { default: Content } = _Content;\n\nconst { range, get } = lodash;\n\nconst IndustrySelect = _IndustrySelect.Field;\n\nconst BaseExample = () => {\n return (\n <Content\n col={2}\n list={[\n {\n label: "\u6240\u5c5e\u884c\u4e1a",\n content: (\n <IndustrySelect\n defaultValue={["001"]}\n onChange={(value) => {\n console.log(value);\n }}\n />\n ),\n },\n {\n label: "modal\u6240\u5c5e\u884c\u4e1a",\n content: (\n <IndustrySelect\n isPopup={false}\n onChange={(value) => {\n console.log(value);\n }}\n />\n ),\n },\n {\n label: "\u884c\u4e1a\u679a\u4e3e\u663e\u793a",\n content: <IndustrySelect.Enum name="004" />,\n },\n ]}\n />\n );\n};\n\nrender(\n <div className="input">\n <BaseExample />\n </div>\n);\n\n',scope:[{name:"_FormInfo",packageName:"@components/FormInfo",component:a},{name:"global",packageName:"@components/Global",component:r},{name:"_Content",packageName:"@components/Content",component:l},{name:"lodash",packageName:"lodash",component:i}]},{title:"\u91d1\u989d\u8f93\u5165",description:"\u5c55\u793aMoneyInput\u91d1\u989d\u8f93\u5165\u7ec4\u4ef6\uff0c\u652f\u6301\u91d1\u989d\u683c\u5f0f\u5316\u548c\u5355\u4f4d\u9009\u62e9",code:'const { MoneyInput: _MoneyInput } = _FormInfo;\nconst { PureGlobal } = global;\nconst { default: Content } = _Content;\n\nconst MoneyInput = _MoneyInput.Field;\n\nconst BaseExample = () => {\n return (\n <Content\n col={2}\n list={[\n {\n label: "\u5408\u540c\u91d1\u989d\u8f93\u5165",\n content: <MoneyInput />,\n },\n ]}\n />\n );\n};\n\nrender(\n <PureGlobal>\n <div className="input">\n <BaseExample />\n </div>\n </PureGlobal>\n);\n\n',scope:[{name:"_FormInfo",packageName:"@components/FormInfo",component:a},{name:"global",packageName:"@components/Global",component:r},{name:"_Content",packageName:"@components/Content",component:l}]},{title:"\u7535\u8bdd\u53f7\u7801",description:"\u5c55\u793aPhoneNumber\u624b\u673a\u53f7\u8f93\u5165\u7ec4\u4ef6\uff0c\u652f\u6301\u624b\u673a\u53f7\u683c\u5f0f\u5316\u548c\u6821\u9a8c",code:'const { PhoneNumber: _PhoneNumber } = _FormInfo;\nconst { PureGlobal } = global;\nconst { default: Content } = _Content;\n\nconst PhoneNumber = _PhoneNumber.Field;\n\nconst BaseExample = () => {\n return (\n <Content\n col={2}\n list={[\n {\n label: "\u8054\u7cfb\u7535\u8bdd",\n content: (\n <PhoneNumber\n onChange={(value) => {\n console.log(value);\n }}\n />\n ),\n },\n ]}\n />\n );\n};\n\nrender(\n <PureGlobal>\n <div className="input">\n <BaseExample />\n </div>\n </PureGlobal>\n);\n\n',scope:[{name:"_FormInfo",packageName:"@components/FormInfo",component:a},{name:"global",packageName:"@components/Global",component:r},{name:"_Content",packageName:"@components/Content",component:l}]},{title:"\u85aa\u8d44\u8303\u56f4",description:"\u5c55\u793aSalaryInput\u85aa\u8d44\u8303\u56f4\u8f93\u5165\u7ec4\u4ef6\uff0c\u652f\u6301\u85aa\u8d44\u7c7b\u578b\u3001\u6708\u85aa/\u5e74\u85aa\u9009\u62e9\u548c\u8303\u56f4\u6821\u9a8c",code:'const { SalaryInput, Form } = _FormInfo;\nconst { PureGlobal } = global;\nconst { default: Content } = _Content;\n\nconst SalaryInputField = SalaryInput.Field;\n\nconst BaseExample = () => {\n return (\n <div>\n <Content\n col={1}\n list={[\n {\n label: "\u85aa\u8d44\u8303\u56f4",\n content: (\n <SalaryInputField\n onChange={(value) => {\n console.log(value);\n }}\n />\n ),\n },\n ]}\n />\n <Form\n rules={{\n SALARYRANGE: ({ min, max, type }) => {\n if (type !== 1) {\n if (!min \|\| !max) {\n return {\n result: false,\n errMsg: `${!min ? "\u6700\u4f4e\u85aa\u8d44" : "\u6700\u9ad8\u85aa\u8d44"}\u4e0d\u80fd\u4e3a\u7a7a`,\n };\n }\n if (min > max) {\n return {\n result: false,\n errMsg: "\u6700\u9ad8\u85aa\u8d44\u5e94\u5927\u4e8e\u6700\u4f4e\u85aa\u8d44",\n };\n }\n }\n return {\n result: true,\n errMsg: "",\n };\n },\n }}\n data={{ salaryRange: { type: 5, month: 12 } }}\n >\n <SalaryInput\n name="salaryRange"\n label="\u85aa\u8d44\u8303\u56f4"\n rule="REQ SALARYRANGE"\n showMonth\n remindUnit\n />\n </Form>\n </div>\n );\n};\n\nrender(\n <PureGlobal>\n <div className="input">\n <BaseExample />\n </div>\n </PureGlobal>\n);\n\n',scope:[{name:"_FormInfo",packageName:"@components/FormInfo",component:a},{name:"global",packageName:"@components/Global",component:r},{name:"_Content",packageName:"@components/Content",component:l}]},{title:"helperGuideName \u548c lang",description:"\u5c55\u793a helperGuideName \u4e3a\u5b57\u6bb5\u6dfb\u52a0\u5e2e\u52a9\u6307\u5f15\u529f\u80fd\uff0c\u4ee5\u53ca lang \u914d\u7f6e\u5b9e\u73b0\u591a\u8bed\u8a00\u652f\u6301",code:'const {default: FormInfo, Form, SubmitButton, fields, List} = _FormInfo;\nconst {useModal} = _Modal;\nconst {PureGlobal} = global;\nconst {Space, Alert, Radio} = antd;\nconst {useState} = React;\n\nconst {Input, TextArea, Select} = fields;\n\nconst BaseExample = () => {\n const modal = useModal();\n const [helperGuideName, setHelperGuideName] = useState("employee-form");\n const [langOpen, setLangOpen] = useState(true);\n\n return (<Space direction="vertical" size={24} style={{width: "100%"}}>\n <Alert\n message="helperGuideName \u548c lang \u4f7f\u7528\u8bf4\u660e"\n description="helperGuideName-\u4e3a\u5b57\u6bb5\u6dfb\u52a0\u5e2e\u52a9\u6307\u5f15\u529f\u80fd \| lang-\u542f\u7528\u591a\u8bed\u8a00\u652f\u6301\uff0c\u4e3a\u6bcf\u4e2a\u5b57\u6bb5\u751f\u6210\u591a\u8bed\u8a00\u7248\u672c"\n type="info"\n />\n\n <Space direction="vertical" size={16} style={{width: "100%"}}>\n <div>\n <span style={{marginRight: 12, fontWeight: 500}}>\u5e2e\u52a9\u6307\u5f15\u540d\u79f0\uff1a</span>\n <Radio.Group\n value={helperGuideName}\n onChange={(e) => setHelperGuideName(e.target.value)}\n >\n <Radio.Button value="employee-form">\u542f\u7528 (employee-form)</Radio.Button>\n <Radio.Button value="">\u7981\u7528</Radio.Button>\n </Radio.Group>\n </div>\n\n <div>\n <span style={{marginRight: 12, fontWeight: 500}}>\u591a\u8bed\u8a00\u914d\u7f6e\uff1a</span>\n <Radio.Group\n value={langOpen}\n onChange={(e) => setLangOpen(e.target.value)}\n >\n <Radio.Button value={true}>\u4e2d\u6587+\u82f1\u6587</Radio.Button>\n <Radio.Button value={false}>\u4ec5\u4e2d\u6587</Radio.Button>\n </Radio.Group>\n </div>\n </Space>\n\n <Form\n helperGuideName={helperGuideName}\n lang={langOpen ? ["cn", {\n name: "EnUS", label: "\u82f1\u6587", options: {\n labelTransform: (label) => label + "(en)",\n ignore: [{name: "avatar"}, {name: "photo"}],\n disabled: [{name: "file"}], //fields:[{name:\'name\'}]\n },\n },] : undefined}\n onSubmit={(data) => {\n modal({\n title: "\u5458\u5de5\u6863\u6848\u63d0\u4ea4\u6210\u529f", children: <pre>{JSON.stringify(data, null, 2)}</pre>,\n });\n }}\n >\n <Space direction="vertical" size={16}>\n <FormInfo\n title="\u57fa\u672c\u4fe1\u606f"\n list={[<Input name="name" label="\u5458\u5de5\u59d3\u540d" rule="REQ"/>,\n <Input name="email" label="\u5de5\u4f5c\u90ae\u7bb1" rule="REQ EMAIL"/>,\n <TextArea name="description" label="\u4e2a\u4eba\u7b80\u4ecb" block/>,]}\n />\n\n <FormInfo\n title="\u5de5\u4f5c\u4fe1\u606f"\n list={[<Select\n name="department"\n label="\u6240\u5c5e\u90e8\u95e8"\n rule="REQ"\n options={[{label: "\u6280\u672f\u7814\u53d1\u4e2d\u5fc3", value: "tech"}, {\n label: "\u4ea7\u54c1\u7ba1\u7406\u4e2d\u5fc3", value: "product"\n }, {label: "\u5e02\u573a\u8425\u9500\u4e2d\u5fc3", value: "marketing"},]}\n />, <Select\n name="position"\n label="\u804c\u4f4d\u540d\u79f0"\n rule="REQ"\n options={[{label: "\u9ad8\u7ea7\u5de5\u7a0b\u5e08", value: "senior"}, {\n label: "\u4ea7\u54c1\u7ecf\u7406", value: "pm"\n }, {label: "UI\u8bbe\u8ba1\u5e08", value: "designer"},]}\n />,]}\n />\n\n <List\n name="skills"\n title="\u4e13\u4e1a\u6280\u80fd\u5217\u8868"\n itemTitle={({index}) => `\u6280\u80fd ${index + 1}`}\n list={[<Input name="name" label="\u6280\u80fd\u540d\u79f0" rule="REQ"/>, <Select\n name="level"\n label="\u719f\u7ec3\u7a0b\u5ea6"\n rule="REQ"\n options={[{label: "\u521d\u7ea7", value: "beginner"}, {\n label: "\u4e2d\u7ea7", value: "intermediate"\n }, {label: "\u9ad8\u7ea7", value: "advanced"},]}\n />,]}\n />\n\n <SubmitButton type="primary">\u63d0\u4ea4\u5458\u5de5\u6863\u6848</SubmitButton>\n </Space>\n </Form>\n </Space>);\n};\n\nrender(<PureGlobal\n preset={{\n enums: {\n helperGuide: () => [{\n value: "employee-form-name", content: "\u8bf7\u8f93\u5165\u5458\u5de5\u7684\u771f\u5b9e\u59d3\u540d\uff0c\u7528\u4e8e\u8eab\u4efd\u8bc6\u522b\u548c\u6863\u6848\u7ba1\u7406", url: "#",\n }, {\n value: "employee-form-email", content: "\u8bf7\u8f93\u5165\u6709\u6548\u7684\u7535\u5b50\u90ae\u7bb1\u5730\u5740\uff0c\u7528\u4e8e\u63a5\u6536\u5de5\u4f5c\u901a\u77e5\u548c\u7cfb\u7edf\u6d88\u606f", url: "#",\n }, {\n value: "employee-form-department",\n content: "\u8bf7\u9009\u62e9\u5458\u5de5\u6240\u5c5e\u7684\u90e8\u95e8\uff0c\u90e8\u95e8\u51b3\u5b9a\u4e86\u5458\u5de5\u7684\u6c47\u62a5\u5173\u7cfb\u548c\u6743\u9650\u8303\u56f4",\n url: "#",\n }, {\n value: "employee-form-position", content: "\u8bf7\u9009\u62e9\u5458\u5de5\u7684\u804c\u4f4d\uff0c\u804c\u4f4d\u51b3\u5b9a\u4e86\u5458\u5de5\u7684\u7ea7\u522b\u548c\u804c\u8d23\u8303\u56f4", url: "#",\n }, {\n value: "employee-form-skills-name", content: "\u8bf7\u586b\u5199\u5458\u5de5\u638c\u63e1\u7684\u6280\u80fd\u540d\u79f0\uff0c\u5982\u7f16\u7a0b\u8bed\u8a00\u3001\u4e13\u4e1a\u6280\u80fd\u7b49", url: "#",\n }, {\n value: "employee-form-skills-level",\n content: "\u8bf7\u9009\u62e9\u5458\u5de5\u5bf9\u8be5\u6280\u80fd\u7684\u719f\u7ec3\u7a0b\u5ea6\uff0c\u4fbf\u4e8e\u5408\u7406\u5206\u914d\u5de5\u4f5c\u4efb\u52a1",\n url: "#",\n },],\n },\n }}\n>\n <BaseExample/>\n</PureGlobal>);\n\n',scope:[{name:"_FormInfo",packageName:"@components/FormInfo",component:a},{name:"_Modal",packageName:"@components/Modal",component:d},{name:"antd",packageName:"antd",component:o},{name:"global",packageName:"@components/Global",component:r}]}]}}},89896(n,t,e){e.d(t,{A:()=>r});var a=e(72752),d=e(55199),o=e(64671);const r={name:"Global",summary:"<h3>\u4f55\u65f6\u4f7f\u7528</h3>\n<p>\u5728\u4f7f\u7528components-core\u7684\u4efb\u4f55\u7ec4\u4ef6\u7684\u4e1a\u52a1\u7cfb\u7edf\uff0c\u9700\u8981\u5c06\u8be5\u7ec4\u4ef6\u653e\u7f6e\u4e8e\u6700\u5916\u5c42\uff0c\u5e76\u4e14\u6309\u7167\u8981\u6c42\u6b63\u786e\u8bbe\u7f6epreset\u3002</p>\n<p>\u4ee5\u4e0b\u662fcomponents-core\u7ec4\u4ef6\u7cfb\u7edf\u4e2d\u9700\u8981\u8bbe\u7f6e\u7684preset\u503c\uff0c\u53ca\u4f7f\u7528\u8fd9\u4e9b\u503c\u7684\u7ec4\u4ef6</p>\n<table>\n<thead>\n<tr>\n<th>\u540d\u79f0</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u4f7f\u7528\u7ec4\u4ef6</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>permissions</td>\n<td>\u914d\u7f6e\u529f\u80fd\u6743\u9650\u5217\u8868\uff0cPermissions\u6839\u636e\u8be5\u5217\u8868\u91cc\u9762\u662f\u5426\u5b58\u5728\u67d0\u6743\u9650\u540d\u79f0\u5224\u65ad\u7528\u6237\u662f\u5426\u5177\u6709\u8be5\u529f\u80fd\u6743\u9650\uff0c\u6765\u63a7\u5236\u5bf9\u5e94\u64cd\u4f5c\u884c\u4e3a</td>\n<td>array</td>\n<td>Permissions</td>\n</tr>\n<tr>\n<td>ajax</td>\n<td>\u7528\u4e8e\u53d1\u9001ajax\u8bf7\u6c42\u7684\u65b9\u6cd5\uff0c\u4e00\u822c\u60c5\u51b5\u4e0b\u5176\u5e94\u8be5\u662f\u4e00\u4e2aaxios\u5bf9\u8c61</td>\n<td>object</td>\n<td>Image</td>\n</tr>\n<tr>\n<td>apis</td>\n<td>\u7528\u4e8e\u548c\u540e\u7aef\u8fdb\u884c\u4e00\u4e9b\u4ea4\u4e92\u884c\u4e3a\u7684\u63a5\u53e3\u96c6\u5408</td>\n<td>object</td>\n<td>Image</td>\n</tr>\n<tr>\n<td>apis.oss</td>\n<td>\u7528\u4e8e\u901a\u8fc7\u4e00\u4e2aossId\u5411\u540e\u7aefoss\u670d\u52a1\u83b7\u53d6\u4e00\u4e2a\u53ef\u4ee5\u8bbf\u95ee\u5230\u6307\u5b9a\u6587\u4ef6\u7684url</td>\n<td>object</td>\n<td>Image</td>\n</tr>\n<tr>\n<td>apis.ossUpload</td>\n<td>\u7528\u4e8e\u5411oss\u670d\u52a1\u4e0a\u4f20\u4e00\u4e2a\u6587\u4ef6</td>\n<td>object</td>\n<td>FormInfo.Upload,FormInfo.Avatar</td>\n</tr>\n<tr>\n<td>features</td>\n<td>\u7528\u4e8e\u914d\u7f6e\u7cfb\u7edf\u7684\u7279\u6027\u53c2\u6570</td>\n<td>object</td>\n<td>Features</td>\n</tr>\n<tr>\n<td>features.profile</td>\n<td>\u7cfb\u7edf\u7684\u7279\u6027\u5217\u8868\u53c2\u8003\u7ec4\u4ef6Features</td>\n<td>object</td>\n<td>Features</td>\n</tr>\n<tr>\n<td>features.debug</td>\n<td>\u7279\u6027\u7684\u8c03\u8bd5\u6a21\u5f0f\uff0c\u53ef\u4ee5\u5728\u63a7\u5236\u53f0\u6253\u5370Features\u7684id\u548c\u72b6\u6001</td>\n<td>boolean</td>\n<td>Features</td>\n</tr>\n<tr>\n<td>enums</td>\n<td>\u516c\u5171\u679a\u4e3e\u503c\uff0c\u8be6\u60c5\u53c2\u770bEnum\u7ec4\u4ef6</td>\n<td>object</td>\n<td>Enum</td>\n</tr>\n<tr>\n<td>enums.helperGuide</td>\n<td>\u5e2e\u52a9\u6587\u6863\u679a\u4e3e\u914d\u7f6e</td>\n<td>function</td>\n<td>HelperGuide</td>\n</tr>\n<tr>\n<td>formInfo</td>\n<td>\u8868\u5355\u914d\u7f6e</td>\n<td>object</td>\n<td>FormInfo.formModule</td>\n</tr>\n<tr>\n<td>formInfo.rules</td>\n<td>\u8868\u5355\u89c4\u5219\u914d\u7f6e</td>\n<td>object</td>\n<td>FormInfo.formModule</td>\n</tr>\n</tbody>\n</table>\n<p>\u5168\u5c40context\u7ba1\u7406\u8bbe\u7f6e\u53ca\u9ed8\u8ba4\u6837\u5f0f</p>\n<ul>\n<li>\u8bf7\u5c06\u5168\u5c40\u8986\u76d6\u6027\u7684\u6837\u5f0f\u653e\u5728\u6b64\u7ec4\u4ef6\u4e2d</li>\n<li>\u8bf7\u5c06\u5b57\u4f53\u6587\u4ef6\u7684\u5f15\u7528\u653e\u5728\u6b64\u7ec4\u4ef6\u4e2d</li>\n<li>\u8bf7\u5c06antd\u7684\u8986\u76d6\u6027\u6837\u5f0f\u653e\u5728\u6b64\u7ec4\u4ef6\u4e2d</li>\n<li>\u8be5\u7ec4\u4ef6\u9700\u8981\u653e\u7f6e\u5728\u5e94\u7528\u6839\u4f4d\u7f6e</li>\n</ul>\n<p>\u66f4\u65b0\u5b57\u4f53\u6587\u4ef6:</p>\n<ul>\n<li>\u5c06iconfont\u4e0a\u4e0b\u8f7d\u7684\u5b57\u4f53\u5305\u89e3\u538b\u540e\u653e\u5728public\u6587\u4ef6\u5939\u4e0b\u9762</li>\n<li>\u66f4\u65b0src/common/params.js \u4e2d\u7684\u53d8\u91cf iconfontBase</li>\n<li>\u4fee\u6539\u540e\u6784\u5efa\u8be5\u9879\u76ee\u53d1\u5e03\u5230\u5bf9\u5e94\u73af\u5883</li>\n</ul>",api:"<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>preset</td>\n<td>\u5168\u5c40\u9884\u8bbe\u53c2\u6570\uff0c\u53ef\u4ee5\u901a\u8fc7usePreset\u83b7\u53d6\uff0c\u7531\u4e1a\u52a1\u7cfb\u7edf\u8bbe\u7f6e</td>\n<td>object</td>\n<td>{}</td>\n</tr>\n<tr>\n<td>themeToken</td>\n<td>\u8bbe\u7f6e\u4e3b\u9898\uff0c\u53c2\u770bantd\u7684themeToken\uff0c\u4e00\u822c\u53ea\u9700\u8981\u8bbe\u7f6e{colorPrimary}</td>\n<td>object</td>\n<td>{}</td>\n</tr>\n<tr>\n<td>init</td>\n<td>\u521d\u59cb\u5316\u65b9\u6cd5\uff0c\u5728\u7cfb\u7edf\u9996\u6b21\u52a0\u8f7d\u65f6\u6267\u884c\uff0c\u53ef\u4ee5\u8fd4\u56dePromise\u3002\u7528\u6765\u653e\u7f6e\u7cfb\u7edf\u663e\u793a\u4e4b\u524d\u7684\u5f02\u6b65\u64cd\u4f5c</td>\n<td>function</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>PureGlobal</h3>\n<p>api\u540cGlobal\uff0c\u4f46\u662f\u5c11\u4e86\u9875\u9762\u9519\u8bef\u6355\u83b7\u548cclassName:container-body\u5e26\u6765\u7684\u9ed8\u8ba4\u6700\u5c0f\u5bbd\u5ea6\u7b49\u6837\u5f0f\u8bbe\u7f6e\uff0c\u4e3b\u8981\u7528\u5728\u7ec4\u4ef6\u5e93\u7684\u6f14\u793a\u73af\u5883\u548c\u5f39\u7a97\u4e2d</p>\n<h3>usePreset</h3>\n<p>\u83b7\u53d6\u9884\u8bbe\u7684preset\uff0c\u5df2\u7ecf\u786e\u5b9a\u4e3a\u7cfb\u7edf\u9700\u8981\u4f7f\u7528\u7684key\u503c:permissions,apis,formOptions,modalOptions</p>\n<h3>useGlobalContext</h3>\n<p>\u83b7\u53d6\u548c\u8bbe\u7f6e\u5168\u5c40\u72b6\u6001\uff0c\u8be5\u72b6\u6001\u4fdd\u5b58\u5728Global\u7ec4\u4ef6\u4e00\u7ea7\uff0c\u4e0d\u4f1a\u968f\u7740\u5185\u90e8\u7ec4\u4ef6\u672c\u8eab\u7684\u9500\u6bc1\u800c\u9500\u6bc1\u3002\n\u4e3b\u8981\u7ed9\u7ec4\u4ef6\u5185\u90e8\u4f7f\u7528\uff0c\u4e1a\u52a1\u5e94\u8be5\u907f\u514d\u4f7f\u7528\u8be5api\u8bbe\u7f6e\u65b0\u7684global\u53d8\u91cf\u3002\u4e1a\u52a1\u5982\u679c\u6709\u9700\u8981\u5e94\u5f53\u81ea\u884c\u5728\u9876\u7ea7\u7ec4\u4ef6\u4e2d\u8bbe\u7f6econtext\u3002</p>\n<h4>params:useGlobalContext(globalKey)</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>globalKey</td>\n<td>\u5168\u5c40\u53c2\u6570\u7684key\uff0c\u5f53\u5b58\u5728globalKey\u65f6\uff0c\u9ed8\u8ba4\u83b7\u53d6\u548c\u8bbe\u7f6e\u90fd\u662fglobal[key]\uff0c\u5f53\u4e0d\u5b58\u5728globalKey\u83b7\u53d6\u548c\u8bbe\u7f6e\u7684\u90fd\u662fglobal\uff0c\u9664\u975e\u5b58\u5728\u591a\u4e2a\u83b7\u53d6\u548c\u8bbe\u7f6eglobal\u7684key-value\uff0c\u5426\u5219\u4e0d\u63a8\u8350\u76f4\u63a5\u4f7f\u7528\u4e0d\u5b58\u5728globalKey\u7684\u60c5\u51b5</td>\n<td>string</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h4>return:{global,setGlobal}</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>global</td>\n<td>\u5f53\u524d\u7684global\u503c</td>\n<td>any</td>\n</tr>\n<tr>\n<td>setGlobal</td>\n<td>\u8bbe\u7f6e\u5f53\u524d\u7684global\u503c</td>\n<td>function</td>\n</tr>\n</tbody>\n</table>",example:{isFull:!1,className:"Global_4cc66",style:".Global_4cc66 .label {\n font-weight: bold;\n}",list:[{title:"\u57fa\u672c\u793a\u4f8b",description:"\u5c55\u793a\u4e86\u6587\u5b57\u5927\u5c0f\u989c\u8272\u884c\u9ad8\u7684\u8bbe\u7f6e",code:"const { PureGlobal } = _Global;\nconst { Space, Divider } = antd;\nconst BaseExample = () => {\n return (\n <PureGlobal>\n <Space direction=\"vertical\">\n <div className=\"label\">\u6587\u5b57\u5927\u5c0f:</div>\n <div style={{ fontSize: 'var(--font-size-large)' }}>\u5927\u53f7\u6587\u5b57</div>\n <div>\u9ed8\u8ba4\u5927\u5c0f\u6587\u5b57</div>\n <div style={{ fontSize: 'var(--font-size-small)' }}>\u5c0f\u53f7\u6587\u5b57</div>\n <Divider />\n <div className=\"label\">\u6587\u5b57\u989c\u8272:</div>\n <div style={{ color: 'var(--font-color)' }}>\u9ed8\u8ba4\u989c\u8272</div>\n <div style={{ color: 'var(--font-color-grey)' }}>\u7070\u8272</div>\n <div style={{ color: 'var(--font-color-grey-1)' }}>\u7070\u82721</div>\n <div style={{ color: 'var(--font-color-grey-2)' }}>\u7070\u82722</div>\n <Divider />\n <div className=\"label\">\u884c\u9ad8:</div>\n <div style={{ lineHeight: 'var(--line-height-large)' }}>\n \u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\u5bbd\u677e\u884c\u9ad8\n </div>\n <div>\n \u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\u9ed8\u8ba4\u884c\u9ad8\n </div>\n <div style={{ lineHeight: 'var(--line-height-small)' }}>\n \u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\u7d27\u51d1\u884c\u9ad8\n </div>\n </Space>\n </PureGlobal>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_Global",packageName:"@components/Global",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u8b66\u544a\u63d0\u793a",description:"\u5c55\u793a\u4e86\u8b66\u544a\u63d0\u793a\u7684\u8986\u76d6\u6837\u5f0f",code:'const { PureGlobal } = _Global;\nconst { Alert, Space } = antd;\nconst { default: Icon } = icon;\n\nconst BasicExample = () => {\n return (\n <PureGlobal>\n <Space direction="vertical">\n <Alert message="\u8fd9\u662f\u4e00\u6761\u64cd\u4f5c\u6210\u529f\u7684\u72b6\u6001\u53cd\u9988" type="success" showIcon />\n <Alert message="\u8fd9\u662f\u4e00\u6761\u666e\u901a\u7684\u4fe1\u606f\u8bf4\u660e" type="info" showIcon />\n <Alert message="\u8fd9\u662f\u4e00\u6761\u63d0\u793a\u4fe1\u606f" type="warning" showIcon />\n <Alert message="\u8fd9\u662f\u4e00\u6761\u8bf7\u6c42\u5931\u8d25\u7684\u72b6\u6001\u53cd\u9988" type="error" showIcon />\n <Alert\n message="\u8fd9\u662f\u4e00\u6761\u8b66\u793a\u4fe1\u606f"\n type="error"\n showIcon\n icon={<Icon colorful type="icon-color-caisejingshi" />}\n />\n\n <Alert\n message="\u8fd9\u662f\u4e00\u6761\u64cd\u4f5c\u6210\u529f\u7684\u72b6\u6001\u53cd\u9988"\n description="\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a"\n type="success"\n showIcon\n />\n <Alert\n message="\u8fd9\u662f\u4e00\u6761\u666e\u901a\u7684\u4fe1\u606f\u8bf4\u660e"\n description="\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a"\n type="info"\n showIcon\n />\n <Alert\n message="\u8fd9\u662f\u4e00\u6761\u63d0\u793a\u4fe1\u606f"\n description="\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a"\n type="warning"\n showIcon\n />\n <Alert\n message="\u8fd9\u662f\u4e00\u6761\u8bf7\u6c42\u5931\u8d25\u7684\u72b6\u6001\u53cd\u9988"\n description="\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a"\n type="error"\n showIcon\n />\n <Alert\n message="\u8fd9\u662f\u4e00\u6761\u8b66\u793a\u4fe1\u606f"\n description="\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a"\n type="error"\n showIcon\n icon={<Icon colorful type="icon-color-caisejingshi" />}\n />\n\n <Alert\n message="\u8fd9\u662f\u4e00\u6761\u64cd\u4f5c\u6210\u529f\u7684\u72b6\u6001\u53cd\u9988"\n description="\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a"\n type="success"\n showIcon\n closable\n />\n <Alert\n message="\u8fd9\u662f\u4e00\u6761\u666e\u901a\u7684\u4fe1\u606f\u8bf4\u660e"\n description="\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a"\n type="info"\n showIcon\n closable\n />\n <Alert\n message="\u8fd9\u662f\u4e00\u6761\u63d0\u793a\u4fe1\u606f"\n description="\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a"\n type="warning"\n showIcon\n closable\n />\n <Alert\n message="\u8fd9\u662f\u4e00\u6761\u8bf7\u6c42\u5931\u8d25\u7684\u72b6\u6001\u53cd\u9988"\n description="\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a"\n type="error"\n showIcon\n closable\n />\n <Alert\n message="\u8fd9\u662f\u4e00\u6761\u8b66\u793a\u4fe1\u606f"\n description="\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a\u63d0\u793a"\n type="error"\n showIcon\n closable\n icon={<Icon colorful type="icon-color-caisejingshi" />}\n />\n </Space>\n </PureGlobal>\n );\n};\n\nrender(<BasicExample />);\n\n',scope:[{name:"_Global",packageName:"@components/Global",component:a},{name:"antd",packageName:"antd",component:d},{name:"icon",packageName:"@components/Icon",component:o}]},{title:"\u6309\u94ae",description:"\u5c55\u793a\u4e86\u6309\u94ae\u7684\u8986\u76d6\u6837\u5f0f",code:'const { PureGlobal } = _Global;\nconst { Button, Typography, Space } = antd;\nconst { default: Icon } = icon;\n\nconst BaseExample = () => {\n return (\n <PureGlobal>\n <Space direction="vertical">\n <Space>\n <Button size="large">\u5927\u6309\u94ae</Button>\n <Button>\u9ed8\u8ba4\u6309\u94ae</Button>\n <Button size="small">\u5c0f\u6309\u94ae</Button>\n </Space>\n <Space>\n <Button type="primary">\u6309\u94ae</Button>\n <Button type="link">\u6309\u94ae</Button>\n <Button type="text">\u6309\u94ae</Button>\n </Space>\n <Space>\n <Button danger>\u5371\u9669\u6309\u94ae</Button>\n <Button type="primary" danger>\n \u5371\u9669\u6309\u94ae\n </Button>\n <Button type="link" danger>\n \u5371\u9669\u6309\u94ae\n </Button>\n <Button type="text" danger>\n \u5371\u9669\u6309\u94ae\n </Button>\n </Space>\n <Space>\n <Button disabled>\u7981\u7528\u6309\u94ae</Button>\n <Button type="primary" danger disabled>\n \u7981\u7528\u5371\u9669\u6309\u94ae\n </Button>\n <Button type="link" disabled>\n \u7981\u7528Link\u6309\u94ae\n </Button>\n <Button type="text" disabled>\n \u7981\u7528Text\u6309\u94ae\n </Button>\n </Space>\n <Space>\n <Button type="text" icon={<Icon type="icon-tianjia" />}>\n \u56fe\u6807\u6309\u94ae\n </Button>\n <Button type="text">\n \u56fe\u6807\u6309\u94ae\u53f3\n <Icon type="icon-arrow-thin-down" />\n </Button>\n </Space>\n <Space>\n <Button type="primary" icon={<Icon type="icon-tianjia" />} />\n <Button icon={<Icon type="icon-tianjia" />} />\n <Button danger icon={<Icon type="icon-tianjia" />} />\n <Button type="link" icon={<Icon type="icon-tianjia" />} />\n <Button type="text" icon={<Icon type="icon-tianjia" />} />\n </Space>\n <Space>\n <Button type="primary" disabled icon={<Icon type="icon-tianjia" />} />\n <Button disabled icon={<Icon type="icon-tianjia" />} />\n <Button disabled danger icon={<Icon type="icon-tianjia" />} />\n <Button disabled type="link" icon={<Icon type="icon-tianjia" />} />\n <Button disabled type="text" icon={<Icon type="icon-tianjia" />} />\n </Space>\n <Space>\n <Typography.Link>Link\u6587\u5b57</Typography.Link>\n <Typography.Text className="ant-btn">\u6587\u5b57</Typography.Text>\n <Typography.Link>\n <Icon type="icon-tianjia" />\n Link\u6587\u5b57\n </Typography.Link>\n <Typography.Text className="ant-btn">\n <Icon type="icon-tianjia" />\n \u6587\u5b57\n </Typography.Text>\n <Typography.Link className="ant-btn-dangerous">\n Link\u6587\u5b57\n </Typography.Link>\n </Space>\n <Space>\n <Button className="btn-no-padding" type="link" size="large">\n \u5927\u6309\u94ae\n </Button>\n <Button className="btn-no-padding" type="link">\n \u9ed8\u8ba4\u6309\u94ae\n </Button>\n <Button className="btn-no-padding" type="link" size="small">\n \u5c0f\u6309\u94ae\n </Button>\n <Button className="btn-no-padding" type="text" size="large">\n \u5927\u6309\u94ae\n </Button>\n <Button className="btn-no-padding" type="text">\n \u9ed8\u8ba4\u6309\u94ae\n </Button>\n <Button className="btn-no-padding" type="text" size="small">\n \u5c0f\u6309\u94ae\n </Button>\n <Button className="btn-no-padding" type="link" size="large" danger>\n \u5927\u6309\u94ae\n </Button>\n <Button className="btn-no-padding" type="link" danger>\n \u9ed8\u8ba4\u6309\u94ae\n </Button>\n <Button className="btn-no-padding" type="link" size="small" danger>\n \u5c0f\u6309\u94ae\n </Button>\n </Space>\n </Space>\n </PureGlobal>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Global",packageName:"@components/Global",component:a},{name:"antd",packageName:"antd",component:d},{name:"icon",packageName:"@components/Icon",component:o}]},{title:"\u65e0\u8fb9\u6846\u6807\u7b7e",description:"\u5c55\u793a\u4e86\u65e0\u8fb9\u6846\u6807\u7b7e",code:'const { PureGlobal } = _Global;\nconst { Tag, Space } = antd;\n\nconst BasicExample = () => {\n return (\n <PureGlobal>\n <Space>\n <Tag className="no-border" closable>\n \u6807\u7b7e1\n </Tag>\n <Tag className="no-border" closable>\n \u6807\u7b7e2\n </Tag>\n <Tag className="no-border" closable>\n \u6807\u7b7e3\n </Tag>\n </Space>\n </PureGlobal>\n );\n};\n\nrender(<BasicExample />);\n\n',scope:[{name:"_Global",packageName:"@components/Global",component:a},{name:"antd",packageName:"antd",component:d}]}]}}},32159(n,t,e){e.d(t,{A:()=>a});const a={name:"HelperGuide",summary:"<p>\u7ed9\u7528\u6237\u63d0\u4f9b\u5e2e\u52a9\u6587\u6863</p>",api:"<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n</table>",example:{isFull:!1,className:"",style:"",list:[{title:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u6807\u9898",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const { default: HelperGuide } = _HelperGuide;\nconst { PureGlobal } = Global;\nconst BaseExample = () => {\n return (\n <PureGlobal\n preset={{\n enums: {\n helperGuide: () => [\n {\n value: "test",\n content:\n "\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u554a\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u554a\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u554a\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u554a\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u554a\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u54c8\u554a\u54c8\u54c8\u54c8",\n url: "/xxxx",\n },\n ],\n },\n }}\n >\n <HelperGuide name="test" />\n </PureGlobal>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_HelperGuide",packageName:"@components/HelperGuide",component:e(75363)},{name:"Global",packageName:"@components/Global",component:e(72752)}]}]}}},93314(n,t,e){e.d(t,{A:()=>a});const a={name:"HistoryStore",summary:"<p>\u5386\u53f2\u8bb0\u5f55\u63d0\u793a</p>",api:"<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n</table>",example:{isFull:!1,className:"",style:"",list:[{title:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u6807\u9898",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const { default: HistoryStore } = _HistoryStore;\nconst { Input } = antd;\nconst { useState } = React;\nconst BaseExample = () => {\n const [value, setValue] = useState("");\n return (\n <HistoryStore\n onSelect={(value) => {\n setValue(value);\n }}\n >\n {({ appendHistory, openHistory }) => (\n <Input.Search\n value={value}\n onChange={(e) => {\n setValue(e.target.value);\n }}\n onFocus={openHistory}\n onSearch={(value) => {\n appendHistory({\n value,\n label: value,\n });\n }}\n />\n )}\n </HistoryStore>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_HistoryStore",packageName:"@components/HistoryStore",component:e(24666)},{name:"antd",packageName:"antd",component:e(55199)}]}]}}},45426(n,t,e){e.d(t,{A:()=>s});var a=e(64671),d=e(55199),o=e(87558),r=e(72752),l=e(89946),i=e(13050);const s={name:"Icon",summary:"<p>\u53ef\u4ee5\u663e\u793a\u4e00\u4e2a\u56fe\u6807\uff0c\u56fe\u6807\u5fc5\u987b\u5728\u5b57\u4f53\u6587\u4ef6\u4e2d\u88ab\u5b9a\u4e49\u8fc7</p>",api:'<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>type</td>\n<td>\u56fe\u6807\u7c7b\u578b\uff0c\u53c2\u8003\u793a\u4f8b\u4e0b\u7684\u5b57\u7b26\u4e32</td>\n<td>string</td>\n<td>-</td>\n</tr>\n<tr>\n<td>colorful</td>\n<td>\u662f\u5426\u662f\u5f69\u8272\u56fe\u6807</td>\n<td>boolean</td>\n<td>false</td>\n</tr>\n<tr>\n<td>prefix</td>\n<td>\u56fe\u6807\u524d\u7f00</td>\n<td>string</td>\n<td>""</td>\n</tr>\n<tr>\n<td>size</td>\n<td>\u56fe\u6807\u5927\u5c0f</td>\n<td>number</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>',example:{isFull:!0,className:"Icon_81743",style:".Icon_81743 .item {\n width: 150px;\n word-break: break-all;\n}\n.Icon_81743 .item .ant-typography {\n position: relative;\n}\n.Icon_81743 .item .ant-typography-copy {\n visibility: hidden;\n position: absolute;\n right: -20px;\n}\n.Icon_81743 .item:hover .ant-typography-copy {\n visibility: visible;\n}",list:[{title:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u6807\u9898",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const { default: Icon } = _Icon;\nconst { Slider, Space, Typography } = antd;\nconst { useState } = React;\nconst { createWithFetch } = ReactFetch;\nconst { loadFont } = Global;\nconst { default: axios } = _axios;\nconst { createWithRemoteLoader } = remoteLoader;\n\nconst BaseExample = createWithRemoteLoader({\n modules: ["components-iconfont:Font"],\n})(({ remoteModules }) => {\n const [Font] = remoteModules;\n const [value, setValue] = useState(30);\n return (\n <Space direction="vertical">\n <Space>\n <div>\u8c03\u6574\u5927\u5c0f:</div>\n <Slider\n style={{ width: 100 }}\n max={60}\n min={12}\n value={value}\n onChange={setValue}\n />\n <div>{value}px</div>\n </Space>\n {\n <Font>\n {({ list }) => {\n return (\n <Space wrap align="top" size="large">\n {list.map(({ name, font_class }) => {\n return (\n <Space\n className="item"\n direction="vertical"\n align="center"\n key={name}\n >\n <Icon type={font_class} size={value} />\n <Typography.Text\n copyable={{\n text:\n \'<Icon type="\' +\n font_class +\n \'" size={\' +\n value +\n "} />",\n }}\n >\n {font_class}\n </Typography.Text>\n <div>{name}</div>\n </Space>\n );\n })}\n </Space>\n );\n }}\n </Font>\n }\n </Space>\n );\n});\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Icon",packageName:"@components/Icon",component:a},{name:"antd",packageName:"antd",component:d},{name:"ReactFetch",packageName:"@kne/react-fetch",component:o},{name:"Global",packageName:"@components/Global",component:r},{name:"_axios",packageName:"axios",component:l},{name:"remoteLoader",packageName:"@kne/remote-loader",component:i}]},{title:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u6807\u9898",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const { default: Icon } = _Icon;\nconst { Space, Slider, Typography } = antd;\nconst { useState } = React;\nconst { createWithFetch } = ReactFetch;\nconst { createWithRemoteLoader } = remoteLoader;\nconst { default: axios } = _axios;\n\nconst BaseExample = createWithRemoteLoader({\n modules: ["components-iconfont:ColorfulFont"],\n})(({ remoteModules }) => {\n const [ColorfulFont] = remoteModules;\n const [value, setValue] = useState(30);\n return (\n <Space direction="vertical">\n <Space>\n <div>\u8c03\u6574\u5927\u5c0f:</div>\n <Slider\n style={{ width: 100 }}\n max={60}\n min={12}\n value={value}\n onChange={setValue}\n />\n <div>{value}px</div>\n </Space>\n <ColorfulFont>\n {({ list }) => (\n <Space wrap align="top" size="large">\n {list.map(({ name }) => {\n return (\n <Space\n className="item"\n direction="vertical"\n align="center"\n key={name}\n >\n <Icon colorful type={name} size={value} />\n <Typography.Text\n copyable={{\n text:\n \'<Icon colorful type="\' +\n name +\n \'" size={\' +\n value +\n "} />",\n }}\n >\n {name}\n </Typography.Text>\n </Space>\n );\n })}\n </Space>\n )}\n </ColorfulFont>\n </Space>\n );\n});\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Icon",packageName:"@components/Icon",component:a},{name:"antd",packageName:"antd",component:d},{name:"ReactFetch",packageName:"@kne/react-fetch",component:o},{name:"Global",packageName:"@components/Global",component:r},{name:"_axios",packageName:"axios",component:l},{name:"remoteLoader",packageName:"@kne/remote-loader",component:i}]}]}}},85772(n,t,e){e.d(t,{A:()=>r});var a=e(40438),d=e(72752),o=e(55199);const r={name:"Image",summary:"<p>\u7528\u4e8e\u5c55\u793a\u4e00\u5f20\u56fe\u7247\uff0c\u548cimg\u6807\u7b7e\u4e0d\u540c\u7684\u662f\uff0c\u53ef\u4ee5\u5c55\u793a\u4e00\u5f20\u666e\u901a\u56fe\u7247\uff0c\u4e5f\u53ef\u4ee5\u901a\u8fc7id\u52a0\u8f7d\u4e00\u5f20oss\u56fe\u7247\uff0c\u5728\u52a0\u8f7doss\u5730\u5740\u548c\u56fe\u7247\u6570\u636e\u7684\u65f6\u5019\u4f1a\u663e\u793aloading\u72b6\u6001</p>",api:"<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>src</td>\n<td>\u56fe\u7247\u7684src\u5730\u5740</td>\n<td>string</td>\n<td>-</td>\n</tr>\n<tr>\n<td>id</td>\n<td>oss\u7684id</td>\n<td>string</td>\n<td>-</td>\n</tr>\n<tr>\n<td>loading</td>\n<td>\u52a0\u8f7d\u65f6\u663e\u793a\u7684\u7ec4\u4ef6</td>\n<td>jsx</td>\n<td>-</td>\n</tr>\n<tr>\n<td>error</td>\n<td>\u52a0\u8f7d\u9519\u8bef\u65f6\u663e\u793a\u7684\u7ec4\u4ef6</td>\n<td>jsx</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>Image.Avatar</h3>\n<p>\u7528antd\u7684Avatar\u6765\u663e\u793a\u56fe\u7247\uff0c\u53ef\u4ee5\u663e\u793a\u9ed8\u8ba4\u7684\u7537\u5973\u5934\u50cf\uff0c\u5176\u4ed6\u53c2\u6570\u53c2\u8003antd\u7684Avatar\u7ec4\u4ef6</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>gender</td>\n<td>\u6027\u522b F\uff0cfemale\uff0cf\u4e3a\u5973\u5176\u4ed6\u4e3a\u7537</td>\n<td>string</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>",example:{isFull:!1,className:"",style:"",list:[{title:"\u901a\u8fc7src\u52a0\u8f7d\u4e00\u4e2a\u666e\u901a\u56fe\u7247",description:"\u901a\u8fc7src\u52a0\u8f7d\u4e00\u4e2a\u666e\u901a\u56fe\u7247",code:"const {default: Image} = _Image;\nconst BaseExample = () => {\n return <Image src={window.PUBLIC_URL + \"/logo512.png\"} style={{width: '100px', height: '100px'}}/>;\n};\n\nrender(<BaseExample/>);\n\n",scope:[{name:"_Image",packageName:"@components/Image",component:a}]},{title:"\u901a\u8fc7id\u52a0\u8f7d\u4e00\u4e2aoss\u56fe\u7247",description:"\u56fe\u7247\u4e00\u52a0\u8f7d\u6210\u529f\uff0c\u56fe\u7247\u4e8c\u52a0\u8f7d\u4e2d\uff0c\u56fe\u7247\u4e09\u52a0\u8f7d\u5931\u8d25",code:"const {default: Image} = _Image;\nconst {PureGlobal} = global;\nconst {Space} = antd;\nconst BaseExample = () => {\n return <PureGlobal preset={{\n apis: {\n file: {\n getUrl: {\n loader: ({params}) => {\n if (params.id === 'logo513.png') {\n return new Promise(() => {\n\n });\n }\n return new Promise((resolve) => {\n resolve(window.PUBLIC_URL + '/' + params.id);\n });\n\n }\n }\n }\n }\n }}>\n <Space>\n <Image id=\"logo512.png\" style={{width: '100px', height: '100px'}}/>\n <Image id=\"logo513.png\" style={{width: '100px', height: '100px'}}/>\n <Image id=\"logo511.png\" style={{width: '100px', height: '100px'}}/>\n </Space>\n </PureGlobal>;\n};\n\nrender(<BaseExample/>);\n\n",scope:[{name:"_Image",packageName:"@components/Image",component:a},{name:"global",packageName:"@components/Global",component:d},{name:"antd",packageName:"antd",component:o}]},{title:"\u663e\u793a\u4e00\u4e2a\u5934\u50cf",description:"\u663e\u793a\u56fe\u7247\u5934\u50cf\u548c\u9ed8\u8ba4\u5934\u50cf",code:'const { default: Image } = _Image;\nconst { Space } = antd;\nconst BaseExample = () => {\n return (\n <Space>\n <Image.Avatar src={window.PUBLIC_URL + "/avatar.png"} shape="circle" />\n <Image.Avatar\n src={window.PUBLIC_URL + "/avatar.png"}\n shape="circle"\n size={80}\n />\n <Image.Avatar\n src={window.PUBLIC_URL + "/avatar.png"}\n shape="circle"\n size={50}\n />\n\n <Image.Avatar shape="circle" />\n <Image.Avatar gender="M" shape="circle" size={80} />\n <Image.Avatar gender="female" shape="circle" size={50} />\n <Image.Avatar gender="m" shape="circle" size={50} />\n </Space>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Image",packageName:"@components/Image",component:a},{name:"antd",packageName:"antd",component:o}]}]}}},71384(n,t,e){e.d(t,{A:()=>o});var a=e(25668),d=(e(55664),e(55199));const o={name:"info-page",summary:"<p>info-page \u662f\u4e00\u4e2a\u4e13\u4e3a\u590d\u6742\u8be6\u60c5\u5c55\u793a\u9875\u9762\u8bbe\u8ba1\u7684 React \u7ec4\u4ef6\u5e93\uff0c\u63d0\u4f9b\u6807\u51c6\u5316\u7684\u4fe1\u606f\u5c55\u793a\u683c\u5f0f\u548c\u4e30\u5bcc\u7684\u5e03\u5c40\u9009\u9879\u3002</p>\n<h2>\u6838\u5fc3\u7279\u6027</h2>\n<ul>\n<li><strong>\u7edf\u4e00\u7684\u4fe1\u606f\u5c55\u793a\u6807\u51c6</strong>\uff1a\u63d0\u4f9b\u4e00\u81f4\u7684\u8be6\u60c5\u9875\u9762\u5c55\u793a\u683c\u5f0f\uff0c\u786e\u4fdd\u7528\u6237\u4f53\u9a8c\u7684\u8fde\u8d2f\u6027</li>\n<li><strong>\u7075\u6d3b\u7684\u5e03\u5c40\u7ec4\u4ef6</strong>\uff1a\u5305\u542b\u591a\u79cd\u5e03\u5c40\u65b9\u5f0f\uff0c\u652f\u6301\u7f51\u683c\u3001\u8868\u683c\u3001\u5206\u680f\u7b49\u591a\u79cd\u5c55\u793a\u5f62\u5f0f</li>\n<li><strong>\u5f3a\u5927\u7684\u6570\u636e\u5904\u7406\u80fd\u529b</strong>\uff1a\u5185\u7f6e\u6570\u636e\u683c\u5f0f\u5316\u3001\u7a7a\u503c\u5904\u7406\u3001\u6761\u4ef6\u663e\u793a\u7b49\u5b9e\u7528\u529f\u80fd</li>\n<li><strong>\u9ad8\u5ea6\u53ef\u5b9a\u5236\u5316</strong>\uff1a\u652f\u6301\u81ea\u5b9a\u4e49\u6e32\u67d3\u3001\u6837\u5f0f\u5b9a\u5236\u548c\u6269\u5c55\u914d\u7f6e</li>\n<li><strong>\u73b0\u4ee3\u5316\u8bbe\u8ba1</strong>\uff1a\u57fa\u4e8e Ant Design \u6784\u5efa\uff0c\u652f\u6301\u54cd\u5e94\u5f0f\u5e03\u5c40</li>\n</ul>\n<h2>\u9002\u7528\u573a\u666f</h2>\n<ul>\n<li><strong>\u7ba1\u7406\u7cfb\u7edf\u8be6\u60c5\u9875</strong>\uff1a\u7528\u6237\u4fe1\u606f\u3001\u8ba2\u5355\u8be6\u60c5\u3001\u4ea7\u54c1\u4fe1\u606f\u7b49\u590d\u6742\u5c55\u793a\u573a\u666f</li>\n<li><strong>\u6570\u636e\u62a5\u544a\u9875\u9762</strong>\uff1a\u9700\u8981\u7ed3\u6784\u5316\u5c55\u793a\u591a\u7ef4\u5ea6\u6570\u636e\u7684\u62a5\u8868\u548c\u7edf\u8ba1\u9875\u9762</li>\n<li><strong>\u5de5\u4f5c\u6d41\u5c55\u793a</strong>\uff1a\u6d41\u7a0b\u5ba1\u6279\u8bb0\u5f55\u3001\u64cd\u4f5c\u5386\u53f2\u7b49\u65f6\u5e8f\u4fe1\u606f\u5c55\u793a</li>\n<li><strong>\u6570\u636e\u5bf9\u6bd4\u9875\u9762</strong>\uff1a\u591a\u5217\u5bf9\u6bd4\u5c55\u793a\u3001\u8bc4\u5206\u7cfb\u7edf\u7b49</li>\n<li><strong>\u6253\u5370\u53cb\u597d\u8bbe\u8ba1</strong>\uff1a\u652f\u6301\u5206\u9875\u6253\u5370\u7684\u62a5\u544a\u751f\u6210</li>\n</ul>\n<h2>\u6280\u672f\u4eae\u70b9</h2>\n<ul>\n<li><strong>\u7ec4\u4ef6\u5316\u8bbe\u8ba1</strong>\uff1a\u63d0\u4f9b InfoPage\u3001Content\u3001TableView\u3001Flow \u7b49\u72ec\u7acb\u7ec4\u4ef6\uff0c\u53ef\u5355\u72ec\u4f7f\u7528\u4e5f\u53ef\u7ec4\u5408\u4f7f\u7528</li>\n<li><strong>\u667a\u80fd\u5217\u8ba1\u7b97</strong>\uff1a\u81ea\u52a8\u8ba1\u7b97\u5217\u5bbd\u3001\u54cd\u5e94\u5f0f\u5e03\u5c40\u9002\u914d\uff0c\u652f\u6301\u56fa\u5b9a\u5217\u548c\u81ea\u9002\u5e94\u5217\u6df7\u5408\u4f7f\u7528</li>\n<li><strong>\u4e30\u5bcc\u7684\u683c\u5f0f\u5316\u9009\u9879</strong>\uff1a\u5185\u7f6e\u65e5\u671f\u3001\u6570\u5b57\u3001\u8d27\u5e01\u3001\u5e03\u5c14\u503c\u7b49\u591a\u79cd\u6570\u636e\u683c\u5f0f\u5316\u5668</li>\n<li><strong>\u6761\u4ef6\u6e32\u67d3\u673a\u5236</strong>\uff1a\u652f\u6301\u57fa\u4e8e\u6570\u636e\u52a8\u6001\u63a7\u5236\u5b57\u6bb5\u663e\u793a\u72b6\u6001</li>\n<li><strong>TypeScript \u53cb\u597d</strong>\uff1a\u5b8c\u6574\u7684\u7c7b\u578b\u5b9a\u4e49\u652f\u6301\uff0c\u63d0\u4f9b\u826f\u597d\u7684\u5f00\u53d1\u4f53\u9a8c</li>\n</ul>",api:"<h3>InfoPage</h3>\n<p>\u4fe1\u606f\u5c55\u793a\u9875\u9762\u5bb9\u5668\u7ec4\u4ef6\uff0c\u63d0\u4f9b\u7edf\u4e00\u7684\u9875\u9762\u5e03\u5c40\u548c\u95f4\u8ddd\u63a7\u5236</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6837\u5f0f\u7c7b\u540d</td>\n</tr>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u5b50\u7ec4\u4ef6\u5185\u5bb9</td>\n</tr>\n</tbody>\n</table>\n<h3>InfoPage.Part</h3>\n<p>\u4fe1\u606f\u5c55\u793a\u533a\u5757\u7ec4\u4ef6\uff0c\u7528\u4e8e\u5305\u88c5\u5177\u4f53\u7684\u4fe1\u606f\u5185\u5bb9</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6837\u5f0f\u7c7b\u540d</td>\n</tr>\n<tr>\n<td>title</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u533a\u5757\u6807\u9898</td>\n</tr>\n<tr>\n<td>subtitle</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u533a\u5757\u526f\u6807\u9898</td>\n</tr>\n<tr>\n<td>extra</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u533a\u5757\u989d\u5916\u64cd\u4f5c\u533a\u57df</td>\n</tr>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u533a\u5757\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>bordered</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n<td>\u662f\u5426\u663e\u793a\u989d\u5916\u8fb9\u6846\u6837\u5f0f</td>\n</tr>\n</tbody>\n</table>\n<h3>Content / InfoList</h3>\n<p>\u901a\u7528\u5185\u5bb9\u5c55\u793a\u7ec4\u4ef6\uff0c\u652f\u6301\u6807\u7b7e-\u5185\u5bb9\u7684\u7075\u6d3b\u5e03\u5c40</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>list</td>\n<td>array</td>\n<td>\u5426</td>\n<td>[]</td>\n<td>\u5c55\u793a\u6570\u636e\u5217\u8868</td>\n</tr>\n<tr>\n<td>labelAlign</td>\n<td>string</td>\n<td>\u5426</td>\n<td>'left'</td>\n<td>\u6807\u7b7e\u5bf9\u9f50\u65b9\u5f0f\uff0c\u53ef\u9009 'left'\u3001'center'\u3001'right'\u3001'auto'</td>\n</tr>\n<tr>\n<td>col</td>\n<td>number</td>\n<td>\u5426</td>\n<td>1</td>\n<td>\u6bcf\u884c\u663e\u793a\u7684\u5217\u6570</td>\n</tr>\n<tr>\n<td>gutter</td>\n<td>number</td>\n<td>\u5426</td>\n<td>0</td>\n<td>\u6805\u683c\u95f4\u9694</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6837\u5f0f\u7c7b\u540d</td>\n</tr>\n<tr>\n<td>size</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u5c3a\u5bf8\u5927\u5c0f\uff0c\u53ef\u9009 'small'</td>\n</tr>\n<tr>\n<td>itemRender</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u5217\u8868\u9879\u6e32\u67d3\u51fd\u6570</td>\n</tr>\n</tbody>\n</table>\n<h4>\u5217\u8868\u9879\u6570\u636e\u7ed3\u6784</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u6807\u7b7e\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>content</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u5185\u5bb9\u533a\u57df</td>\n</tr>\n<tr>\n<td>block</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n<td>\u662f\u5426\u5360\u636e\u6574\u884c</td>\n</tr>\n<tr>\n<td>display</td>\n<td>boolean/function</td>\n<td>\u5426</td>\n<td>true</td>\n<td>\u662f\u5426\u663e\u793a\u8be5\u9879</td>\n</tr>\n</tbody>\n</table>\n<h3>Descriptions / DetailList</h3>\n<p>\u63cf\u8ff0\u5217\u8868\u7ec4\u4ef6\uff0c\u7c7b\u4f3c\u4e8e Ant Design \u7684 Descriptions\uff0c\u4e13\u4e3a\u8be6\u60c5\u9875\u8bbe\u8ba1</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>dataSource</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u4e8c\u7ef4\u6570\u7ec4\u6570\u636e\u6e90\uff0c\u6bcf\u4e2a\u5b50\u6570\u7ec4\u4ee3\u8868\u4e00\u884c</td>\n</tr>\n<tr>\n<td>isFull</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n<td>\u6807\u7b7e\u662f\u5426\u5360\u636e\u66f4\u5927\u7a7a\u95f4</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6837\u5f0f\u7c7b\u540d</td>\n</tr>\n<tr>\n<td>itemRender</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u9879\u6e32\u67d3\u51fd\u6570</td>\n</tr>\n</tbody>\n</table>\n<h3>CentralContent / FieldView</h3>\n<p>\u5c45\u4e2d\u5185\u5bb9\u5c55\u793a\u7ec4\u4ef6\uff0c\u652f\u6301\u5217\u5b9a\u4e49\u548c\u81ea\u52a8\u5e03\u5c40</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>dataSource</td>\n<td>object</td>\n<td>\u5426</td>\n<td>{}</td>\n<td>\u6570\u636e\u6e90\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>columns</td>\n<td>array</td>\n<td>\u5426</td>\n<td>[]</td>\n<td>\u5217\u5b9a\u4e49\u6570\u7ec4</td>\n</tr>\n<tr>\n<td>col</td>\n<td>number</td>\n<td>\u5426</td>\n<td>2</td>\n<td>\u5c55\u793a\u5217\u6570</td>\n</tr>\n<tr>\n<td>type</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u7ec4\u4ef6\u7c7b\u578b\uff0c\u53ef\u9009 'compact'\uff08\u7d27\u51d1\u6a21\u5f0f\uff09</td>\n</tr>\n<tr>\n<td>valueIsEmpty</td>\n<td>function</td>\n<td>\u5426</td>\n<td>isEmpty</td>\n<td>\u503c\u4e3a\u7a7a\u7684\u5224\u65ad\u51fd\u6570</td>\n</tr>\n<tr>\n<td>emptyIsPlaceholder</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>true</td>\n<td>\u7a7a\u503c\u662f\u5426\u663e\u793a\u5360\u4f4d\u7b26</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>'-'</td>\n<td>\u7a7a\u503c\u5360\u4f4d\u7b26</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6837\u5f0f\u7c7b\u540d</td>\n</tr>\n<tr>\n<td>context</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u4e0a\u4e0b\u6587\u6570\u636e</td>\n</tr>\n</tbody>\n</table>\n<h4>\u5217\u5b9a\u4e49\u6570\u636e\u7ed3\u6784</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u5b57\u6bb5\u540d\u79f0</td>\n</tr>\n<tr>\n<td>title</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u663e\u793a\u6807\u9898</td>\n</tr>\n<tr>\n<td>format</td>\n<td>string/function</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u683c\u5f0f\u5316\u89c4\u5219</td>\n</tr>\n<tr>\n<td>render</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u51fd\u6570</td>\n</tr>\n<tr>\n<td>span</td>\n<td>number</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u6805\u683c\u5360\u4f4d\u683c\u6570</td>\n</tr>\n<tr>\n<td>block</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n<td>\u662f\u5426\u5360\u636e\u6574\u884c</td>\n</tr>\n</tbody>\n</table>\n<h3>TableView</h3>\n<p>\u8868\u683c\u89c6\u56fe\u7ec4\u4ef6\uff0c\u652f\u6301\u884c\u9009\u62e9\u548c\u81ea\u5b9a\u4e49\u5217\u914d\u7f6e</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>dataSource</td>\n<td>array</td>\n<td>\u5426</td>\n<td>[]</td>\n<td>\u8868\u683c\u6570\u636e\u6e90</td>\n</tr>\n<tr>\n<td>columns</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u5217\u5b9a\u4e49\u6570\u7ec4</td>\n</tr>\n<tr>\n<td>rowKey</td>\n<td>string/function</td>\n<td>\u5426</td>\n<td>'id'</td>\n<td>\u884c\u6570\u636e\u7684\u552f\u4e00\u6807\u8bc6</td>\n</tr>\n<tr>\n<td>rowSelection</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u884c\u9009\u62e9\u914d\u7f6e</td>\n</tr>\n<tr>\n<td>valueIsEmpty</td>\n<td>function</td>\n<td>\u5426</td>\n<td>isEmpty</td>\n<td>\u503c\u4e3a\u7a7a\u7684\u5224\u65ad\u51fd\u6570</td>\n</tr>\n<tr>\n<td>emptyIsPlaceholder</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>true</td>\n<td>\u7a7a\u503c\u662f\u5426\u663e\u793a\u5360\u4f4d\u7b26</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>'-'</td>\n<td>\u7a7a\u503c\u5360\u4f4d\u7b26</td>\n</tr>\n<tr>\n<td>empty</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td><Empty /></td>\n<td>\u7a7a\u6570\u636e\u5c55\u793a\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>onRowSelect</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u884c\u9009\u62e9\u56de\u8c03\u51fd\u6570</td>\n</tr>\n<tr>\n<td>render</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u51fd\u6570</td>\n</tr>\n<tr>\n<td>context</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u4e0a\u4e0b\u6587\u6570\u636e</td>\n</tr>\n<tr>\n<td>sticky</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n<td>\u8868\u5934\u662f\u5426\u56fa\u5b9a</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6837\u5f0f\u7c7b\u540d</td>\n</tr>\n</tbody>\n</table>\n<h4>\u884c\u9009\u62e9\u914d\u7f6e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>type</td>\n<td>string</td>\n<td>\u5426</td>\n<td>'checkbox'</td>\n<td>\u9009\u62e9\u7c7b\u578b\uff0c\u53ef\u9009 'checkbox'\u3001'radio'</td>\n</tr>\n<tr>\n<td>selectedRowKeys</td>\n<td>array</td>\n<td>\u5426</td>\n<td>[]</td>\n<td>\u5df2\u9009\u4e2d\u884c\u7684key\u6570\u7ec4</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u9009\u62e9\u53d8\u5316\u56de\u8c03\u51fd\u6570</td>\n</tr>\n<tr>\n<td>isSelectedAll</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n<td>\u662f\u5426\u5168\u9009\u72b6\u6001</td>\n</tr>\n<tr>\n<td>allowSelectedAll</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n<td>\u662f\u5426\u5141\u8bb8\u5168\u9009\uff08\u914d\u5408 isSelectedAll \u4f7f\u7528\uff09</td>\n</tr>\n</tbody>\n</table>\n<h3>Flow</h3>\n<p>\u6d41\u7a0b\u5c55\u793a\u7ec4\u4ef6\uff0c\u57fa\u4e8e Ant Design Steps \u7ec4\u4ef6\u6269\u5c55</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>dataSource</td>\n<td>array</td>\n<td>\u5426</td>\n<td>[]</td>\n<td>\u6d41\u7a0b\u6570\u636e\u6e90</td>\n</tr>\n<tr>\n<td>columns</td>\n<td>array</td>\n<td>\u5426</td>\n<td>[]</td>\n<td>\u5217\u5b9a\u4e49\u6570\u7ec4</td>\n</tr>\n<tr>\n<td>size</td>\n<td>string</td>\n<td>\u5426</td>\n<td>'small'</td>\n<td>\u6b65\u9aa4\u6761\u5927\u5c0f</td>\n</tr>\n<tr>\n<td>current</td>\n<td>number</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u5f53\u524d\u6b65\u9aa4\uff08\u4ece0\u5f00\u59cb\uff09</td>\n</tr>\n<tr>\n<td>direction</td>\n<td>string</td>\n<td>\u5426</td>\n<td>'vertical'</td>\n<td>\u6b65\u9aa4\u6761\u65b9\u5411\uff0c\u53ef\u9009 'vertical'\u3001'horizontal'</td>\n</tr>\n<tr>\n<td>progressDot</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n<td>\u662f\u5426\u4f7f\u7528\u70b9\u72b6\u6b65\u9aa4\u6761</td>\n</tr>\n<tr>\n<td>labelPlacement</td>\n<td>string</td>\n<td>\u5426</td>\n<td>'vertical'</td>\n<td>\u6807\u7b7e\u4f4d\u7f6e\uff0c\u53ef\u9009 'vertical'\u3001'horizontal'</td>\n</tr>\n<tr>\n<td>empty</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td><Empty /></td>\n<td>\u7a7a\u6570\u636e\u5c55\u793a\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>valueIsEmpty</td>\n<td>function</td>\n<td>\u5426</td>\n<td>isEmpty</td>\n<td>\u503c\u4e3a\u7a7a\u7684\u5224\u65ad\u51fd\u6570</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>'-'</td>\n<td>\u7a7a\u503c\u5360\u4f4d\u7b26</td>\n</tr>\n<tr>\n<td>emptyIsPlaceholder</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n<td>\u7a7a\u503c\u662f\u5426\u663e\u793a\u5360\u4f4d\u7b26</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6837\u5f0f\u7c7b\u540d</td>\n</tr>\n</tbody>\n</table>\n<h4>columns \u5217\u5b9a\u4e49\u652f\u6301\u7684 type \u7c7b\u578b</h4>\n<table>\n<thead>\n<tr>\n<th>type</th>\n<th>\u8bf4\u660e</th>\n<th>\u7279\u6b8a\u5904\u7406</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>title</td>\n<td>\u6807\u9898</td>\n<td>-</td>\n</tr>\n<tr>\n<td>subTitle</td>\n<td>\u526f\u6807\u9898</td>\n<td>-</td>\n</tr>\n<tr>\n<td>description</td>\n<td>\u63cf\u8ff0</td>\n<td>-</td>\n</tr>\n<tr>\n<td>status</td>\n<td>\u72b6\u6001</td>\n<td>-</td>\n</tr>\n<tr>\n<td>content</td>\n<td>\u989d\u5916\u5185\u5bb9</td>\n<td>\u6e32\u67d3\u4e3a\u72ec\u7acb\u533a\u5757</td>\n</tr>\n<tr>\n<td>actionList</td>\n<td>\u64cd\u4f5c\u5217\u8868</td>\n<td>\u552f\u4e00\u652f\u6301 children \u7684\u7c7b\u578b</td>\n</tr>\n</tbody>\n</table>\n<h3>SplitLine</h3>\n<p>\u5206\u5272\u7ebf\u5c55\u793a\u7ec4\u4ef6\uff0c\u7528\u4e8e\u6a2a\u5411\u5c55\u793a\u591a\u4e2a\u5b57\u6bb5</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>dataSource</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u6570\u636e\u6e90\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>columns</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u5217\u5b9a\u4e49\u6570\u7ec4</td>\n</tr>\n<tr>\n<td>valueIsEmpty</td>\n<td>function</td>\n<td>\u5426</td>\n<td>isEmpty</td>\n<td>\u503c\u4e3a\u7a7a\u7684\u5224\u65ad\u51fd\u6570</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>'-'</td>\n<td>\u7a7a\u503c\u5360\u4f4d\u7b26</td>\n</tr>\n<tr>\n<td>emptyIsPlaceholder</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n<td>\u7a7a\u503c\u662f\u5426\u663e\u793a\u5360\u4f4d\u7b26</td>\n</tr>\n<tr>\n<td>size</td>\n<td>number</td>\n<td>\u5426</td>\n<td>0</td>\n<td>\u5206\u5272\u7ebf\u95f4\u8ddd</td>\n</tr>\n<tr>\n<td>labelGap</td>\n<td>number</td>\n<td>\u5426</td>\n<td>4</td>\n<td>\u6807\u7b7e\u4e0e\u5185\u5bb9\u7684\u95f4\u8ddd</td>\n</tr>\n<tr>\n<td>labelMode</td>\n<td>string</td>\n<td>\u5426</td>\n<td>'horizontal'</td>\n<td>\u6807\u7b7e\u6a21\u5f0f\uff0c\u53ef\u9009 'horizontal'\u3001'vertical'</td>\n</tr>\n<tr>\n<td>split</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td><Divider type=\"vertical\" /></td>\n<td>\u5206\u5272\u7ebf\u7ec4\u4ef6</td>\n</tr>\n<tr>\n<td>context</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u4e0a\u4e0b\u6587\u6570\u636e</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6837\u5f0f\u7c7b\u540d</td>\n</tr>\n</tbody>\n</table>\n<h4>columns \u5217\u5b9a\u4e49\u7279\u6b8a\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>icon</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u56fe\u6807\u5143\u7d20</td>\n</tr>\n</tbody>\n</table>\n<h3>Report</h3>\n<p>\u62a5\u544a\u5bb9\u5668\u7ec4\u4ef6\uff0c\u7528\u4e8e\u751f\u6210\u6253\u5370\u53cb\u597d\u7684\u62a5\u544a\u9875\u9762</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>title</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u62a5\u544a\u6807\u9898</td>\n</tr>\n<tr>\n<td>subtitle</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u62a5\u544a\u526f\u6807\u9898</td>\n</tr>\n<tr>\n<td>extra</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u6807\u9898\u989d\u5916\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>border</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>true</td>\n<td>\u662f\u5426\u663e\u793a\u8fb9\u6846</td>\n</tr>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u5b50\u7ec4\u4ef6\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6837\u5f0f\u7c7b\u540d</td>\n</tr>\n</tbody>\n</table>\n<h3>Report.List</h3>\n<p>\u62a5\u544a\u5217\u8868\u5b50\u7ec4\u4ef6\uff0c\u5c55\u793a\u952e\u503c\u5bf9\u5f62\u5f0f\u7684\u62a5\u544a\u5185\u5bb9</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>report</td>\n<td>object</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u62a5\u544a\u6570\u636e\u5bf9\u8c61\uff0c\u5305\u542b list \u6570\u7ec4</td>\n</tr>\n<tr>\n<td>report.list</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u5217\u8868\u9879\u6570\u7ec4\uff0c\u6bcf\u9879\u5305\u542b label\u3001content \u7b49</td>\n</tr>\n</tbody>\n</table>\n<h3>Report.Result</h3>\n<p>\u62a5\u544a\u7ed3\u679c\u5b50\u7ec4\u4ef6\uff0c\u5c55\u793a\u8bc4\u5206\u7ed3\u679c\u548c\u8be6\u7ec6\u63cf\u8ff0</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>report</td>\n<td>object</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u62a5\u544a\u6570\u636e\u5bf9\u8c61\uff0c\u5305\u542b total \u548c list</td>\n</tr>\n<tr>\n<td>report.total</td>\n<td>object</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u603b\u5206\u4fe1\u606f\uff0c\u5305\u542b score\u3001label</td>\n</tr>\n<tr>\n<td>report.list</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u8bc4\u5206\u660e\u7ec6\u5217\u8868\uff0c\u6bcf\u9879\u5305\u542b label\u3001score\u3001content</td>\n</tr>\n</tbody>\n</table>\n<h3>Report.Table</h3>\n<p>\u62a5\u544a\u8868\u683c\u5b50\u7ec4\u4ef6\uff0c\u5c55\u793a\u5206\u7ec4\u8bc4\u5206\u8868\u683c</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>report</td>\n<td>object</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u62a5\u544a\u6570\u636e\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>report.columns</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u8868\u683c\u5217\u5b9a\u4e49</td>\n</tr>\n<tr>\n<td>report.group</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u5206\u7ec4\u5b9a\u4e49\u6570\u7ec4\uff0c\u6bcf\u9879\u5305\u542b name\u3001label</td>\n</tr>\n<tr>\n<td>report.list</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u8868\u683c\u6570\u636e\u5217\u8868</td>\n</tr>\n</tbody>\n</table>\n<h3>Report.Part</h3>\n<p>\u62a5\u544a\u5185\u5bb9\u533a\u5757\u5b50\u7ec4\u4ef6\uff0c\u5c55\u793a\u6bb5\u843d\u5f62\u5f0f\u7684\u5185\u5bb9</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>report</td>\n<td>object</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u62a5\u544a\u6570\u636e\u5bf9\u8c61\uff0c\u5305\u542b list \u6570\u7ec4</td>\n</tr>\n<tr>\n<td>report.list</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u5185\u5bb9\u9879\u6570\u7ec4\uff0c\u6bcf\u9879\u5305\u542b label\u3001content \u7b49</td>\n</tr>\n</tbody>\n</table>\n<h3>Report.Score</h3>\n<p>\u62a5\u544a\u8bc4\u5206\u5c55\u793a\u5b50\u7ec4\u4ef6</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>number</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u5f53\u524d\u8bc4\u5206\u503c</td>\n</tr>\n</tbody>\n</table>\n<h3>Score</h3>\n<p>\u8bc4\u5206\u5c55\u793a\u7ec4\u4ef6\uff0c\u4ee5\u661f\u5f62\u56fe\u6807\u5c55\u793a\u8bc4\u5206</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>number</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u5f53\u524d\u8bc4\u5206\u503c</td>\n</tr>\n<tr>\n<td>gap</td>\n<td>number</td>\n<td>\u5426</td>\n<td>4</td>\n<td>\u8bc4\u5206\u9879\u4e4b\u95f4\u7684\u95f4\u8ddd</td>\n</tr>\n<tr>\n<td>total</td>\n<td>number</td>\n<td>\u5426</td>\n<td>5</td>\n<td>\u603b\u8bc4\u5206\u9879\u6570</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6837\u5f0f\u7c7b\u540d</td>\n</tr>\n</tbody>\n</table>\n<h3>formatView</h3>\n<p>\u6570\u636e\u683c\u5f0f\u5316\u5de5\u5177\u51fd\u6570\uff0c\u63d0\u4f9b\u591a\u79cd\u5e38\u7528\u683c\u5f0f\u5316\u89c4\u5219</p>\n<h4>\u65b9\u6cd5\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u65b9\u6cd5\u540d</th>\n<th>\u53c2\u6570</th>\n<th>\u8fd4\u56de\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>default</td>\n<td>(value, format, context)</td>\n<td>string/object</td>\n<td>\u6839\u636e\u683c\u5f0f\u89c4\u5219\u683c\u5f0f\u5316\u6570\u636e</td>\n</tr>\n</tbody>\n</table>\n<h4>\u652f\u6301\u7684\u683c\u5f0f\u5316\u89c4\u5219</h4>\n<table>\n<thead>\n<tr>\n<th>\u683c\u5f0f\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u53c2\u6570</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>date</td>\n<td>\u65e5\u671f\u683c\u5f0f\u5316</td>\n<td>\u6a21\u677f\u5b57\u7b26\u4e32\uff0c\u9ed8\u8ba4 'YYYY-MM-DD'</td>\n</tr>\n<tr>\n<td>datetime</td>\n<td>\u65e5\u671f\u65f6\u95f4\u683c\u5f0f\u5316</td>\n<td>\u6a21\u677f\u5b57\u7b26\u4e32\uff0c\u9ed8\u8ba4 'YYYY-MM-DD HH:mm:ss'</td>\n</tr>\n<tr>\n<td>dateRange</td>\n<td>\u65e5\u671f\u8303\u56f4\u683c\u5f0f\u5316</td>\n<td>\u6a21\u677f\u5b57\u7b26\u4e32\u3001\u662f\u5426\u5141\u8bb8\u7a7a\u503c</td>\n</tr>\n<tr>\n<td>boolean</td>\n<td>\u5e03\u5c14\u503c\u683c\u5f0f\u5316</td>\n<td>true\u503c\u5bf9\u5e94\u7684\u6587\u672c\uff0c\u9ed8\u8ba4 'true'</td>\n</tr>\n<tr>\n<td>number</td>\n<td>\u6570\u5b57\u683c\u5f0f\u5316</td>\n<td>\u6837\u5f0f\u3001\u5355\u4f4d\u3001\u5c0f\u6570\u4f4d\u6570\u7b49</td>\n</tr>\n<tr>\n<td>money</td>\n<td>\u91d1\u989d\u683c\u5f0f\u5316</td>\n<td>\u5355\u4f4d\uff0c\u9ed8\u8ba4 '\u5143'</td>\n</tr>\n</tbody>\n</table>\n<h3>computeColumnsValue</h3>\n<p>\u5217\u503c\u8ba1\u7b97\u5de5\u5177\u51fd\u6570\uff0c\u7528\u4e8e\u7edf\u4e00\u5904\u7406\u5217\u6570\u636e\u7684\u663e\u793a\u903b\u8f91</p>\n<h4>\u65b9\u6cd5\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u65b9\u6cd5\u540d</th>\n<th>\u53c2\u6570</th>\n<th>\u8fd4\u56de\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>default</td>\n<td>(config)</td>\n<td>array</td>\n<td>\u8ba1\u7b97\u5217\u7684\u663e\u793a\u503c</td>\n</tr>\n<tr>\n<td>computeDisplay</td>\n<td>(config)</td>\n<td>ReactNode</td>\n<td>\u8ba1\u7b97\u5355\u4e2a\u5217\u7684\u663e\u793a\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>computeColumnsDisplay</td>\n<td>(config)</td>\n<td>array</td>\n<td>\u8ba1\u7b97\u6240\u6709\u5217\u7684\u663e\u793a\u5185\u5bb9</td>\n</tr>\n</tbody>\n</table>\n<h4>\u914d\u7f6e\u53c2\u6570</h4>\n<table>\n<thead>\n<tr>\n<th>\u53c2\u6570\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>columns</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u5217\u5b9a\u4e49\u6570\u7ec4</td>\n</tr>\n<tr>\n<td>dataSource</td>\n<td>object/array</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u6570\u636e\u6e90</td>\n</tr>\n<tr>\n<td>context</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u4e0a\u4e0b\u6587\u6570\u636e</td>\n</tr>\n<tr>\n<td>valueIsEmpty</td>\n<td>function</td>\n<td>\u5426</td>\n<td>isEmpty</td>\n<td>\u503c\u4e3a\u7a7a\u7684\u5224\u65ad\u51fd\u6570</td>\n</tr>\n<tr>\n<td>emptyIsPlaceholder</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>true</td>\n<td>\u7a7a\u503c\u662f\u5426\u663e\u793a\u5360\u4f4d\u7b26</td>\n</tr>\n<tr>\n<td>removeEmpty</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>true</td>\n<td>\u662f\u5426\u79fb\u9664\u7a7a\u503c\u5217</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>'-'</td>\n<td>\u7a7a\u503c\u5360\u4f4d\u7b26</td>\n</tr>\n</tbody>\n</table>",example:{isFull:!1,className:"",style:"",list:[{title:"\u57fa\u7840\u5e03\u5c40",description:"\u5c55\u793aInfoPage\u5bb9\u5668\u7ec4\u4ef6\u548cPart\u533a\u5757\u7ec4\u4ef6\u7684\u57fa\u672c\u4f7f\u7528\u65b9\u6cd5",code:'const { default: InfoPage } = _InfoPage;\nconst { Button, Space, Flex, Tag } = antd;\n\nconst BaseExample = () => {\n return (\n <Flex vertical gap={24}>\n <Space direction="vertical" size={16}>\n {/ \u57fa\u7840 Part \u4f7f\u7528 /}\n <InfoPage.Part title="\u4e2a\u4eba\u4fe1\u606f" subtitle="\u5c55\u793a\u57fa\u7840 Part \u7528\u6cd5">\n <Space direction="vertical" size={8}>\n <div><strong>\u59d3\u540d\uff1a</strong>\u5f20\u4e09</div>\n <div><strong>\u6027\u522b\uff1a</strong>\u7537</div>\n <div><strong>\u5e74\u9f84\uff1a</strong>28\u5c81</div>\n </Space>\n </InfoPage.Part>\n\n {/ \u5e26 extra \u7684 Part /}\n <InfoPage.Part \n title="\u8054\u7cfb\u65b9\u5f0f" \n subtitle="\u5c55\u793a\u6807\u9898\u548c\u989d\u5916\u64cd\u4f5c\u533a"\n extra={<Button type="primary" size="small">\u7f16\u8f91</Button>}\n >\n <Space direction="vertical" size={8}>\n <div><strong>\u624b\u673a\uff1a</strong>138-0013-8000</div>\n <div><strong>\u90ae\u7bb1\uff1a</strong>zhangsan@example.com</div>\n <div><strong>\u5730\u5740\uff1a</strong>\u6df1\u5733\u5e02\u5357\u5c71\u533a\u79d1\u6280\u56ed</div>\n </Space>\n </InfoPage.Part>\n\n {/ \u5d4c\u5957 Part /}\n <InfoPage.Part title="\u5de5\u4f5c\u7ecf\u5386">\n <p>\u4ee5\u4e0b\u5c55\u793a\u4e86 Part \u7684\u5d4c\u5957\u4f7f\u7528\uff1a</p>\n <InfoPage.Part subtitle="\u73b0\u4efb\u804c\u4f4d" style={{ background: \'#f5f5f5\', padding: \'12px\' }}>\n <Space direction="vertical" size={8}>\n <div><strong>\u516c\u53f8\uff1a</strong>\u817e\u8baf\u79d1\u6280</div>\n <div><strong>\u804c\u4f4d\uff1a</strong>\u9ad8\u7ea7\u524d\u7aef\u5de5\u7a0b\u5e08</div>\n <div><strong>\u5165\u804c\u65f6\u95f4\uff1a</strong>2020\u5e743\u6708</div>\n </Space>\n </InfoPage.Part>\n </InfoPage.Part>\n\n {/ \u5e26 bordered \u7684 Part /}\n <InfoPage.Part title="\u9879\u76ee\u7ecf\u9a8c" bordered>\n <Space direction="vertical" size={8}>\n <div><strong>\u9879\u76ee\u540d\u79f0\uff1a</strong>\u4f01\u4e1a\u7ea7\u7ba1\u7406\u7cfb\u7edf</div>\n <div><strong>\u6280\u672f\u6808\uff1a</strong>React\u3001TypeScript\u3001Ant Design</div>\n <div><strong>\u804c\u8d23\uff1a</strong>\u8d1f\u8d23\u524d\u7aef\u67b6\u6784\u8bbe\u8ba1\u4e0e\u6838\u5fc3\u529f\u80fd\u5f00\u53d1</div>\n </Space>\n </InfoPage.Part>\n\n {/ Collapse \u6298\u53e0\u9762\u677f /}\n <InfoPage.Collapse\n items={[\n { \n key: \'1\', \n label: \'\u6559\u80b2\u80cc\u666f\', \n children: (\n <Space direction="vertical" size={8}>\n <div><strong>\u5b66\u6821\uff1a</strong>\u6df1\u5733\u5927\u5b66</div>\n <div><strong>\u4e13\u4e1a\uff1a</strong>\u8ba1\u7b97\u673a\u79d1\u5b66\u4e0e\u6280\u672f</div>\n <div><strong>\u5b66\u5386\uff1a</strong>\u672c\u79d1</div>\n <div><strong>\u6bd5\u4e1a\u65f6\u95f4\uff1a</strong>2018\u5e746\u6708</div>\n </Space>\n )\n },\n { \n key: \'2\', \n label: \'\u6280\u80fd\u8bc1\u4e66\', \n children: (\n <Space wrap>\n <Tag color="blue">PMP\u9879\u76ee\u7ba1\u7406</Tag>\n <Tag color="green">\u963f\u91cc\u4e91ACP\u8ba4\u8bc1</Tag>\n <Tag color="purple">AWS\u89e3\u51b3\u65b9\u6848\u67b6\u6784\u5e08</Tag>\n </Space>\n )\n }\n ]}\n />\n\n {/ \u65e0\u6807\u9898 Part /}\n <InfoPage.Part>\n <div style={{ color: \'#666\', padding: \'12px\', background: \'#fafafa\' }}>\n <strong>\u5907\u6ce8\uff1a</strong>\u4ee5\u4e0a\u4fe1\u606f\u4ec5\u4f9b\u793a\u4f8b\u5c55\u793a\uff0c\u4e0d\u4ee3\u8868\u771f\u5b9e\u6570\u636e\n </div>\n </InfoPage.Part>\n </Space>\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_InfoPage",packageName:"@kne/info-page",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u5185\u5bb9\u5217\u8868",description:"\u652f\u6301\u591a\u5217\u5e03\u5c40\u548c\u6807\u7b7e\u5bf9\u9f50\u7684\u7075\u6d3b\u5185\u5bb9\u5c55\u793a\u7ec4\u4ef6",code:"const { Content } = _InfoPage;\nconst { Space, Radio, Tag } = antd;\nconst { useState } = React;\n\nconst BaseExample = () => {\n const [listProps, setListProps] = useState({\n col: 2,\n size: 'default',\n labelAlign: 'left'\n });\n\n const onChange = (e, name) => {\n const val = e?.target.value;\n setListProps(prevState => Object.assign({}, prevState, { [name]: val }));\n };\n\n return (\n <Space direction='vertical' size={16}>\n {/ \u63a7\u5236\u9762\u677f /}\n <div style={{ background: '#f5f5f5', padding: '16px', borderRadius: '8px' }}>\n <Space direction=\"vertical\" size={12} style={{ width: '100%' }}>\n <div>\n <span style={{ marginRight: 8 }}>\u5217\u6570\uff1a</span>\n <Radio.Group onChange={(e) => onChange(e, 'col')} value={listProps.col}>\n <Radio.Button value={1}>\u5355\u5217</Radio.Button>\n <Radio.Button value={2}>\u4e24\u5217</Radio.Button>\n <Radio.Button value={3}>\u4e09\u5217</Radio.Button>\n </Radio.Group>\n </div>\n <div>\n <span style={{ marginRight: 8 }}>\u6807\u7b7e\u5bf9\u9f50\uff1a</span>\n <Radio.Group onChange={(e) => onChange(e, 'labelAlign')} value={listProps.labelAlign}>\n <Radio.Button value='left'>\u5de6\u5bf9\u9f50</Radio.Button>\n <Radio.Button value='center'>\u5c45\u4e2d</Radio.Button>\n <Radio.Button value='right'>\u53f3\u5bf9\u9f50</Radio.Button>\n <Radio.Button value='auto'>\u81ea\u9002\u5e94</Radio.Button>\n </Radio.Group>\n </div>\n <div>\n <span style={{ marginRight: 8 }}>\u5c3a\u5bf8\uff1a</span>\n <Radio.Group onChange={(e) => onChange(e, 'size')} value={listProps.size}>\n <Radio.Button value='default'>\u9ed8\u8ba4</Radio.Button>\n <Radio.Button value='small'>\u5c0f\u5c3a\u5bf8</Radio.Button>\n </Radio.Group>\n </div>\n </Space>\n </div>\n\n {/ Content \u7ec4\u4ef6\u5c55\u793a /}\n <Content\n {...listProps}\n list={[\n { label: '\u5ba2\u6237\u540d\u79f0', content: '\u6df1\u5733\u5e02\u817e\u8baf\u8ba1\u7b97\u673a\u7cfb\u7edf\u6709\u9650\u516c\u53f8' },\n { label: '\u7edf\u4e00\u793e\u4f1a\u4fe1\u7528\u4ee3\u7801', content: '914403007109410773' },\n { label: '\u6cd5\u5b9a\u4ee3\u8868\u4eba', content: '\u9a6c\u5316\u817e' },\n { label: '\u4f01\u4e1a\u7c7b\u578b', content: <Tag color=\"blue\">\u6709\u9650\u8d23\u4efb\u516c\u53f8</Tag> },\n { label: '\u6210\u7acb\u65e5\u671f', content: '1998-11-11' },\n { label: '\u6ce8\u518c\u8d44\u672c', content: '500\u4e07\u7f8e\u5143' },\n { label: '\u7ecf\u8425\u72b6\u6001', content: <Tag color=\"success\">\u5b58\u7eed</Tag> },\n { label: '\u6ce8\u518c\u5730\u5740', content: '\u6df1\u5733\u5e02\u5357\u5c71\u533a\u9ad8\u65b0\u79d1\u6280\u56ed\u79d1\u6280\u4e2d\u4e00\u8def\u817e\u8baf\u5927\u53a6' },\n {\n label: '\u7ecf\u8425\u8303\u56f4',\n content: '\u8ba1\u7b97\u673a\u8f6f\u786c\u4ef6\u7684\u6280\u672f\u5f00\u53d1\u3001\u9500\u552e\uff1b\u8ba1\u7b97\u673a\u7f51\u7edc\u5de5\u7a0b\uff1b\u7cfb\u7edf\u96c6\u6210\uff1b\u8f6f\u4ef6\u5f00\u53d1\u53ca\u6280\u672f\u670d\u52a1\uff1b\u4fe1\u606f\u54a8\u8be2\uff1b\u7f51\u7edc\u8bbe\u5907\u3001\u901a\u8baf\u8bbe\u5907\u3001\u7535\u5b50\u4ea7\u54c1\u7684\u6280\u672f\u5f00\u53d1\u4e0e\u9500\u552e\uff1b\u56fd\u5185\u8d38\u6613\u3002',\n block: true\n }\n ]}\n itemRender={(inner, other) => {\n return other?.index === 8 ? <div style={{ color: '#999', fontSize: '12px', marginTop: '8px' }}>\n \u4ee5\u4e0a\u4fe1\u606f\u4ec5\u4f9b\u5c55\u793a\uff0c\u4e0d\u4ee3\u8868\u771f\u5b9e\u6570\u636e\n </div> : inner;\n }}\n />\n </Space>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_InfoPage",packageName:"@kne/info-page",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u5185\u5bb9\u5c55\u793a",description:"\u5c55\u793aContent\u7ec4\u4ef6\u7684\u5404\u79cd\u914d\u7f6e\u548c\u7528\u6cd5",code:"const { Content } = _InfoPage;\nconst { Flex, Radio, Space, Tag, Avatar } = antd;\nconst { useState } = React;\n\nconst BaseExample = () => {\n const [listProps, setListProps] = useState({\n col: 2,\n size: 'default',\n labelAlign: 'auto',\n gutter: 16\n });\n\n const [showDisabled, setShowDisabled] = useState(false);\n\n const onChange = (e, name) => {\n const val = e?.target.value;\n setListProps(prevState => ({ ...prevState, [name]: val }));\n };\n\n const dataList = [\n { label: '\u5ba2\u6237\u59d3\u540d', content: <Flex align=\"center\" gap={8}><Avatar size=\"small\">\u5f20</Avatar>\u5f20\u4e09</Flex>, block: true },\n { label: '\u5ba2\u6237\u7f16\u53f7', content: 'C20240115001' },\n { label: '\u8054\u7cfb\u7535\u8bdd', content: '138-0013-8000' },\n { label: '\u7535\u5b50\u90ae\u7bb1', content: 'zhangsan@example.com' },\n { label: '\u5ba2\u6237\u7c7b\u578b', content: <Tag color=\"blue\">VIP\u5ba2\u6237</Tag> },\n { label: '\u4fe1\u7528\u7b49\u7ea7', content: <Tag color=\"green\">A\u7ea7</Tag> },\n { label: '\u6240\u5c5e\u516c\u53f8', content: '\u6df1\u5733\u5e02\u817e\u8baf\u8ba1\u7b97\u673a\u7cfb\u7edf\u6709\u9650\u516c\u53f8', block: true },\n { label: '\u6240\u5728\u90e8\u95e8', content: '\u6280\u672f\u90e8', display: !showDisabled },\n { label: '\u804c\u4f4d', content: '\u9ad8\u7ea7\u524d\u7aef\u5de5\u7a0b\u5e08', display: !showDisabled },\n { label: '\u6ce8\u518c\u65f6\u95f4', content: '2020-03-15' },\n { label: '\u6700\u540e\u767b\u5f55', content: '2024-01-15 10:30:00' },\n { label: '\u8d26\u6237\u72b6\u6001', content: <Tag color=\"success\">\u6b63\u5e38</Tag> },\n { label: '\u5907\u6ce8\u4fe1\u606f', content: '\u8be5\u5ba2\u6237\u4e3a\u516c\u53f8\u957f\u671f\u5408\u4f5c\u4f19\u4f34\uff0c\u5408\u4f5c\u671f\u95f4\u8868\u73b0\u4f18\u79c0\uff0c\u5efa\u8bae\u7ee7\u7eed\u4fdd\u6301\u826f\u597d\u5408\u4f5c\u5173\u7cfb\u3002', block: true }\n ];\n\n return (\n <Flex vertical gap={16}>\n {/* \u63a7\u5236\u9762\u677f /}\n <Space direction=\"vertical\" size={12} style={{ background: '#f5f5f5', padding: '16px', borderRadius: '8px' }}>\n <div>\n <span style={{ marginRight: 8 }}>\u5217\u6570\uff1a</span>\n <Radio.Group onChange={(e) => onChange(e, 'col')} value={listProps.col}>\n <Radio.Button value={1}>\u5355\u5217</Radio.Button>\n <Radio.Button value={2}>\u4e24\u5217</Radio.Button>\n <Radio.Button value={3}>\u4e09\u5217</Radio.Button>\n <Radio.Button value={4}>\u56db\u5217</Radio.Button>\n </Radio.Group>\n </div>\n\n <div>\n <span style={{ marginRight: 8 }}>\u6807\u7b7e\u5bf9\u9f50\uff1a</span>\n <Radio.Group onChange={(e) => onChange(e, 'labelAlign')} value={listProps.labelAlign}>\n <Radio.Button value='left'>\u5de6\u5bf9\u9f50</Radio.Button>\n <Radio.Button value='center'>\u5c45\u4e2d</Radio.Button>\n <Radio.Button value='right'>\u53f3\u5bf9\u9f50</Radio.Button>\n <Radio.Button value='auto'>\u81ea\u9002\u5e94</Radio.Button>\n </Radio.Group>\n </div>\n\n <div>\n <span style={{ marginRight: 8 }}>\u5c3a\u5bf8\uff1a</span>\n <Radio.Group onChange={(e) => onChange(e, 'size')} value={listProps.size}>\n <Radio.Button value='default'>\u9ed8\u8ba4</Radio.Button>\n <Radio.Button value='small'>\u5c0f\u5c3a\u5bf8</Radio.Button>\n </Radio.Group>\n </div>\n\n <div>\n <span style={{ marginRight: 8 }}>\u663e\u793a\u9690\u85cf\uff1a</span>\n <Radio.Group onChange={(e) => setShowDisabled(e.target.value)} value={showDisabled}>\n <Radio.Button value={false}>\u663e\u793a\u5168\u90e8</Radio.Button>\n <Radio.Button value={true}>\u9690\u85cf\u90e8\u5206</Radio.Button>\n </Radio.Group>\n </div>\n </Space>\n\n {/ Content \u7ec4\u4ef6\u5c55\u793a /}\n <Content\n {...listProps}\n list={dataList.map(item => ({\n ...item,\n display: typeof item.display === 'boolean' ? item.display : undefined\n }))}\n />\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_InfoPage",packageName:"@kne/info-page",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u63cf\u8ff0\u5217\u8868",description:"\u4e8c\u7ef4\u6570\u7ec4\u7ed3\u6784\u7684\u8be6\u60c5\u4fe1\u606f\u5c55\u793a\uff0c\u9002\u5408\u8868\u5355\u6570\u636e\u5c55\u793a",code:'const { Descriptions } = _InfoPage;\nconst { Tag, Space } = antd;\n\nconst BaseExample = () => {\n return (\n <Descriptions\n dataSource={[\n // \u57fa\u672c\u4fe1\u606f\u5206\u7ec4\n [\n { label: "\u8ba2\u5355\u7f16\u53f7", content: <strong style={{ color: \'#1890ff\' }}>ORD20240115001</strong> },\n { label: "\u8ba2\u5355\u7c7b\u578b", content: <Tag color="blue">\u666e\u901a\u8ba2\u5355</Tag> },\n ],\n [\n { label: "\u4e0b\u5355\u65f6\u95f4", content: "2024-01-15 10:30:25" },\n { label: "\u652f\u4ed8\u65f6\u95f4", content: "2024-01-15 10:32:18" },\n ],\n [\n { label: "\u5ba2\u6237\u540d\u79f0", content: "\u6df1\u5733\u5e02\u817e\u8baf\u8ba1\u7b97\u673a\u7cfb\u7edf\u6709\u9650\u516c\u53f8" },\n { label: "\u5ba2\u6237\u7c7b\u578b", content: <Tag color="gold">VIP\u5ba2\u6237</Tag> },\n ],\n // \u6536\u8d27\u4fe1\u606f\u5206\u7ec4\n [\n { label: "\u6536\u8d27\u4eba", content: "\u5f20\u4e09" },\n { label: "\u8054\u7cfb\u7535\u8bdd", content: "138-0013-8000" },\n ],\n [\n { label: "\u6536\u8d27\u5730\u5740", content: "\u5e7f\u4e1c\u7701\u6df1\u5733\u5e02\u5357\u5c71\u533a\u79d1\u6280\u56ed\u79d1\u6280\u4e2d\u4e00\u8def\u817e\u8baf\u5927\u53a6A\u5ea718\u5c42" },\n ],\n // \u5546\u54c1\u4fe1\u606f\u5206\u7ec4\n [\n {\n label: "\u5546\u54c1\u6e05\u5355",\n content: (\n <Space direction="vertical" size={4}>\n <div>1. \u817e\u8baf\u4e91\u670d\u52a1\u5668\uff082\u68384G\uff09\xd7 1\u53f0 - \xa53000.00</div>\n <div>2. \u4e91\u6570\u636e\u5e93 MySQL\uff0850GB\uff09\xd7 1\u4e2a - \xa51200.00</div>\n <div>3. \u5bf9\u8c61\u5b58\u50a8\uff08500GB\uff09\xd7 1\u4e2a - \xa5800.00</div>\n </Space>\n ),\n },\n ],\n // \u91d1\u989d\u4fe1\u606f\u5206\u7ec4\n [\n { label: "\u5546\u54c1\u603b\u989d", content: <strong>\xa55,000.00</strong> },\n { label: "\u8fd0\u8d39", content: "\xa50.00" },\n ],\n [\n { label: "\u4f18\u60e0\u91d1\u989d", content: <span style={{ color: \'#52c41a\' }}>-\xa5750.00</span> },\n { label: "\u5b9e\u4ed8\u91d1\u989d", content: <strong style={{ color: \'#f5222d\', fontSize: \'16px\' }}>\xa54,250.00</strong> },\n ],\n // \u53d1\u7968\u4fe1\u606f\u5206\u7ec4\n [\n { label: "\u53d1\u7968\u7c7b\u578b", content: "\u589e\u503c\u7a0e\u4e13\u7528\u53d1\u7968" },\n { label: "\u53d1\u7968\u62ac\u5934", content: "\u6df1\u5733\u5e02\u817e\u8baf\u8ba1\u7b97\u673a\u7cfb\u7edf\u6709\u9650\u516c\u53f8" },\n ],\n [\n { label: "\u7eb3\u7a0e\u4eba\u8bc6\u522b\u53f7", content: "914403007109410773" },\n { label: "\u53d1\u7968\u72b6\u6001", content: <Tag color="success">\u5df2\u5f00\u5177</Tag> },\n ],\n // \u552e\u540e\u4fe1\u606f\u5206\u7ec4\n [\n { label: "\u9000\u6b3e\u72b6\u6001", content: "\u65e0\u9000\u6b3e" },\n { label: "\u53d1\u7968\u62ac\u5934", content: "\u672a\u7533\u8bf7" },\n ],\n [\n { label: "\u8ba2\u5355\u72b6\u6001", content: <Tag color="processing">\u5904\u7406\u4e2d</Tag> },\n {\n label: "\u9884\u8ba1\u9001\u8fbe",\n content: "2024-01-17",\n },\n ],\n // \u5907\u6ce8\u4fe1\u606f\n [\n {\n label: "\u8ba2\u5355\u5907\u6ce8",\n content: "\u8bf7\u52a1\u5fc5\u5728\u5de5\u4f5c\u65e5\u914d\u9001\uff0c\u914d\u9001\u524d\u8bf7\u63d0\u524d\u7535\u8bdd\u8054\u7cfb\u6536\u8d27\u4eba\u3002\u6536\u5230\u5546\u54c1\u540e\u8bf7\u5f53\u9762\u9a8c\u8d27\uff0c\u786e\u8ba4\u65e0\u8bef\u540e\u518d\u7b7e\u6536\u3002",\n block: true\n },\n ],\n // \u64cd\u4f5c\u8bb0\u5f55\n [\n { label: "\u521b\u5efa\u65f6\u95f4", content: "2024-01-15 10:30:25" },\n { label: "\u521b\u5efa\u4eba", content: "\u5f20\u4e09\uff08\u5ba2\u6237\uff09" },\n ],\n ]}\n />\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_InfoPage",packageName:"@kne/info-page",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u667a\u80fd\u5e03\u5c40",description:"\u652f\u6301\u6570\u636e\u683c\u5f0f\u5316\u548c\u81ea\u52a8\u6805\u683c\u4f18\u5316\u7684\u9ad8\u7ea7\u5185\u5bb9\u5c55\u793a\u7ec4\u4ef6",code:"const { CentralContent } = _InfoPage;\nconst { Tag, Space } = antd;\n\nconst BaseExample = () => {\n return (\n <CentralContent\n dataSource={{\n id: 'RC20240115001',\n name: '\u5f20\u4e09',\n department: '\u6280\u672f\u7814\u53d1\u90e8',\n position: '\u9ad8\u7ea7\u524d\u7aef\u5de5\u7a0b\u5e08',\n email: 'zhangsan@tencent.com',\n phone: '138-0013-8000',\n entryDate: '2020-03-15',\n workYears: 4,\n performanceScore: 92.5,\n salary: 35000,\n bonus: 50000,\n leaveDays: 5,\n projectCount: 8,\n description: `\u8d1f\u8d23\u516c\u53f8\u6838\u5fc3\u4ea7\u54c1\u7684\u524d\u7aef\u67b6\u6784\u8bbe\u8ba1\u4e0e\u5f00\u53d1\u5de5\u4f5c\uff0c\u4e3b\u5bfc\u4e86\u591a\u4e2a\u91cd\u8981\u9879\u76ee\u7684\u6280\u672f\u65b9\u6848\u8bbe\u8ba1\u3002\u7cbe\u901aReact\u3001Vue\u7b49\u4e3b\u6d41\u524d\u7aef\u6846\u67b6\uff0c\u5bf9TypeScript\u6709\u6df1\u5165\u7406\u89e3\u3002\u5728\u6027\u80fd\u4f18\u5316\u65b9\u9762\u6709\u4e30\u5bcc\u7ecf\u9a8c\uff0c\u6210\u529f\u5c06\u9879\u76ee\u52a0\u8f7d\u65f6\u95f4\u51cf\u5c1140%\u3002`,\n skills: `React, Vue, TypeScript, Node.js, Webpack, Vite, Jenkins, Docker, Kubernetes`\n }}\n col={3}\n columns={[\n { name: 'id', title: '\u5458\u5de5\u7f16\u53f7', block: true },\n { name: 'name', title: '\u59d3\u540d', span: 8 },\n { name: 'department', title: '\u90e8\u95e8' },\n { name: 'position', title: '\u804c\u4f4d', span: 10 },\n { name: 'email', title: '\u7535\u5b50\u90ae\u7bb1' },\n { name: 'phone', title: '\u8054\u7cfb\u7535\u8bdd' },\n { name: 'entryDate', title: '\u5165\u804c\u65e5\u671f', format: 'date' },\n { name: 'workYears', title: '\u5de5\u4f5c\u5e74\u9650', format: 'number-suffix:\u5e74' },\n { name: 'performanceScore', title: '\u7ee9\u6548\u8bc4\u5206', format: 'number-maximumFractionDigits:1-suffix:\u5206' },\n { name: 'salary', title: '\u6708\u85aa', format: 'number-useGrouping:true-suffix:\u5143' },\n { name: 'bonus', title: '\u5e74\u7ec8\u5956\u91d1', format: 'number-useGrouping:true-suffix:\u5143' },\n { name: 'leaveDays', title: '\u5e74\u5ea6\u5269\u4f59\u5e74\u5047', format: 'number-suffix:\u5929' },\n { name: 'projectCount', title: '\u53c2\u4e0e\u9879\u76ee\u6570', format: 'number-suffix:\u4e2a' },\n { name: 'empty', title: '\u516c\u79ef\u91d1\u8d26\u53f7' },\n { name: 'empty2', title: '\u793e\u4fdd\u5361\u53f7', placeholder: '\u672a\u529e\u7406' },\n { name: 'description', title: '\u5de5\u4f5c\u63cf\u8ff0', block: true },\n { name: 'skills', title: '\u6280\u80fd\u6807\u7b7e', render: (value) => (\n <Space wrap>\n {value.split(',').map(skill => (\n <Tag key={skill} color=\"blue\" style={{ marginBottom: 4 }}>{skill.trim()}</Tag>\n ))}\n </Space>\n )}\n ]}\n />\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_InfoPage",packageName:"@kne/info-page",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u8fb9\u6846\u533a\u5757",description:"\u5c55\u793aInfoPage.Part\u7684bordered\u5c5e\u6027\u914d\u5408CentralContent\u4f7f\u7528",code:"const { default: InfoPage, CentralContent } = _InfoPage;\nconst { Tag, Avatar, Space } = antd;\n\nconst BaseExample = () => {\n return (\n <InfoPage>\n <InfoPage.Part bordered title=\"\u5458\u5de5\u6863\u6848\" subtitle=\"\u57fa\u672c\u4fe1\u606f\">\n <CentralContent\n type=\"compact\"\n dataSource={{\n id: 'RC20240115001',\n name: '\u5f20\u4e09',\n gender: '\u7537',\n birthday: '1992-03-15',\n idCard: '440301199203154512',\n maritalStatus: '\u5df2\u5a5a',\n education: '\u672c\u79d1',\n graduationSchool: '\u6df1\u5733\u5927\u5b66',\n major: '\u8ba1\u7b97\u673a\u79d1\u5b66\u4e0e\u6280\u672f',\n entryDate: '2020-03-15',\n workYears: 4,\n phone: '138-0013-8000',\n email: 'zhangsan@tencent.com',\n address: '\u5e7f\u4e1c\u7701\u6df1\u5733\u5e02\u5357\u5c71\u533a\u79d1\u6280\u56ed\u79d1\u6280\u4e2d\u4e00\u8def\u817e\u8baf\u5927\u53a6',\n emergencyContact: '\u674e\u56db',\n emergencyPhone: '139-0014-9000',\n emergencyRelation: '\u914d\u5076'\n }}\n col={3}\n columns={[\n {\n name: 'id',\n title: '\u5458\u5de5\u7f16\u53f7',\n block: true\n },\n {\n name: 'name',\n title: '\u59d3\u540d',\n render: (value) => (\n <Space align=\"center\">\n <Avatar style={{ backgroundColor: '#1890ff' }}>{value[0]}</Avatar>\n <strong>{value}</strong>\n </Space>\n ),\n span: 10\n },\n {\n name: 'gender',\n title: '\u6027\u522b'\n },\n {\n name: 'birthday',\n title: '\u51fa\u751f\u65e5\u671f',\n format: 'date'\n },\n {\n name: 'idCard',\n title: '\u8eab\u4efd\u8bc1\u53f7',\n render: (value) => value.replace(/(d{6})(d{8})(d{4})/, '$1******$3')\n },\n {\n name: 'maritalStatus',\n title: '\u5a5a\u59fb\u72b6\u51b5'\n },\n {\n name: 'education',\n title: '\u5b66\u5386'\n },\n {\n name: 'graduationSchool',\n title: '\u6bd5\u4e1a\u9662\u6821'\n },\n {\n name: 'major',\n title: '\u4e13\u4e1a'\n },\n {\n name: 'entryDate',\n title: '\u5165\u804c\u65e5\u671f',\n format: 'date'\n },\n {\n name: 'workYears',\n title: '\u5de5\u4f5c\u5e74\u9650',\n format: 'number-suffix:\u5e74'\n },\n {\n name: 'phone',\n title: '\u8054\u7cfb\u7535\u8bdd',\n render: (value) => value.replace(/(d{3})(d{4})(d{4})/, '$1-$2-$3')\n },\n {\n name: 'email',\n title: '\u7535\u5b50\u90ae\u7bb1'\n },\n {\n name: 'address',\n title: '\u5bb6\u5ead\u4f4f\u5740',\n block: true\n },\n {\n name: 'emergencyContact',\n title: '\u7d27\u6025\u8054\u7cfb\u4eba'\n },\n {\n name: 'emergencyPhone',\n title: '\u7d27\u6025\u8054\u7cfb\u7535\u8bdd',\n render: (value) => value.replace(/(d{3})(d{4})(d{4})/, '$1-$2-$3')\n },\n {\n name: 'emergencyRelation',\n title: '\u4e0e\u672c\u4eba\u5173\u7cfb'\n }\n ]}\n />\n </InfoPage.Part>\n\n <InfoPage.Part bordered title=\"\u5de5\u4f5c\u4fe1\u606f\" subtitle=\"\u90e8\u95e8\u4e0e\u804c\u4f4d\">\n <CentralContent\n type=\"compact\"\n dataSource={{\n department: '\u6280\u672f\u7814\u53d1\u90e8',\n position: '\u9ad8\u7ea7\u524d\u7aef\u5de5\u7a0b\u5e08',\n level: 'T4-2',\n supervisor: '\u738b\u603b\u76d1',\n team: '\u524d\u7aef\u5f00\u53d1\u7ec4',\n workLocation: '\u6df1\u5733\u603b\u90e8',\n office: '\u817e\u8baf\u5927\u53a6A\u5ea718\u5c42',\n workStatus: '\u5728\u804c',\n contractType: '\u6b63\u5f0f\u5458\u5de5',\n contractStartDate: '2023-03-15',\n contractEndDate: '2026-03-14',\n probationPeriod: '\u5df2\u8f6c\u6b63'\n }}\n col={2}\n columns={[\n { name: 'department', title: '\u6240\u5c5e\u90e8\u95e8', span: 12 },\n { name: 'position', title: '\u804c\u4f4d', span: 12 },\n { name: 'level', title: '\u804c\u7ea7' },\n { name: 'supervisor', title: '\u76f4\u5c5e\u4e3b\u7ba1' },\n { name: 'team', title: '\u6240\u5c5e\u56e2\u961f' },\n { name: 'workLocation', title: '\u5de5\u4f5c\u5730\u70b9' },\n { name: 'office', title: '\u529e\u516c\u5ba4\u4f4d\u7f6e' },\n { name: 'workStatus', title: '\u5de5\u4f5c\u72b6\u6001', render: (value) => <Tag color=\"success\">{value}</Tag> },\n { name: 'contractType', title: '\u5408\u540c\u7c7b\u578b' },\n { name: 'contractStartDate', title: '\u5408\u540c\u5f00\u59cb\u65e5\u671f', format: 'date' },\n { name: 'contractEndDate', title: '\u5408\u540c\u7ed3\u675f\u65e5\u671f', format: 'date' },\n { name: 'probationPeriod', title: '\u8bd5\u7528\u671f\u72b6\u6001', render: (value) => <Tag color=\"success\">{value}</Tag> }\n ]}\n />\n </InfoPage.Part>\n\n <InfoPage.Part bordered title=\"\u798f\u5229\u5f85\u9047\" subtitle=\"\u85aa\u8d44\u4e0e\u798f\u5229\">\n <CentralContent\n type=\"compact\"\n dataSource={{\n baseSalary: 30000,\n performanceBonus: 5000,\n annualBonus: 50000,\n socialInsurance: '\u5df2\u7f34\u7eb3\uff08\u4e94\u9669\u4e00\u91d1\uff09',\n housingFund: 3600,\n medicalInsurance: '\u5df2\u5305\u542b',\n mealAllowance: 1500,\n transportAllowance: 800,\n stockOptions: 5000,\n otherBenefits: '\u5e74\u5ea6\u4f53\u68c0\u3001\u8282\u65e5\u793c\u54c1\u3001\u56e2\u5efa\u6d3b\u52a8'\n }}\n col={2}\n columns={[\n { name: 'baseSalary', title: '\u57fa\u672c\u6708\u85aa', format: 'number-useGrouping:true-suffix:\u5143', span: 12 },\n { name: 'performanceBonus', title: '\u7ee9\u6548\u5956\u91d1', format: 'number-useGrouping:true-suffix:\u5143/\u6708', span: 12 },\n { name: 'annualBonus', title: '\u5e74\u7ec8\u5956\u91d1', format: 'number-useGrouping:true-suffix:\u5143', block: true },\n { name: 'socialInsurance', title: '\u793e\u4f1a\u4fdd\u9669', render: (value) => <Tag color=\"success\">{value}</Tag> },\n { name: 'housingFund', title: '\u516c\u79ef\u91d1', format: 'number-useGrouping:true-suffix:\u5143/\u6708' },\n { name: 'medicalInsurance', title: '\u533b\u7597\u4fdd\u9669', render: (value) => <Tag color=\"success\">{value}</Tag> },\n { name: 'mealAllowance', title: '\u9910\u8865', format: 'number-useGrouping:true-suffix:\u5143/\u6708' },\n { name: 'transportAllowance', title: '\u4ea4\u901a\u8865\u8d34', format: 'number-useGrouping:true-suffix:\u5143/\u6708' },\n { name: 'stockOptions', title: '\u80a1\u7968\u671f\u6743', format: 'number-useGrouping:true-suffix:\u80a1', block: true },\n { name: 'otherBenefits', title: '\u5176\u4ed6\u798f\u5229', block: true }\n ]}\n />\n </InfoPage.Part>\n </InfoPage>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_InfoPage",packageName:"@kne/info-page",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u8868\u683c\u89c6\u56fe",description:"\u652f\u6301\u884c\u9009\u62e9\u3001\u56fa\u5b9a\u8868\u5934\u548c\u591a\u6570\u636e\u5c55\u793a\u7684\u8868\u683c\u7ec4\u4ef6",code:"const { TableView } = _InfoPage;\nconst { Flex, Tag, Badge } = antd;\nconst { useState } = React;\n\nconst dataSource = [\n {\n id: 'ORD20240115001',\n customerName: '\u6df1\u5733\u5e02\u817e\u8baf\u8ba1\u7b97\u673a\u7cfb\u7edf\u6709\u9650\u516c\u53f8',\n contact: '\u5f20\u4e09',\n phone: '138-0013-8000',\n amount: 42500,\n status: '\u5df2\u5b8c\u6210',\n orderDate: '2024-01-15',\n deliveryDate: '2024-01-17'\n },\n {\n id: 'ORD20240115002',\n customerName: '\u534e\u4e3a\u6280\u672f\u6709\u9650\u516c\u53f8',\n contact: '\u674e\u56db',\n phone: '139-0014-9000',\n amount: 85000,\n status: '\u5904\u7406\u4e2d',\n orderDate: '2024-01-15',\n deliveryDate: '2024-01-20'\n },\n {\n id: 'ORD20240115003',\n customerName: '\u963f\u91cc\u5df4\u5df4\u96c6\u56e2\u63a7\u80a1\u6709\u9650\u516c\u53f8',\n contact: '\u738b\u4e94',\n phone: '137-0015-7000',\n amount: 120000,\n status: '\u5f85\u53d1\u8d27',\n orderDate: '2024-01-14',\n deliveryDate: '2024-01-22'\n },\n {\n id: 'ORD20240115004',\n customerName: '\u5317\u4eac\u5b57\u8282\u8df3\u52a8\u79d1\u6280\u6709\u9650\u516c\u53f8',\n contact: '\u8d75\u516d',\n phone: '136-0016-6000',\n amount: 65000,\n status: '\u5df2\u5b8c\u6210',\n orderDate: '2024-01-13',\n deliveryDate: '2024-01-16'\n },\n {\n id: 'ORD20240115005',\n customerName: '\u767e\u5ea6\u5728\u7ebf\u7f51\u7edc\u6280\u672f\uff08\u5317\u4eac\uff09\u6709\u9650\u516c\u53f8',\n contact: '\u94b1\u4e03',\n phone: '135-0017-5000',\n amount: 95000,\n status: '\u5df2\u53d6\u6d88',\n orderDate: '2024-01-12',\n deliveryDate: ''\n }\n];\n\nconst columns = [\n { name: 'id', title: '\u8ba2\u5355\u7f16\u53f7' },\n { name: 'customerName', title: '\u5ba2\u6237\u540d\u79f0', span: 10 },\n { name: 'contact', title: '\u8054\u7cfb\u4eba' },\n { name: 'phone', title: '\u8054\u7cfb\u7535\u8bdd', render: (value) => value.replace(/(d{3})(d{4})(d{4})/, '$1-$2-$3') },\n { name: 'amount', title: '\u8ba2\u5355\u91d1\u989d(\u5143)', render: (value) => <strong style={{ color: '#f5222d' }}>\xa5{value.toLocaleString()}</strong> },\n { name: 'orderDate', title: '\u4e0b\u5355\u65e5\u671f', format: 'date' },\n { name: 'deliveryDate', title: '\u9884\u8ba1\u9001\u8fbe', format: 'date' },\n { name: 'status', title: '\u8ba2\u5355\u72b6\u6001', render: (value) => {\n const config = {\n '\u5df2\u5b8c\u6210': { color: 'success', text: '\u5df2\u5b8c\u6210' },\n '\u5904\u7406\u4e2d': { color: 'processing', text: '\u5904\u7406\u4e2d' },\n '\u5f85\u53d1\u8d27': { color: 'warning', text: '\u5f85\u53d1\u8d27' },\n '\u5df2\u53d6\u6d88': { color: 'default', text: '\u5df2\u53d6\u6d88' }\n };\n const { color, text } = config[value] \|\| { color: 'default', text: value };\n return <Badge status={color} text={text} />;\n }}\n];\n\nconst WithCheckbox = () => {\n const [selectKeys, setSelectKeys] = useState([]);\n const totalAmount = selectKeys.reduce((sum, id) => sum + (dataSource.find(d => d.id === id)?.amount \|\| 0), 0);\n return (\n <div>\n <Flex justify=\"space-between\" align=\"center\" style={{ marginBottom: 12 }}>\n <span>\u5df2\u9009 <strong>{selectKeys.length}</strong> \u4e2a\u8ba2\u5355\uff0c\u603b\u91d1\u989d <strong style={{ color: '#52c41a' }}>\xa5{totalAmount.toLocaleString()}</strong></span>\n </Flex>\n <TableView dataSource={dataSource} columns={columns} rowSelection={{\n type: 'checkbox', allowSelectedAll: true, selectedRowKeys: selectKeys, onChange: setSelectKeys\n }} />\n </div>\n );\n};\n\nconst WithSelected = () => {\n const [selectKeys, setSelectKeys] = useState([]);\n const selectedOrder = dataSource.find(d => d.id === selectKeys[0]);\n return (\n <div>\n <Flex justify=\"space-between\" align=\"center\" style={{ marginBottom: 12 }}>\n <span>\u5df2\u9009\u8ba2\u5355\uff1a{selectedOrder ? `${selectedOrder.id} (${selectedOrder.customerName})` : '\u65e0'}</span>\n {selectedOrder && <Tag color=\"blue\">\xa5{selectedOrder.amount.toLocaleString()}</Tag>}\n </Flex>\n <TableView dataSource={dataSource} columns={columns} rowSelection={{\n type: 'radio', selectedRowKeys: selectKeys, onChange: setSelectKeys\n }} />\n </div>\n );\n};\n\nconst BaseExample = () => {\n return (\n <Flex vertical gap={16}>\n <div style={{ background: '#f5f5f5', padding: '12px', borderRadius: '8px' }}>\n \u8ba2\u5355\u5217\u8868 - \u5171 <strong>{dataSource.length}</strong> \u4e2a\u8ba2\u5355\n </div>\n <TableView dataSource={dataSource} columns={columns} />\n <WithCheckbox />\n <WithSelected />\n <div style={{ padding: '16px', background: '#fafafa', border: '1px dashed #d9d9d9', borderRadius: '8px' }}>\n \u6682\u65e0\u8ba2\u5355\u6570\u636e\n </div>\n <TableView\n style={{ height: '250px', overflowY: 'scroll' }}\n dataSource={dataSource}\n columns={columns}\n sticky\n headerStyle={{ position: 'sticky', top: 0, zIndex: 1, background: '#fafafa' }}\n />\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_InfoPage",packageName:"@kne/info-page",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u8868\u683c\u9009\u62e9",description:"\u5c55\u793aTableView\u7ec4\u4ef6\u7684\u5404\u79cd\u9009\u62e9\u6a21\u5f0f",code:"const { TableView } = _InfoPage;\nconst { Flex, Radio, Space, Button, Tag, Avatar } = antd;\nconst { useState } = React;\n\nconst dataSource = [\n { id: 'C20240115001', name: '\u5f20\u4e09', company: '\u817e\u8baf\u79d1\u6280', contact: '138-0013-8000', amount: 50000, status: '\u5df2\u7b7e\u7ea6' },\n { id: 'C20240115002', name: '\u674e\u56db', company: '\u534e\u4e3a\u6280\u672f', contact: '139-0014-9000', amount: 85000, status: '\u8ddf\u8fdb\u4e2d' },\n { id: 'C20240115003', name: '\u738b\u4e94', company: '\u963f\u91cc\u5df4\u5df4', contact: '137-0015-7000', amount: 120000, status: '\u5df2\u7b7e\u7ea6' },\n { id: 'C20240115004', name: '\u8d75\u516d', company: '\u5b57\u8282\u8df3\u52a8', contact: '136-0016-6000', amount: 65000, status: '\u5f85\u8ddf\u8fdb' },\n { id: 'C20240115005', name: '\u94b1\u4e03', company: '\u767e\u5ea6\u5728\u7ebf', contact: '135-0017-5000', amount: 95000, status: '\u5df2\u7b7e\u7ea6' }\n];\n\nconst columns = [\n { name: 'id', title: '\u5ba2\u6237\u7f16\u53f7' },\n { name: 'name', title: '\u8054\u7cfb\u4eba' },\n { name: 'company', title: '\u6240\u5c5e\u516c\u53f8' },\n { name: 'contact', title: '\u8054\u7cfb\u7535\u8bdd' },\n { name: 'amount', title: '\u7b7e\u7ea6\u91d1\u989d(\u5143)' },\n { name: 'status', title: '\u72b6\u6001' }\n];\n\nconst BaseExample = () => {\n const [selectionType, setSelectionType] = useState('none');\n const [selectedRowKeys, setSelectedRowKeys] = useState([]);\n\n // \u590d\u9009\u6846\u9009\u62e9\u793a\u4f8b\n const CheckboxExample = () => {\n const [keys, setKeys] = useState([]);\n const totalAmount = keys.reduce((sum, id) => sum + (dataSource.find(d => d.id === id)?.amount \|\| 0), 0);\n return (\n <div>\n <Flex justify=\"space-between\" align=\"center\" style={{ marginBottom: 12 }}>\n <span>\u5df2\u9009 <strong style={{ color: '#1890ff' }}>{keys.length}</strong> \u4f4d\u5ba2\u6237\uff0c\u603b\u91d1\u989d <strong style={{ color: '#52c41a' }}>\xa5{totalAmount.toLocaleString()}</strong></span>\n <Space>\n <Button size=\"small\" onClick={() => setKeys(dataSource.filter(d => d.status === '\u5df2\u7b7e\u7ea6').map(d => d.id))}>\n \u9009\u5df2\u7b7e\u7ea6\n </Button>\n <Button size=\"small\" onClick={() => setKeys([])}>\u6e05\u7a7a</Button>\n </Space>\n </Flex>\n <TableView\n dataSource={dataSource}\n columns={columns}\n rowSelection={{\n type: 'checkbox',\n selectedRowKeys: keys,\n onChange: setKeys\n }}\n />\n </div>\n );\n };\n\n // \u5168\u9009\u72b6\u6001\u793a\u4f8b\n const SelectAllExample = () => {\n const [keys, setKeys] = useState([]);\n const [isSelectedAll, setIsSelectedAll] = useState(false);\n\n const handleSelectAll = () => {\n if (isSelectedAll) {\n setKeys([]);\n } else {\n setKeys(dataSource.map(d => d.id));\n }\n setIsSelectedAll(!isSelectedAll);\n };\n\n return (\n <div>\n <Flex justify=\"space-between\" align=\"center\" style={{ marginBottom: 12 }}>\n <span>{isSelectedAll ? <Tag color=\"green\">\u5df2\u5168\u9009\u6240\u6709\u5ba2\u6237</Tag> : <Tag>\u672a\u5168\u9009</Tag>}</span>\n <Button size=\"small\" onClick={handleSelectAll}>\n {isSelectedAll ? '\u53d6\u6d88\u5168\u9009' : '\u5168\u9009\u5ba2\u6237'}\n </Button>\n </Flex>\n <TableView\n dataSource={dataSource}\n columns={columns}\n rowSelection={{\n type: 'checkbox',\n isSelectedAll,\n allowSelectedAll: true,\n selectedRowKeys: keys,\n onChange: (keys) => {\n setKeys(keys);\n setIsSelectedAll(keys.length === dataSource.length);\n }\n }}\n />\n </div>\n );\n };\n\n // \u5355\u9009\u6846\u793a\u4f8b\n const RadioExample = () => {\n const [key, setKey] = useState(null);\n const selectedCustomer = dataSource.find(d => d.id === key);\n return (\n <div>\n <Flex justify=\"space-between\" align=\"center\" style={{ marginBottom: 12 }}>\n <span>\u5df2\u9009\u5ba2\u6237\uff1a{selectedCustomer ? `${selectedCustomer.name} (${selectedCustomer.company})` : '\u65e0'}</span>\n <Tag color={selectedCustomer ? 'blue' : 'default'}>{selectedCustomer ? `\xa5${selectedCustomer.amount.toLocaleString()}` : '-'}</Tag>\n </Flex>\n <TableView\n dataSource={dataSource}\n columns={columns}\n rowSelection={{\n type: 'radio',\n selectedRowKeys: key ? [key] : [],\n onChange: (keys) => setKey(keys.length > 0 ? keys[0] : null)\n }}\n />\n </div>\n );\n };\n\n // \u65e0\u9009\u62e9\u6a21\u5f0f\n const NoSelectionExample = () => (\n <div>\n <div style={{ marginBottom: 12 }}>\u5ba2\u6237\u5217\u8868 - \u5171 {dataSource.length} \u4f4d</div>\n <TableView dataSource={dataSource} columns={columns} />\n </div>\n );\n\n // \u81ea\u5b9a\u4e49\u6e32\u67d3\u793a\u4f8b\n const CustomRenderExample = () => {\n const [keys, setKeys] = useState([]);\n return (\n <div>\n <div style={{ marginBottom: 12 }}>\u81ea\u5b9a\u4e49\u6e32\u67d3\u5ba2\u6237\u5217\u8868</div>\n <TableView\n dataSource={dataSource}\n columns={[\n { name: 'id', title: '\u5ba2\u6237\u7f16\u53f7' },\n { name: 'name', title: '\u8054\u7cfb\u4eba', render: (value) => <Flex align=\"center\" gap={8}><Avatar size=\"small\">{value[0]}</Avatar>{value}</Flex> },\n { name: 'company', title: '\u6240\u5c5e\u516c\u53f8' },\n { name: 'contact', title: '\u8054\u7cfb\u7535\u8bdd' },\n { name: 'amount', title: '\u7b7e\u7ea6\u91d1\u989d', render: (value) => <strong style={{ color: '#52c41a' }}>\xa5{value.toLocaleString()}</strong> },\n { name: 'status', title: '\u72b6\u6001', render: (value) => {\n const config = {\n '\u5df2\u7b7e\u7ea6': { color: 'success', text: '\u5df2\u7b7e\u7ea6' },\n '\u8ddf\u8fdb\u4e2d': { color: 'processing', text: '\u8ddf\u8fdb\u4e2d' },\n '\u5f85\u8ddf\u8fdb': { color: 'warning', text: '\u5f85\u8ddf\u8fdb' }\n };\n const { color, text } = config[value] \|\| { color: 'default', text: value };\n return <Tag color={color}>{text}</Tag>;\n }}\n ]}\n rowSelection={{\n type: 'checkbox',\n selectedRowKeys: keys,\n onChange: setKeys\n }}\n />\n </div>\n );\n };\n\n const renderExample = () => {\n switch (selectionType) {\n case 'checkbox':\n return <CheckboxExample />;\n case 'selectAll':\n return <SelectAllExample />;\n case 'radio':\n return <RadioExample />;\n case 'custom':\n return <CustomRenderExample />;\n default:\n return <NoSelectionExample />;\n }\n };\n\n return (\n <Flex vertical gap={16}>\n {/ \u63a7\u5236\u9762\u677f /}\n <div style={{ background: '#f5f5f5', padding: '16px', borderRadius: '8px' }}>\n <span style={{ marginRight: 12 }}>\u9009\u62e9\u6a21\u5f0f\uff1a</span>\n <Radio.Group value={selectionType} onChange={(e) => setSelectionType(e.target.value)}>\n <Radio.Button value=\"none\">\u65e0\u9009\u62e9</Radio.Button>\n <Radio.Button value=\"checkbox\">\u590d\u9009\u6846</Radio.Button>\n <Radio.Button value=\"selectAll\">\u5168\u9009\u72b6\u6001</Radio.Button>\n <Radio.Button value=\"radio\">\u5355\u9009\u6846</Radio.Button>\n <Radio.Button value=\"custom\">\u81ea\u5b9a\u4e49\u6e32\u67d3</Radio.Button>\n </Radio.Group>\n </div>\n\n {/ \u793a\u4f8b\u5c55\u793a\u533a /}\n {renderExample()}\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_InfoPage",packageName:"@kne/info-page",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u5206\u5272\u7ebf\u5c55\u793a",description:"\u652f\u6301\u56fe\u6807\u548c\u5782\u76f4/\u6a2a\u5411\u5e03\u5c40\u7684\u7d27\u51d1\u4fe1\u606f\u5c55\u793a",code:"const { SplitLine } = _InfoPage;\nconst { Flex, Tag, Avatar } = antd;\nconst { MobileOutlined, CompassOutlined, MailOutlined, TeamOutlined, CalendarOutlined, EnvironmentOutlined } = antdIcons;\n\nconst BaseExample = () => {\n return (\n <Flex vertical gap={20}>\n {/ \u4e2a\u4eba\u4fe1\u606f\u5c55\u793a - \u6c34\u5e73\u5e03\u5c40 /}\n <div>\n <h4 style={{ marginBottom: 12, color: '#333' }}>\u5458\u5de5\u5361\u7247</h4>\n <SplitLine wrap\n dataSource={{\n name: '\u5f20\u4e09',\n position: '\u9ad8\u7ea7\u524d\u7aef\u5de5\u7a0b\u5e08',\n department: '\u6280\u672f\u7814\u53d1\u90e8',\n phone: '138-0013-8000',\n email: 'zhangsan@tencent.com',\n workYears: 4,\n entryDate: '2020-03-15',\n status: '\u5728\u804c'\n }}\n columns={[\n {\n name: 'name',\n title: '\u59d3\u540d',\n render: (value) => (\n <Flex align=\"center\" gap={8}>\n <Avatar style={{ backgroundColor: '#1890ff' }}>{value[0]}</Avatar>\n <strong>{value}</strong>\n </Flex>\n )\n },\n {\n name: 'position',\n title: '\u804c\u4f4d',\n render: (value) => <Tag color=\"blue\">{value}</Tag>\n },\n {\n name: 'department',\n title: '\u90e8\u95e8',\n render: (value) => <Tag color=\"cyan\">{value}</Tag>\n },\n {\n name: 'phone',\n title: '\u8054\u7cfb\u7535\u8bdd',\n icon: <MobileOutlined />,\n render: (value) => value.replace(/(d{3})(d{4})(d{4})/, '$1-$2-$3')\n },\n {\n name: 'email',\n title: '\u7535\u5b50\u90ae\u7bb1',\n icon: <MailOutlined />\n },\n {\n name: 'workYears',\n title: '\u5de5\u4f5c\u5e74\u9650',\n icon: <CalendarOutlined />,\n render: (value) => `${value}\u5e74`\n },\n {\n name: 'entryDate',\n title: '\u5165\u804c\u65e5\u671f',\n icon: <CalendarOutlined />,\n render: (value) => value\n },\n {\n name: 'status',\n title: '\u72b6\u6001',\n render: (value) => <Tag color=\"success\">{value}</Tag>\n }\n ]}\n />\n </div>\n\n {/ \u516c\u53f8\u4fe1\u606f\u5c55\u793a - \u5782\u76f4\u5e03\u5c40 /}\n <div>\n <h4 style={{ marginBottom: 12, color: '#333' }}>\u516c\u53f8\u4fe1\u606f</h4>\n <SplitLine wrap\n labelMode=\"vertical\"\n dataSource={{\n companyName: '\u6df1\u5733\u5e02\u817e\u8baf\u8ba1\u7b97\u673a\u7cfb\u7edf\u6709\u9650\u516c\u53f8',\n creditCode: '914403007109410773',\n legalPerson: '\u9a6c\u5316\u817e',\n registerDate: '1998-11-11',\n capital: '500\u4e07\u7f8e\u5143',\n address: '\u6df1\u5733\u5e02\u5357\u5c71\u533a\u9ad8\u65b0\u79d1\u6280\u56ed\u79d1\u6280\u4e2d\u4e00\u8def\u817e\u8baf\u5927\u53a6',\n businessScope: '\u8ba1\u7b97\u673a\u8f6f\u786c\u4ef6\u7684\u6280\u672f\u5f00\u53d1\u3001\u9500\u552e\uff1b\u8ba1\u7b97\u673a\u7f51\u7edc\u5de5\u7a0b\uff1b\u7cfb\u7edf\u96c6\u6210\uff1b\u8f6f\u4ef6\u5f00\u53d1\u53ca\u6280\u672f\u670d\u52a1\uff1b\u4fe1\u606f\u54a8\u8be2\uff1b\u7f51\u7edc\u8bbe\u5907\u3001\u901a\u8baf\u8bbe\u5907\u3001\u7535\u5b50\u4ea7\u54c1\u7684\u6280\u672f\u5f00\u53d1\u4e0e\u9500\u552e\uff1b\u56fd\u5185\u8d38\u6613\u3002'\n }}\n columns={[\n {\n name: 'companyName',\n title: '\u4f01\u4e1a\u540d\u79f0'\n },\n {\n name: 'creditCode',\n title: '\u7edf\u4e00\u793e\u4f1a\u4fe1\u7528\u4ee3\u7801',\n icon: <TeamOutlined />\n },\n {\n name: 'legalPerson',\n title: '\u6cd5\u5b9a\u4ee3\u8868\u4eba'\n },\n {\n name: 'registerDate',\n title: '\u6210\u7acb\u65e5\u671f',\n icon: <CalendarOutlined />\n },\n {\n name: 'capital',\n title: '\u6ce8\u518c\u8d44\u672c'\n },\n {\n name: 'address',\n title: '\u6ce8\u518c\u5730\u5740',\n icon: <EnvironmentOutlined />\n },\n {\n name: 'businessScope',\n title: '\u7ecf\u8425\u8303\u56f4'\n }\n ]}\n />\n </div>\n\n {/ \u9879\u76ee\u4fe1\u606f\u5c55\u793a /}\n <div>\n <h4 style={{ marginBottom: 12, color: '#333' }}>\u9879\u76ee\u8be6\u60c5</h4>\n <SplitLine wrap\n dataSource={{\n projectName: '\u4f01\u4e1a\u7ea7\u7ba1\u7406\u7cfb\u7edf\u91cd\u6784',\n projectCode: 'PRJ-2024-001',\n manager: '\u5f20\u4e09',\n teamSize: 12,\n startDate: '2024-01-01',\n endDate: '2024-06-30',\n progress: 35,\n budget: 1500000,\n spent: 525000\n }}\n columns={[\n {\n name: 'projectName',\n title: '\u9879\u76ee\u540d\u79f0'\n },\n {\n name: 'projectCode',\n title: '\u9879\u76ee\u7f16\u53f7'\n },\n {\n name: 'manager',\n title: '\u9879\u76ee\u7ecf\u7406',\n icon: <TeamOutlined />\n },\n {\n name: 'teamSize',\n title: '\u56e2\u961f\u89c4\u6a21',\n render: (value) => `${value}\u4eba`\n },\n {\n name: 'startDate',\n title: '\u5f00\u59cb\u65e5\u671f',\n icon: <CalendarOutlined />\n },\n {\n name: 'endDate',\n title: '\u7ed3\u675f\u65e5\u671f',\n icon: <CalendarOutlined />\n },\n {\n name: 'progress',\n title: '\u9879\u76ee\u8fdb\u5ea6',\n render: (value) => <Tag color={value >= 100 ? 'success' : 'processing'}>{value}%</Tag>\n },\n {\n name: 'budget',\n title: '\u9879\u76ee\u9884\u7b97',\n render: (value) => `\xa5${value.toLocaleString()}`\n },\n {\n name: 'spent',\n title: '\u5df2\u6295\u5165',\n render: (value) => `\xa5${value.toLocaleString()}`\n }\n ]}\n />\n </div>\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_InfoPage",packageName:"@kne/info-page",component:a},{name:"antd",packageName:"antd",component:d},{name:"remoteLoader",packageName:"@kne/remote-loader",component:e(13050)},{name:"antdIcons",packageName:"@ant-design/icons",component:e(44165)}]},{title:"\u6d41\u7a0b\u6b65\u9aa4",description:"\u652f\u6301\u81ea\u5b9a\u4e49\u6e32\u67d3\u548c\u591a\u79cd\u72b6\u6001\u7684\u6d41\u7a0b\u65f6\u5e8f\u5c55\u793a\u7ec4\u4ef6",code:"const { Flex, Space, Divider, Tag } = antd;\nconst { Flow } = _InfoPage;\n\nconst BaseExample = () => {\n return (\n <Space direction=\"vertical\" size={24} style={{ width: '100%' }}>\n {/ \u57fa\u7840\u6d41\u7a0b\u793a\u4f8b /}\n <div>\n <Divider orientation=\"left\">\u8bf7\u5047\u5ba1\u6279\u6d41\u7a0b</Divider>\n <Flow\n current={1}\n dataSource={[\n { title: '\u63d0\u4ea4\u7533\u8bf7', description: '2024-01-15 09:00 \u5f20\u4e09\u63d0\u4ea4\u8bf7\u5047\u7533\u8bf7', status: 'finish' },\n { title: '\u90e8\u95e8\u5ba1\u6279', description: '\u7b49\u5f85\u674e\u7ecf\u7406\u5ba1\u6279', status: 'process' },\n { title: '\u4eba\u4e8b\u5ba1\u6838', description: '\u5f85\u4eba\u4e8b\u90e8\u5ba1\u6838', status: 'wait' },\n { title: '\u6d41\u7a0b\u7ed3\u675f', description: '\u5ba1\u6279\u6d41\u7a0b\u5b8c\u6210', status: 'wait' }\n ]}\n />\n </div>\n\n {/ \u5e26\u526f\u6807\u9898\u7684\u6d41\u7a0b /}\n <div>\n <Divider orientation=\"left\">\u8ba2\u5355\u5904\u7406\u6d41\u7a0b</Divider>\n <Flow\n current={2}\n dataSource={[\n { title: '\u521b\u5efa\u8ba2\u5355', subTitle: '2024-01-15 09:30', status: 'finish' },\n { title: '\u652f\u4ed8\u6210\u529f', subTitle: '2024-01-15 10:15', status: 'finish' },\n { title: '\u4ed3\u5e93\u53d1\u8d27', subTitle: '2024-01-15 14:00', status: 'finish' },\n { title: '\u914d\u9001\u4e2d', subTitle: '2024-01-16 08:30', status: 'process' },\n { title: '\u5df2\u7b7e\u6536', subTitle: '\u5f85\u786e\u8ba4', status: 'wait' }\n ]}\n />\n </div>\n\n {/ \u4f7f\u7528 columns \u81ea\u5b9a\u4e49\u6e32\u67d3 /}\n <div>\n <Divider orientation=\"left\">\u9879\u76ee\u5ba1\u6279\u6d41\u7a0b</Divider>\n <Flow\n dataSource={[\n {\n title: '\u9700\u6c42\u8bc4\u5ba1',\n description: '\u901a\u8fc7',\n operator: '\u5f20\u4ea7\u54c1',\n time: '2024-01-15 09:00',\n logs: [\n { name: '\u5f20\u4ea7\u54c1', action: '\u63d0\u4ea4\u9700\u6c42\u6587\u6863', time: '2024-01-15 09:00', content: '\u5305\u542b\u529f\u80fd\u5217\u8868\u3001\u6280\u672f\u65b9\u6848\u3001\u65f6\u95f4\u8ba1\u5212' },\n { name: '\u674e\u6280\u672f', action: '\u6280\u672f\u8bc4\u5ba1\u901a\u8fc7', time: '2024-01-15 11:00', content: '\u6280\u672f\u65b9\u6848\u53ef\u884c\uff0c\u8d44\u6e90\u5145\u8db3' }\n ]\n },\n {\n title: '\u5f00\u53d1\u5b9e\u65bd',\n description: '\u8fdb\u884c\u4e2d',\n operator: '\u738b\u5f00\u53d1',\n time: '2024-01-16 09:00',\n logs: [\n { name: '\u738b\u5f00\u53d1', action: '\u5f00\u59cb\u5f00\u53d1', time: '2024-01-16 09:00', content: '\u524d\u7aef\u548c\u540e\u7aef\u5e76\u884c\u5f00\u53d1' }\n ]\n },\n {\n title: '\u6d4b\u8bd5\u9a8c\u6536',\n description: '\u5f85\u5904\u7406',\n operator: '\u8d75\u6d4b\u8bd5',\n time: '2024-01-20 00:00',\n logs: []\n }\n ]}\n columns={[\n { name: 'title' },\n { name: 'description', render: (value) => <Tag color={value === '\u901a\u8fc7' ? 'success' : value === '\u8fdb\u884c\u4e2d' ? 'processing' : 'default'}>{value}</Tag> },\n { type: 'subTitle', name: 'time', format: 'datetime' },\n {\n type: 'actionList',\n name: 'logs',\n children: [\n { name: 'name' },\n { name: 'action' },\n { type: 'options', name: 'time', format: 'datetime' },\n { name: 'content' }\n ]\n }\n ]}\n />\n </div>\n\n {/ \u70b9\u72b6\u6b65\u9aa4\u6761 /}\n <div>\n <Divider orientation=\"left\">\u9879\u76ee\u91cc\u7a0b\u7891</Divider>\n <Flex gap={16}>\n <div style={{ flex: 1 }}>\n <p style={{ marginBottom: 8, color: '#666' }}>\u5782\u76f4\u65f6\u95f4\u8f74</p>\n <Flow\n direction=\"vertical\"\n progressDot\n dataSource={[\n { title: '\u9879\u76ee\u542f\u52a8', description: '2024-01-01', status: 'finish' },\n { title: '\u9700\u6c42\u5206\u6790', description: '2024-01-15', status: 'finish' },\n { title: '\u7cfb\u7edf\u8bbe\u8ba1', description: '2024-02-01', status: 'process' },\n { title: '\u5f00\u53d1\u5b9e\u65bd', description: '2024-03-01', status: 'wait' },\n { title: '\u6d4b\u8bd5\u4e0a\u7ebf', description: '2024-04-01', status: 'wait' }\n ]}\n />\n </div>\n <div style={{ flex: 1 }}>\n <p style={{ marginBottom: 8, color: '#666' }}>\u6c34\u5e73\u8fdb\u5ea6\u6761</p>\n <Flow\n direction=\"horizontal\"\n progressDot\n dataSource={[\n { title: '\u6ce8\u518c', description: '\u5b8c\u6210', status: 'finish' },\n { title: '\u9a8c\u8bc1', description: '\u5b8c\u6210', status: 'finish' },\n { title: '\u5ba1\u6838', description: '\u8fdb\u884c\u4e2d', status: 'process' },\n { title: '\u901a\u8fc7', description: '\u5f85\u529e', status: 'wait' }\n ]}\n />\n </div>\n </Flex>\n </div>\n\n {/ \u4f7f\u7528 content \u7c7b\u578b\u81ea\u5b9a\u4e49\u5185\u5bb9 /}\n <div>\n <Divider orientation=\"left\">\u5408\u540c\u5ba1\u6279\u6d41\u7a0b</Divider>\n <Flow\n dataSource={[\n {\n title: '\u8349\u62df\u9636\u6bb5',\n description: '\u6cd5\u52a1\u90e8',\n content: '\u5408\u540c\u6761\u6b3e\u5df2\u8349\u62df\u5b8c\u6210\uff0c\u5305\u542b\u4fdd\u5bc6\u534f\u8bae\u3001\u4ed8\u6b3e\u6761\u6b3e\u3001\u8fdd\u7ea6\u8d23\u4efb\u7b49\u5185\u5bb9\u3002',\n status: 'finish'\n },\n {\n title: '\u4e1a\u52a1\u5ba1\u6838',\n description: '\u4e1a\u52a1\u90e8\u95e8',\n content: '\u4e1a\u52a1\u90e8\u95e8\u5df2\u786e\u8ba4\u5408\u540c\u5185\u5bb9\uff0c\u7b26\u5408\u4e1a\u52a1\u9700\u6c42\u3002',\n status: 'finish'\n },\n {\n title: '\u8d22\u52a1\u5ba1\u6838',\n description: '\u8d22\u52a1\u90e8',\n content: '\u8d22\u52a1\u90e8\u6b63\u5728\u5ba1\u6838\u4ed8\u6b3e\u6761\u6b3e\u548c\u9884\u7b97\u5b89\u6392\uff0c\u9884\u8ba12\u4e2a\u5de5\u4f5c\u65e5\u5b8c\u6210\u3002',\n status: 'process'\n },\n {\n title: '\u6700\u7ec8\u7b7e\u7f72',\n description: '\u7b49\u5f85',\n content: '',\n status: 'wait'\n }\n ]}\n columns={[\n {\n type: 'content',\n name: 'content',\n render: (item) => (\n <div style={{ background: '#f9f9f9', padding: '12px', borderRadius: '4px', fontSize: '13px', lineHeight: '1.6' }}>\n {item}\n </div>\n )\n }\n ]}\n />\n </div>\n </Space>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_InfoPage",packageName:"@kne/info-page",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u62a5\u544a\u9875\u9762",description:"\u5b8c\u6574\u7684\u6d4b\u8bc4\u62a5\u544a\u751f\u6210\u7ec4\u4ef6\uff0c\u652f\u6301\u8bc4\u5206\u3001\u8868\u683c\u548c\u8be6\u7ec6\u63cf\u8ff0",code:"const { Report } = _InfoPage;\nconst { Space } = antd;\nconst BaseExample = () => {\n return (\n <div className=\"outer\">\n <Space direction=\"vertical\" size={24}>\n <Report title=\"\u62a5\u544a\u6982\u8ff0\">\n <Report.List\n report={{\n list: [\n {\n label: '\u76ee\u7684',\n content: '\u672c\u62a5\u544a\u65e8\u5728\u8bc4\u4f30\u62db\u8058\u987e\u95ee\u4f7f\u7528AI\u5de5\u5177\u8fdb\u884c\u5019\u9009\u4eba\u521d\u6b21\u6c9f\u901a\u7684\u80fd\u529b\uff0c\u7279\u522b\u662f\u5728\u7406\u89e3\u5019\u9009\u4eba\u9700\u6c42\u3001\u4f20\u8fbe\u804c\u4f4d\u4fe1\u606f\u4ee5\u53ca\u5efa\u7acb\u521d\u6b65\u4fe1\u4efb\u5173\u7cfb\u7684\u6548\u679c\u3002'\n },\n {\n label: '\u6d4b\u8bc4\u5bf9\u8c61',\n content: '\u59d3\u540d\uff1a\u5f20\u4f1f'\n },\n {\n label: '\u6d4b\u8bc4\u5de5\u5177',\n content: `AI\u6a21\u62df\u7cfb\u7edf\uff1a\u63d0\u4f9b\u57fa\u4e8e\u8bed\u97f3\u548c\u6587\u672c\u7684\u4ea4\u4e92\u6a21\u62df\u73af\u5883\u3002\n\u8bc4\u5206\u6807\u51c6\uff1a\u6c9f\u901a\u6280\u5de7\u3001\u4fe1\u606f\u4f20\u8fbe\u6e05\u6670\u5ea6\u3001\u5019\u9009\u4eba\u53cd\u9988\u3001\u5efa\u7acb\u5173\u7cfb\u7684\u80fd\u529b\u3002`\n },\n {\n label: '\u4efb\u52a1\u76ee\u6807',\n content: (\n <ul>\n <li>\u5b8c\u6574\u5448\u73b0\u521d\u6b21\u6c9f\u901a\u8bdd\u672f\uff0c\u5c55\u73b0\u6bcf\u4e2a\u5173\u952e\u52a8\u4f5c\u548c\u6c9f\u901a\u987a\u5e8f\u3002</li>\n <li>\u6536\u96c6\u5019\u9009\u4eba\u4fe1\u606f\uff1a\u4e86\u89e3\u5019\u9009\u4eba\u5de5\u4f5c\u80cc\u666f\uff0c\u6280\u672f\u80fd\u529b\u53ca\u5176\u85aa\u8d44\u8981\u6c42\u3002</li>\n <li>\u6316\u6398\u9700\u6c42\uff1a\u5168\u9762\u4e86\u89e3\u5019\u9009\u4eba\u6c42\u804c\u52a8\u6001\u548c\u9700\u6c42\uff0c\u4ece\u800c\u638c\u63e1\u5019\u9009\u4eba\u5b58\u5728\u7684\u987e\u8651\u53ca\u3002</li>\n <li>\u6709\u6548\u63a8\u8350\uff1a\u6839\u636e\u5019\u9009\u4eba\u6c42\u804c\u9700\u6c42\u94fe\u63a5\u804c\u4f4d\u4f18\u52bf\uff0c\u5f3a\u5316\u6280\u672f\u5438\u5f15\u70b9\uff0c\u59a5\u5584\u5904\u7406\u5019\u9009\u4eba\u7591\u8651\u3002</li>\n <li>\u5efa\u7acb\u4fe1\u4efb\u5173\u7cfb\uff1a\u4f7f\u7528\u6c9f\u901a\u6280\u5de7\uff0c\u6001\u5ea6\u8bda\u6073\uff0c\u548c\u5019\u9009\u4eba\u7ad9\u5728\u4e00\u8d77\uff0c\u800c\u975e\u201c\u535a\u5f08\u201d\u5173\u7cfb\u3002</li>\n </ul>\n )\n }\n ]\n }}\n />\n </Report>\n <Report title=\"\u6d4b\u8bc4\u7ed3\u679c\">\n <Report.Result\n report={{\n total: {\n score: '81.8',\n label: '\u7efc\u5408\u5f97\u5206'\n },\n list: [\n {\n label: '\u6c9f\u901a\u7a0b\u5e8f\u6307\u5f15\u53ca\u8bdd\u672f',\n score: '86',\n content:\n '\u5f20\u4f1f\u5728\u8fd9\u4e00\u90e8\u5206\u7684\u8868\u73b0\u603b\u4f53\u4e0a\u662f\u4e13\u4e1a\u4e14\u6709\u6761\u7406\u7684\uff0c\u80fd\u591f\u6309\u7167\u4e00\u5b9a\u7684\u6d41\u7a0b\u987a\u5229\u5f00\u5c55\u5bf9\u8bdd\u3002\u4ed6\u8868\u73b0\u51fa\u7684\u793c\u8c8c\u548c\u4e13\u4e1a\u6027\u5728\u8be2\u95ee\u662f\u5426\u65b9\u4fbf\u901a\u8bdd\u65f6\u5f97\u5230\u4e86\u5b8c\u7f8e\u7684\u4f53\u73b0\uff0c\u5f97\u5230\u4e86\u6ee1\u5206\u3002\u7136\u800c\uff0c\u4ed6\u5728\u4ecb\u7ecd\u804c\u4f4d\u65f6\u672a\u80fd\u5145\u5206\u5229\u7528\u673a\u4f1a\u5f3a\u8c03\u804c\u4f4d\u7684\u5438\u5f15\u70b9\uff0c\u53ef\u80fd\u5f71\u54cd\u5019\u9009\u4eba\u7684\u5174\u8da3\u3002'\n },\n {\n label: '\u6536\u96c6\u4fe1\u606f\uff08\u73b0\u72b6$&$\u671f\u671b\uff09',\n score: '90',\n content: '\u5f20\u4f1f\u5728\u6536\u96c6\u5019\u9009\u4eba\u7684\u73b0\u72b6\u548c\u671f\u671b\u65b9\u9762\u505a\u5f97\u76f8\u5bf9\u5b8c\u5584\uff0c\u80fd\u591f\u83b7\u5f97\u5173\u4e8e\u5019\u9009\u4eba\u5f53\u524d\u5de5\u4f5c\u548c\u6280\u672f\u6808\u7684\u91cd\u8981\u4fe1\u606f\u3002\u4f46\u5bf9\u4e8e\u5019\u9009\u4eba\u7684\u9879\u76ee\u7ecf\u9a8c\u548c\u85aa\u8d44\u7ed3\u6784\u7684\u63a2\u8ba8\u4e0d\u591f\u6df1\u5165\uff0c\u8fd9\u53ef\u80fd\u4f1a\u5f71\u54cd\u5230\u540e\u7eed\u7684\u804c\u4f4d\u5339\u914d\u548c\u671f\u671b\u7ba1\u7406\u3002'\n },\n {\n label: '\u6316\u6398\u9700\u6c42',\n score: '70',\n content: '\u5f20\u4f1f\u5728\u6316\u6398\u5019\u9009\u4eba\u9700\u6c42\u65b9\u9762\u8fd8\u6709\u63d0\u5347\u7a7a\u95f4\u3002\u867d\u7136\u57fa\u672c\u4e86\u89e3\u4e86\u5019\u9009\u4eba\u7684\u804c\u4e1a\u671f\u671b\uff0c\u4f46\u5728\u63a2\u7d22\u5019\u9009\u4eba\u7684\u975e\u85aa\u916c\u52a8\u673a\u548c\u6df1\u5c42\u6b21\u9700\u6c42\u65b9\u9762\u8868\u73b0\u4e0d\u591f\u5145\u5206\uff0c\u8fd9\u662f\u5efa\u7acb\u6709\u6548\u63a8\u8350\u548c\u6df1\u5ea6\u5173\u7cfb\u7684\u5173\u952e\u3002'\n },\n {\n label: '\u6709\u6548\u63a8\u8350',\n score: '73',\n content: '\u5728\u6709\u6548\u63a8\u8350\u804c\u4f4d\u65b9\u9762\uff0c\u5f20\u4f1f\u9700\u8981\u52a0\u5f3a\u4e0e\u5019\u9009\u4eba\u9700\u6c42\u7684\u5339\u914d\u5ea6\u548c\u8bf4\u670d\u529b\u3002\u867d\u7136\u63d0\u5230\u4e86\u804c\u4f4d\u7684\u6280\u672f\u4f18\u52bf\uff0c\u4f46\u672a\u6839\u636e\u5019\u9009\u4eba\u7684\u5177\u4f53\u6280\u672f\u80cc\u666f\u8fdb\u884c\u4e2a\u6027\u5316\u5f3a\u8c03\uff0c\u53ef\u80fd\u51cf\u5c11\u5019\u9009\u4eba\u7684\u5174\u8da3\u3002'\n },\n {\n label: '\u5efa\u7acb\u4fe1\u4efb\u5173\u7cfb',\n score: '84',\n content: '\u5f20\u4f1f\u80fd\u591f\u901a\u8fc7\u6709\u6548\u7684\u6c9f\u901a\u5efa\u7acb\u4fe1\u4efb\u5173\u7cfb\uff0c\u4f7f\u7528\u5f00\u653e\u6027\u95ee\u9898\u548c\u79ef\u6781\u80af\u5b9a\u5019\u9009\u4eba\u7684\u8868\u73b0\u3002\u7136\u800c\uff0c\u9700\u8981\u63d0\u9ad8\u5728\u6362\u4f4d\u601d\u8003\u548c\u7406\u89e3\u5019\u9009\u4eba\u6df1\u5c42\u9700\u6c42\u65b9\u9762\u7684\u80fd\u529b\uff0c\u786e\u4fdd\u4fe1\u4efb\u5173\u7cfb\u7684\u6df1\u5ea6\u548c\u771f\u5b9e\u6027\u3002'\n }\n ]\n }}\n />\n </Report>\n <Report title=\"\u8bc4\u5206\u7ec6\u8282\">\n <Report.Table\n report={{\n columns: [\n {\n title: '\u8bc4\u4f30\u7ef4\u5ea6',\n name: 'group',\n isSubTitle: true\n },\n {\n title: '\u8bc4\u5206\u9879',\n name: 'item',\n span: 10\n },\n {\n title: '\u5f97\u5206',\n name: 'score',\n span: 4,\n valueOf: value => <div className=\"score\">{value}</div>\n },\n {\n title: '\u63cf\u8ff0',\n name: 'description',\n span: 10\n }\n ],\n group: [\n {\n name: 'group1',\n label: '\u6c9f\u901a\u7a0b\u5e8f\u6307\u5f15\u53ca\u8bdd\u672f'\n },\n {\n name: 'group2',\n label: '\u6536\u96c6\u4fe1\u606f\uff08\u73b0\u72b6&\u671f\u671b\uff09'\n },\n {\n name: 'group3',\n label: '\u6316\u6398\u9700\u6c42'\n },\n {\n name: 'group4',\n label: '\u6709\u6548\u63a8\u8350'\n },\n {\n name: 'group5',\n label: '\u5efa\u7acb\u4fe1\u4efb\u5173\u7cfb'\n }\n ],\n list: [\n {\n group: 'group1',\n item: '\u4e13\u4e1a\u5f00\u573a',\n score: <Report.Score value={4}/>,\n description: '\u5f00\u573a\u4e13\u4e1a\uff0c\u8bed\u6c14\u53cb\u597d\uff0c\u7565\u663e\u6025\u4fc3\u3002'\n },\n {\n group: 'group1',\n item: '\u8be2\u95ee\u662f\u5426\u65b9\u4fbf\u901a\u8bdd',\n score: <Report.Score value={5}/>,\n description: '\u8868\u73b0\u51fa\u6781\u597d\u7684\u793c\u8c8c\u548c\u8003\u8651\u3002'\n },\n {\n group: 'group1',\n item: '\u5148\u4e86\u89e3\u5019\u9009\u4eba\u6574\u4f53\u60c5\u51b5',\n score: <Report.Score value={3}/>,\n description: '\u8be6\u7ec6\u8be2\u95ee\u4e86\u6280\u672f\u548c\u52a8\u673a\uff0c\u672a\u6df1\u5165\u4e2a\u4eba\u53d1\u5c55\u3002'\n },\n {\n group: 'group1',\n item: '\u540e\u4ecb\u7ecd\u63a8\u8350OD\u804c\u4f4d',\n score: <Report.Score value={4}/>,\n description: '\u4ecb\u7ecd\u6e05\u6670\uff0c\u672a\u5145\u5206\u7a81\u51fa\u804c\u4f4d\u5438\u5f15\u529b\u3002'\n },\n {\n group: 'group1',\n item: '\u4ecb\u7ecd\u6574\u4f53\u9762\u8bd5\u6d41\u7a0b',\n score: <Report.Score value={1}/>,\n description: '\u8be6\u5c3d\u4ecb\u7ecd\u6d41\u7a0b\uff0c\u7f3a\u5c11\u673a\u8003\u51c6\u5907\u7ec6\u8282\u8bf4\u660e\u3002'\n },\n {\n group: 'group1',\n item: '\u4ea4\u6362\u8054\u7cfb\u65b9\u5f0f',\n score: <Report.Score value={5}/>,\n description: '\u6709\u6548\u4e14\u81ea\u7136\uff0c\u786e\u4fdd\u53cc\u65b9\u7545\u901a\u65e0\u963b\u3002'\n },\n {\n group: 'group2',\n item: '\u4e86\u89e3\u5019\u9009\u4eba\u76ee\u524d\u5c31\u4e1a\u72b6\u6001',\n score: <Report.Score value={5}/>,\n description: '\u8be6\u5c3d\u4e86\u89e3\u5019\u9009\u4eba\u7684\u5f53\u524d\u5c31\u4e1a\u72b6\u51b5\u3002'\n },\n {\n group: 'group2',\n item: '\u4e86\u89e3\u5019\u9009\u4eba\u6280\u672f\u6808\u53ca\u9879\u76ee\u7ecf\u9a8c',\n score: <Report.Score value={4}/>,\n description: '\u8be6\u7ec6\u8be2\u95ee\u6280\u672f\u6808\uff0c\u5bf9\u9879\u76ee\u7ecf\u9a8c\u63a2\u8ba8\u4e0d\u8db3\u3002'\n },\n {\n group: 'group2',\n item: '\u4e86\u89e3\u5019\u9009\u4eba\u85aa\u8d44\u60c5\u51b5\u4e0e\u7ed3\u6784',\n score: <Report.Score value={4}/>,\n description: '\u4e86\u89e3\u85aa\u8d44\u671f\u671b\u6e05\u6670\uff0c\u672a\u8be6\u7ec6\u63a2\u8ba8\u85aa\u8d44\u6784\u6210\u3002'\n },\n {\n group: 'group3',\n item: '\u4e86\u89e3\u5019\u9009\u4eba\u5bf9\u4e0b\u4e00\u4efd\u5de5\u4f5c\u7684\u671f\u671b',\n score: <Report.Score value={3}/>,\n description: '\u63a2\u8ba8\u4e86\u804c\u4e1a\u89c4\u5212\uff0c\u4f46\u672a\u6df1\u6316\u53d1\u5c55\u610f\u613f\u3002'\n },\n {\n group: 'group3',\n item: '\u63a2\u7d22\u975e\u85aa\u8d44\u6c42\u804c\u52a8\u673a',\n score: <Report.Score value={2}/>,\n description: '\u57fa\u672c\u4e86\u89e3\u6c42\u804c\u52a8\u673a\uff0c\u7f3a\u4e4f\u6df1\u5ea6\u548c\u7ec6\u8282\u3002'\n },\n {\n group: 'group3',\n item: '\u8bc6\u522b\u5e76\u5904\u7406\u987e\u8651',\n score: <Report.Score value={4}/>,\n description: '\u8bc6\u522b\u4e86\u987e\u8651\uff0c\u56de\u5e94\u7a0d\u663e\u6a21\u7cca\u3002'\n },\n {\n group: 'group4',\n item: '\u94fe\u63a5\u804c\u4f4d\u4f18\u52bf\u4e0e\u6c42\u804c\u52a8\u673a',\n score: <Report.Score value={3}/>,\n description: '\u63d0\u53ca\u804c\u4f4d\u76f8\u5173\u6027\uff0c\u7f3a\u4e4f\u8bf4\u670d\u529b\u3002'\n },\n {\n group: 'group4',\n item: '\u5f3a\u5316\u9879\u76ee\u6280\u672f\u5438\u5f15\u70b9',\n score: <Report.Score value={3}/>,\n description: '\u63d0\u53ca\u6280\u672f\u4f18\u52bf\uff0c\u672a\u9488\u5bf9\u5019\u9009\u4eba\u80cc\u666f\u5b9a\u5236\u3002'\n },\n {\n group: 'group4',\n item: '\u5173\u6ce8\u5e76\u5904\u7406\u5019\u9009\u4eba\u987e\u8651',\n score: <Report.Score value={4}/>,\n description: '\u6b63\u9762\u56de\u5e94\u987e\u8651\uff0c\u4f46\u89e3\u51b3\u65b9\u6848\u4e0d\u5177\u4f53\u3002'\n },\n {\n group: 'group5',\n item: '\u5e94\u7528\u5f00\u653e\u6027\u63d0\u95ee',\n score: <Report.Score value={0}/>,\n description: '\u4f7f\u7528\u5f00\u653e\u6027\u95ee\u9898\u4fc3\u8fdb\u4e86\u5bf9\u8bdd\u6df1\u5165\u3002'\n },\n {\n group: 'group5',\n item: '\u6362\u4f4d\u601d\u8003\u4e0e\u8868\u8fbe\u540c\u7406\u5fc3',\n score: <Report.Score value={1}/>,\n description: '\u8868\u8fbe\u4e86\u540c\u7406\u5fc3\uff0c\u4f46\u90e8\u5206\u56de\u7b54\u672a\u5b8c\u5168\u7ad9\u5728\u5019\u9009\u4eba\u89d2\u5ea6\u3002'\n },\n {\n group: 'group5',\n item: '\u8868\u8fbe\u80af\u5b9a\u548c\u6b23\u8d4f',\n score: <Report.Score value={5}/>,\n description: '\u975e\u5e38\u597d\u5730\u80af\u5b9a\u4e86\u5019\u9009\u4eba\u7684\u80fd\u529b\u548c\u7ecf\u9a8c\u3002'\n },\n {\n group: 'group5',\n item: '\u6e05\u6670\u8868\u8fbe\u89c2\u70b9',\n score: <Report.Score value={2}/>,\n description: '\u89c2\u70b9\u4e3b\u8981\u6e05\u6670\uff0c\u5076\u6709\u4e0d\u591f\u51c6\u786e\u7684\u60c5\u51b5\u3002'\n },\n {\n group: 'group5',\n item: '\u6709\u6548\u503e\u542c\u4e0e\u7406\u89e3',\n score: <Report.Score value={3}/>,\n description: '\u503e\u542c\u826f\u597d\uff0c\u4f46\u6709\u65f6\u672a\u80fd\u5b8c\u5168\u6293\u4f4f\u5019\u9009\u4eba\u7684\u610f\u56fe\u3002'\n }\n ]\n }}\n />\n </Report>\n <Report title=\"\u7ed3\u8bba\u4e0e\u5efa\u8bae\">\n <Report.Part\n report={{\n list: [\n {\n label: '\u7ed3\u8bba',\n hasBgColor: true,\n content:\n '\u5728\u6b64\u6b21AI\u60c5\u666f\u6a21\u62df\u6d4b\u8bc4\u4e2d\uff0c\u674e\u56db\u8868\u73b0\u51fa\u4e86\u8f83\u5f3a\u7684\u6c9f\u901a\u80fd\u529b\u548c\u4e13\u4e1a\u6027\uff0c\u5c24\u5176\u662f\u5728\u7a0b\u5e8f\u6307\u5f15\u53ca\u8bdd\u672f\u65b9\u9762\u3002\u4ed6\u6210\u529f\u5730\u6536\u96c6\u4e86\u5019\u9009\u4eba\u7684\u57fa\u672c\u4fe1\u606f\u5e76\u5efa\u7acb\u4e86\u521d\u6b65\u7684\u4fe1\u4efb\u5173\u7cfb\u3002\u7136\u800c\uff0c\u4ed6\u5728\u6df1\u5165\u6316\u6398\u5019\u9009\u4eba\u9700\u6c42\u548c\u4e2a\u6027\u5316\u63a8\u8350\u804c\u4f4d\u65b9\u9762\u7684\u8868\u73b0\u8fd8\u6709\u5f85\u63d0\u9ad8\u3002\u603b\u4f53\u800c\u8a00\uff0c\u674e\u56db\u7684\u8868\u73b0\u826f\u597d\uff0c\u663e\u793a\u51fa\u4e86\u4ed6\u4f5c\u4e3a\u62db\u8058\u987e\u95ee\u7684\u6f5c\u529b\u3002'\n },\n {\n label: '\u5efa\u8bae',\n style: { '--marker-color': '#027A48', '--label-bg-color': '#027A481a' },\n content: (\n <ol>\n <li>\u589e\u5f3a\u804c\u4f4d\u4ecb\u7ecd\u7684\u5438\u5f15\u529b\uff0c\u7279\u522b\u662f\u5c06\u804c\u4f4d\u4f18\u52bf\u4e0e\u5019\u9009\u4eba\u7684\u9700\u6c42\u76f4\u63a5\u5173\u8054\uff0c\u7a81\u51fa\u8868\u73b0\u804c\u4f4d\u7684\u72ec\u7279\u4e4b\u5904\u3002</li>\n <li>\u5bf9\u5019\u9009\u4eba\u7684\u9879\u76ee\u7ecf\u9a8c\u8fdb\u884c\u66f4\u8be6\u7ec6\u7684\u8be2\u95ee\uff0c\u5c24\u5176\u662f\u5173\u4e8e\u5982\u4f55\u5728\u9879\u76ee\u4e2d\u89e3\u51b3\u95ee\u9898\u548c\u6280\u672f\u5e94\u7528\u7684\u5177\u4f53\u60c5\u51b5\u3002</li>\n <li>\u5728\u8ba8\u8bba\u85aa\u8d44\u65f6\uff0c\u5e94\u8be6\u7ec6\u4e86\u89e3\u5019\u9009\u4eba\u7684\u85aa\u8d44\u6784\u6210\u548c\u671f\u671b\uff0c\u786e\u4fdd\u63d0\u4f9b\u7684\u804c\u4f4d\u4e0e\u5019\u9009\u4eba\u7684\u85aa\u8d44\u671f\u671b\u76f8\u5339\u914d\u3002</li>\n <li>\u5728\u4ea4\u6d41\u4e2d\u7a7f\u63d2\u63a2\u8ba8\u5019\u9009\u4eba\u7684\u4e2a\u4eba\u5174\u8da3\u548c\u957f\u671f\u804c\u4e1a\u76ee\u6807\uff0c\u4ee5\u4fbf\u66f4\u597d\u5730\u7406\u89e3\u5176\u52a8\u673a\u3002</li>\n <li>\u6839\u636e\u5019\u9009\u4eba\u7684\u6280\u672f\u80fd\u529b\u548c\u804c\u4e1a\u5174\u8da3\u5b9a\u5236\u804c\u4f4d\u63a8\u8350\uff0c\u7a81\u51fa\u804c\u4f4d\u7684\u6280\u672f\u6311\u6218\u548c\u6210\u957f\u673a\u4f1a\u3002</li>\n <li>\u52a0\u5f3a\u540c\u7406\u5fc3\u7684\u8868\u8fbe\uff0c\u5c24\u5176\u5728\u8ba8\u8bba\u5019\u9009\u4eba\u5173\u5207\u7684\u95ee\u9898\u65f6\uff0c\u4ece\u5176\u89d2\u5ea6\u51fa\u53d1\u63d0\u4f9b\u89e3\u51b3\u65b9\u6848\u3002</li>\n </ol>\n )\n }\n ]\n }}\n />\n </Report>\n <Report title=\"\u7ed3\u8bba\u4e0e\u5efa\u8bae\">\u81ea\u5b9a\u4e49 area</Report>\n </Space>\n </div>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_InfoPage",packageName:"@kne/info-page",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u62a5\u544a\u7ec4\u4ef6",description:"\u5c55\u793aReport\u7684\u5404\u5b50\u7ec4\u4ef6\uff1aList\u3001Result\u3001Table\u3001Part",code:"const { Report, Score } = _InfoPage;\nconst { Flex, Radio, Space } = antd;\nconst { useState } = React;\n\nconst reportData = {\n total: {\n score: '88.5',\n label: '\u7efc\u5408\u8bc4\u5206'\n },\n list: [\n {\n label: '\u4ee3\u7801\u8d28\u91cf',\n score: '95',\n content: '\u4ee3\u7801\u98ce\u683c\u89c4\u8303\uff0c\u6ce8\u91ca\u6e05\u6670\u5b8c\u6574\uff0c\u9075\u5faaESLint\u548cPrettier\u89c4\u8303\u3002\u7ec4\u4ef6\u62c6\u5206\u5408\u7406\uff0c\u590d\u7528\u6027\u5f3a\uff0c\u5355\u5143\u6d4b\u8bd5\u8986\u76d6\u7387\u8fbe\u523085%\u3002\u4ee3\u7801\u5ba1\u67e5\u4e2d\u63d0\u51fa\u7684\u4fee\u6539\u610f\u89c1\u54cd\u5e94\u53ca\u65f6\uff0c\u6574\u6539\u5b8c\u6210\u7387\u9ad8\u3002'\n },\n {\n label: '\u6280\u672f\u6df1\u5ea6',\n score: '90',\n content: '\u6df1\u5165\u7406\u89e3React\u6e90\u7801\u539f\u7406\uff0c\u719f\u6089Hooks\u5de5\u4f5c\u673a\u5236\u548c\u6027\u80fd\u4f18\u5316\u6280\u5de7\u3002\u5bf9\u524d\u7aef\u5de5\u7a0b\u5316\u3001\u5fae\u524d\u7aef\u67b6\u6784\u6709\u5b9e\u8df5\u7ecf\u9a8c\u3002\u5728\u9879\u76ee\u4e2d\u6210\u529f\u5b9e\u73b0SSR\u65b9\u6848\uff0c\u63d0\u5347\u9996\u5c4f\u6e32\u67d3\u901f\u5ea660%\u3002'\n },\n {\n label: '\u56e2\u961f\u534f\u4f5c',\n score: '85',\n content: '\u79ef\u6781\u53c2\u4e0e\u4ee3\u7801\u8bc4\u5ba1\u548c\u6280\u672f\u8ba8\u8bba\uff0c\u4e50\u4e8e\u5206\u4eab\u6280\u672f\u5fc3\u5f97\u3002\u4e0e\u4ea7\u54c1\u3001\u8bbe\u8ba1\u3001\u6d4b\u8bd5\u56e2\u961f\u6c9f\u901a\u987a\u7545\uff0c\u80fd\u591f\u51c6\u786e\u7406\u89e3\u9700\u6c42\u5e76\u7ed9\u51fa\u5408\u7406\u7684\u6280\u672f\u5efa\u8bae\u3002\u534f\u52a9\u65b0\u540c\u4e8b\u5feb\u901f\u878d\u5165\u56e2\u961f\u3002'\n },\n {\n label: '\u521b\u65b0\u610f\u8bc6',\n score: '82',\n content: '\u4e3b\u52a8\u63a2\u7d22\u65b0\u6280\u672f\uff0c\u5c06AI\u8f85\u52a9\u5f00\u53d1\u5de5\u5177\u5f15\u5165\u56e2\u961f\uff0c\u63d0\u5347\u5f00\u53d1\u6548\u7387\u7ea620%\u3002\u63d0\u51fa\u591a\u4e2a\u4f18\u5316\u65b9\u6848\u5e76\u88ab\u91c7\u7eb3\uff0c\u4e3a\u4e1a\u52a1\u589e\u957f\u505a\u51fa\u4e86\u8d21\u732e\u3002\u6301\u7eed\u5173\u6ce8\u884c\u4e1a\u52a8\u6001\uff0c\u6280\u672f\u654f\u611f\u5ea6\u9ad8\u3002'\n }\n ]\n};\n\nconst tableReportData = {\n columns: [\n { title: '\u8bc4\u4f30\u7ef4\u5ea6', name: 'group', isSubTitle: true, span: 24 },\n { title: '\u8bc4\u4f30\u9879', name: 'item', span: 12 },\n { title: '\u5f97\u5206', name: 'score', span: 4 },\n { title: '\u8bf4\u660e', name: 'description', span: 8 }\n ],\n group: [\n { name: 'group1', label: '\ud83d\udccc \u6838\u5fc3\u6280\u672f\u80fd\u529b' },\n { name: 'group2', label: '\ud83d\udcbc \u5de5\u4f5c\u4e1a\u7ee9' },\n { name: 'group3', label: '\ud83c\udfaf \u804c\u4e1a\u7d20\u517b' }\n ],\n list: [\n { group: 'group1', item: '\u524d\u7aef\u6846\u67b6', score: <Score value={5} total={5} />, description: 'React/Vue\u719f\u7ec3\u638c\u63e1' },\n { group: 'group1', item: 'TypeScript', score: <Score value={5} total={5} />, description: '\u7c7b\u578b\u5b9a\u4e49\u89c4\u8303\u5b8c\u6574' },\n { group: 'group1', item: '\u6027\u80fd\u4f18\u5316', score: <Score value={4} total={5} />, description: 'SSR\u9996\u5c4f\u4f18\u5316\u663e\u8457' },\n { group: 'group1', item: '\u5de5\u7a0b\u5316', score: <Score value={4} total={5} />, description: 'CI/CD\u6d41\u7a0b\u5b8c\u5584' },\n { group: 'group2', item: '\u9700\u6c42\u4ea4\u4ed8', score: <Score value={5} total={5} />, description: '\u6309\u65f6\u4ea4\u4ed8\u738798%' },\n { group: 'group2', item: '\u8d28\u91cf\u4fdd\u969c', score: <Score value={4} total={5} />, description: '\u7ebf\u4e0a\u6545\u969c\u7387\u4f4e' },\n { group: 'group2', item: '\u6587\u6863\u8f93\u51fa', score: <Score value={3} total={5} />, description: 'API\u6587\u6863\u9700\u5b8c\u5584' },\n { group: 'group3', item: '\u56e2\u961f\u534f\u4f5c', score: <Score value={5} total={5} />, description: '\u6c9f\u901a\u987a\u7545\u4e3b\u52a8' },\n { group: 'group3', item: '\u5b66\u4e60\u6210\u957f', score: <Score value={4} total={5} />, description: '\u6280\u672f\u5206\u4eab\u79ef\u6781' },\n { group: 'group3', item: '\u8d23\u4efb\u610f\u8bc6', score: <Score value={5} total={5} />, description: '\u5de5\u4f5c\u8ba4\u771f\u8d1f\u8d23' }\n ],\n footer: (item, index) => (\n <div style={{ padding: '4px 0', color: '#999', fontSize: '12px' }}>\n \u7b2c {index + 1} \u9879\n </div>\n )\n};\n\nconst listReportData = {\n list: [\n { label: '\ud83d\udc64 \u8bc4\u4f30\u5bf9\u8c61', content: '\u738b\u660e\u8fdc' },\n { label: '\ud83c\udfe2 \u6240\u5c5e\u90e8\u95e8', content: '\u6280\u672f\u7814\u53d1\u4e2d\u5fc3 - \u524d\u7aef\u67b6\u6784\u7ec4' },\n { label: '\ud83d\udcbc \u804c\u7ea7\u804c\u4f4d', content: '\u8d44\u6df1\u524d\u7aef\u5de5\u7a0b\u5e08\uff08P6+\uff09' },\n { label: '\ud83d\udcc5 \u5165\u804c\u65f6\u95f4', content: '2021\u5e743\u670815\u65e5' },\n { label: '\ud83d\udcca \u8bc4\u4f30\u5468\u671f', content: '2024\u5e74\u5ea6' },\n { label: '\ud83d\udd0d \u8bc4\u4f30\u65e5\u671f', content: '2025\u5e741\u670810\u65e5' },\n { label: '\ud83d\udc68\u200d\ud83d\udcbc \u8bc4\u4f30\u4eba', content: '\u6280\u672f\u603b\u76d1 - \u9648\u601d\u8fdc' },\n { label: '\ud83d\udccb \u8bc4\u4f30\u7ef4\u5ea6', content: '\u6838\u5fc3\u6280\u80fd\u3001\u9879\u76ee\u7ee9\u6548\u3001\u804c\u4e1a\u7d20\u517b' },\n { label: '\ud83d\udd27 \u8bc4\u4f30\u65b9\u6cd5', content: '\u4ee3\u7801\u5ba1\u67e5 + \u7ee9\u6548\u6570\u636e + 360\u5ea6\u8bc4\u4f30 + \u6280\u672f\u9762\u8bd5' }\n ]\n};\n\nconst partReportData = {\n list: [\n {\n label: '\u2728 \u6838\u5fc3\u4f18\u52bf',\n hasBgColor: true,\n content: '1. \u6280\u672f\u89c6\u91ce\u5f00\u9614\uff0c\u5bf9\u524d\u7aef\u6280\u672f\u6808\u6709\u7cfb\u7edf\u6027\u7406\u89e3\uff0c\u80fd\u591f\u4ece\u67b6\u6784\u5c42\u9762\u601d\u8003\u95ee\u9898\u30022. \u5b66\u4e60\u80fd\u529b\u5f3a\uff0c\u5feb\u901f\u638c\u63e1\u65b0\u6280\u672f\u5e76\u8f6c\u5316\u4e3a\u751f\u4ea7\u529b\uff0cAI\u5de5\u5177\u5e94\u7528\u6548\u679c\u663e\u8457\u30023. \u4ee3\u7801\u8d28\u91cf\u610f\u8bc6\u5f3a\uff0c\u6ce8\u91cd\u53ef\u7ef4\u62a4\u6027\u548c\u6269\u5c55\u6027\uff0c\u63a8\u52a8\u56e2\u961f\u4ee3\u7801\u89c4\u8303\u843d\u5730\u30024. \u5de5\u4f5c\u79ef\u6781\u4e3b\u52a8\uff0c\u4e3b\u52a8\u627f\u62c5\u590d\u6742\u4efb\u52a1\uff0c\u591a\u6b21\u89e3\u51b3\u5173\u952e\u6280\u672f\u96be\u9898\u3002'\n },\n {\n label: '\ud83d\udcc8 \u6210\u957f\u7a7a\u95f4',\n content: '1. \u5728\u6280\u672f\u7ba1\u7406\u548c\u56e2\u961f\u5e26\u9886\u65b9\u9762\u9700\u8981\u66f4\u591a\u5386\u7ec3\u30022. \u8de8\u90e8\u95e8\u534f\u4f5c\u65f6\u7684\u5546\u4e1a\u601d\u7ef4\u6709\u5f85\u63d0\u5347\uff0c\u9700\u8981\u66f4\u597d\u5730\u7406\u89e3\u4e1a\u52a1\u4ef7\u503c\u30023. \u6280\u672f\u6210\u679c\u7684\u53ef\u89c6\u5316\u5c55\u793a\u548c\u5f71\u54cd\u529b\u6253\u9020\u53ef\u4ee5\u8fdb\u4e00\u6b65\u52a0\u5f3a\u3002'\n },\n {\n label: '\ud83c\udfaf \u53d1\u5c55\u5efa\u8bae',\n content: '1. \u4e89\u53d6\u62c5\u4efb\u5c0f\u578b\u9879\u76ee\u7684Tech Lead\uff0c\u79ef\u7d2f\u56e2\u961f\u7ba1\u7406\u7ecf\u9a8c\u30022. \u52a0\u5f3a\u5bf9\u540e\u7aef\u3001\u8fd0\u7ef4\u76f8\u5173\u6280\u672f\u7684\u5b66\u4e60\uff0c\u5efa\u7acb\u5168\u6808\u6280\u672f\u89c6\u89d2\u30023. \u6bcf\u5b63\u5ea6\u7ec4\u7ec7\u81f3\u5c11\u4e00\u6b21\u6280\u672f\u5206\u4eab\uff0c\u63d0\u5347\u56e2\u961f\u6280\u672f\u6c1b\u56f4\u30024. \u53c2\u4e0e\u6280\u672f\u9762\u8bd5\u548c\u4eba\u624d\u8bc4\u4f30\uff0c\u953b\u70bc\u8bc6\u4eba\u7528\u4eba\u80fd\u529b\u30025. \u5173\u6ce8\u884c\u4e1a\u524d\u6cbf\u8d8b\u52bf\uff0c\u5b9a\u671f\u8f93\u51fa\u6280\u672f\u6587\u7ae0\u6216\u5f00\u6e90\u8d21\u732e\u3002'\n },\n {\n label: '\ud83d\udcda \u57f9\u517b\u8ba1\u5212',\n content: '1. Q2\u53c2\u52a0\u6280\u672f\u7ba1\u7406\u8fdb\u9636\u57f9\u8bad\u30022. Q3\u53c2\u4e0e\u5fae\u670d\u52a1\u67b6\u6784\u4e13\u9879\u5b66\u4e60\u30023. Q4\u627f\u62c5\u65b0\u4eba\u5bfc\u5e08\u89d2\u8272\u30024. \u5168\u5e74\u53c2\u4e0e\u81f3\u5c113\u4e2a\u6280\u672f\u5cf0\u4f1a\u6216\u5de5\u4f5c\u574a\u30025. \u5efa\u7acb\u4e2a\u4eba\u6280\u672f\u535a\u5ba2\uff0c\u6bcf\u6708\u81f3\u5c11\u8f93\u51fa1\u7bc7\u6280\u672f\u6587\u7ae0\u3002'\n }\n ]\n};\n\nconst BaseExample = () => {\n const [componentType, setComponentType] = useState('list');\n\n const renderComponent = () => {\n switch (componentType) {\n case 'list':\n return <Report.List report={listReportData} />;\n case 'result':\n return <Report.Result report={reportData} />;\n case 'table':\n return <Report.Table report={tableReportData} />;\n case 'part':\n return <Report.Part report={partReportData} />;\n default:\n return <Report.List report={listReportData} />;\n }\n };\n\n return (\n <Flex vertical gap={16}>\n {/ \u63a7\u5236\u9762\u677f /}\n <div style={{ background: '#f5f5f5', padding: '16px', borderRadius: '8px' }}>\n <span style={{ marginRight: 12 }}>\u5b50\u7ec4\u4ef6\u7c7b\u578b\uff1a</span>\n <Radio.Group value={componentType} onChange={(e) => setComponentType(e.target.value)}>\n <Radio.Button value=\"list\">Report.List</Radio.Button>\n <Radio.Button value=\"result\">Report.Result</Radio.Button>\n <Radio.Button value=\"table\">Report.Table</Radio.Button>\n <Radio.Button value=\"part\">Report.Part</Radio.Button>\n </Radio.Group>\n </div>\n\n {/ \u7ec4\u4ef6\u5c55\u793a\u533a /}\n <Space direction=\"vertical\" size={24}>\n <Report title=\"\ud83d\udcc4 \u5458\u5de5\u5e74\u5ea6\u7ee9\u6548\u8bc4\u4f30\u62a5\u544a\" subtitle=\"2024\u5e74\u5ea6 \| \u6280\u672f\u7814\u53d1\u4e2d\u5fc3 \| \u524d\u7aef\u67b6\u6784\u7ec4\">\n {renderComponent()}\n </Report>\n </Space>\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_InfoPage",packageName:"@kne/info-page",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u8bc4\u5206\u5c55\u793a",description:"\u652f\u6301\u81ea\u5b9a\u4e49\u603b\u5206\u548c\u95f4\u8ddd\u7684\u661f\u7ea7\u8bc4\u5206\u7ec4\u4ef6",code:'const { Score } = _InfoPage;\nconst { Flex, Badge, Card, Divider, Tag, Space } = antd;\n\nconst BaseExample = () => {\n return (\n <Flex vertical gap={16}>\n {/ \u57fa\u7840\u7528\u6cd5 /}\n <Card title="\u57fa\u7840\u8bc4\u5206" size="small">\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Flex gap={24} align="center">\n <span>\u4ea7\u54c1\u8bc4\u5206\uff1a</span>\n <Score value={5} />\n </Flex>\n <Flex gap={24} align="center">\n <span>\u670d\u52a1\u8d28\u91cf\uff1a</span>\n <Score value={4} />\n </Flex>\n <Flex gap={24} align="center">\n <span>\u7269\u6d41\u901f\u5ea6\uff1a</span>\n <Score value={3} />\n </Flex>\n <Flex gap={24} align="center">\n <span>\u6027\u4ef7\u6bd4\uff1a</span>\n <Score value={2} />\n </Flex>\n <Flex gap={24} align="center">\n <span>\u7528\u6237\u6ee1\u610f\uff1a</span>\n <Score value={1} />\n </Flex>\n </Space>\n </Card>\n\n <Divider />\n\n {/ \u81ea\u5b9a\u4e49\u603b\u5206 /}\n <Card title="\u81ea\u5b9a\u4e49\u603b\u5206" size="small">\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Flex gap={24} align="center">\n <span>3\u5206\u5236\uff1a</span>\n <Score value={0} total={3} />\n <Score value={1} total={3} />\n <Score value={2} total={3} />\n <Score value={3} total={3} />\n </Flex>\n <Flex gap={24} align="center">\n <span>4\u5206\u5236\uff1a</span>\n <Score value={1} total={4} />\n <Score value={2} total={4} />\n <Score value={3} total={4} />\n <Score value={4} total={4} />\n </Flex>\n <Flex gap={24} align="center">\n <span>5\u5206\u5236\uff1a</span>\n <Score value={2} total={5} />\n <Score value={3} total={5} />\n <Score value={4} total={5} />\n <Score value={5} total={5} />\n </Flex>\n </Space>\n </Card>\n\n <Divider />\n\n {/ \u65e0\u95f4\u8ddd /}\n <Card title="\u7d27\u51d1\u6a21\u5f0f\uff08gap=0\uff09" size="small">\n <Flex gap={24} align="center">\n <Score value={1} total={5} gap={0} />\n <Score value={2} total={5} gap={0} />\n <Score value={3} total={5} gap={0} />\n <Score value={4} total={5} gap={0} />\n <Score value={5} total={5} gap={0} />\n </Flex>\n </Card>\n\n <Divider />\n\n {/ \u4e1a\u52a1\u573a\u666f /}\n <Card title="\u4e1a\u52a1\u573a\u666f\u793a\u4f8b" size="small">\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <div style={{ padding: \'8px 0\' }}>\n <Flex justify="space-between" align="center" style={{ marginBottom: 8 }}>\n <span>\u5546\u54c1\u540d\u79f0</span>\n <Tag color="blue">\u65b0\u54c1\u4e0a\u5e02</Tag>\n </Flex>\n <Flex justify="space-between" align="center" style={{ marginBottom: 4 }}>\n <span style={{ color: \'#999\', fontSize: 12 }}>\u7528\u6237\u8bc4\u4ef7</span>\n <Badge count={128} showZero />\n </Flex>\n <Flex justify="space-between" align="center">\n <span style={{ fontSize: 14, fontWeight: 500 }}>Apple iPhone 15 Pro</span>\n <Score value={5} />\n </Flex>\n </div>\n\n <div style={{ padding: \'8px 0\', borderTop: \'1px solid #f0f0f0\' }}>\n <Flex justify="space-between" align="center" style={{ marginBottom: 4 }}>\n <span style={{ color: \'#999\', fontSize: 12 }}>\u5546\u54c1\u8bc4\u5206</span>\n <span style={{ fontSize: 12, color: \'#ff4d4f\' }}>4.8/5.0</span>\n </Flex>\n <Flex justify="space-between" align="center">\n <span style={{ fontSize: 14 }}>\u7efc\u5408\u5f97\u5206</span>\n <Score value={4} total={5} />\n </Flex>\n </div>\n </Space>\n </Card>\n\n <Divider />\n\n {/ \u6240\u6709\u8bc4\u5206\u5c55\u793a /}\n <Card title="\u5b8c\u6574\u8bc4\u5206\u5c55\u793a" size="small">\n <Flex wrap="wrap" gap={16}>\n {Array.from({ length: 6 }).map((_, index) => (\n <Flex key={index} vertical align="center" gap={4}>\n <Score value={index} />\n <span style={{ fontSize: 12, color: \'#999\' }}>{index}\u5206</span>\n </Flex>\n ))}\n </Flex>\n </Card>\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_InfoPage",packageName:"@kne/info-page",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u683c\u5f0f\u5316\u89c6\u56fe",description:"\u5c55\u793aformatView\u5de5\u5177\u51fd\u6570\u7684\u5404\u79cd\u683c\u5f0f\u5316\u7528\u6cd5",code:"const { formatView } = _InfoPage;\nconst { Flex, Space, Tag, Badge } = antd;\n\n// \u6f14\u793a formatView \u5de5\u5177\u51fd\u6570\u7684\u4f7f\u7528\nconst FormatDemo = () => {\n const demoData = {\n orderDate: '2024-01-15T10:30:00',\n deliveryDate: '2024-01-20',\n serviceDateRange: ['2024-01-01', '2024-12-31'],\n isVip: true,\n isActivated: false,\n userCount: 15678,\n totalAmount: 99999.99,\n discountRate: 0.085,\n completionRate: 85.67,\n phoneNumber: '13800138000'\n };\n\n // \u81ea\u5b9a\u4e49\u683c\u5f0f\u5316\u51fd\u6570\n const formatPhone = (val) => {\n if (!val) return '-';\n return val.replace(/(d{3})(d{4})(d{4})/, '$1-$2-$3');\n };\n\n return (\n <Flex vertical gap={16}>\n <div style={{ background: '#f5f5f5', padding: '16px', borderRadius: '8px' }}>\n <h4 style={{ margin: '0 0 12px 0' }}>formatView \u5de5\u5177\u51fd\u6570\u6f14\u793a</h4>\n <Space direction=\"vertical\" size={8} style={{ width: '100%' }}>\n <Flex justify=\"space-between\" align=\"center\">\n <span><strong>datetime:</strong></span>\n <span>{formatView(demoData.orderDate, 'datetime')} \u2192 {formatView(demoData.orderDate, 'datetime-YYYY\u5e74MM\u6708DD\u65e5 HH:mm')}</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span><strong>date:</strong></span>\n <span>{formatView(demoData.deliveryDate, 'date')} \u2192 {formatView(demoData.deliveryDate, 'date-YYYY/MM/DD')}</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span><strong>dateRange:</strong></span>\n <span>{formatView(demoData.serviceDateRange, 'dateRange')}</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span><strong>boolean:</strong></span>\n <Flex gap={8}>\n <span>VIP\u5ba2\u6237: {formatView(demoData.isVip, 'boolean-\u662f/\u5426')}</span>\n <span>\u5df2\u6fc0\u6d3b: {formatView(demoData.isActivated, 'boolean-\u662f/\u5426')}</span>\n </Flex>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span><strong>number:</strong></span>\n <span>{formatView(demoData.userCount, 'number-useGrouping:true')} \u7528\u6237</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span><strong>money:</strong></span>\n <span style={{ color: '#f5222d', fontWeight: 'bold' }}>{formatView(demoData.totalAmount, 'money-\u5143')}</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span><strong>discount:</strong></span>\n <span>\u6298\u6263: {formatView(demoData.discountRate 100, 'number-maximumFractionDigits:1-suffix:\u6298')}</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span><strong>percent:</strong></span>\n <span>\u5b8c\u6210\u7387: {formatView(demoData.completionRate, 'number-maximumFractionDigits:2-suffix:%')}</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span><strong>custom:</strong></span>\n <span>{formatPhone(demoData.phoneNumber)}</span>\n </Flex>\n </Space>\n </div>\n\n {/* \u5b9e\u9645\u5e94\u7528\u573a\u666f\u6f14\u793a /}\n <div style={{ background: '#fff', padding: '16px', borderRadius: '8px', border: '1px solid #e8e8e8' }}>\n <h4 style={{ margin: '0 0 12px 0' }}>\u5b9e\u9645\u5e94\u7528\u573a\u666f\uff1a\u8ba2\u5355\u8be6\u60c5</h4>\n <Flex vertical gap={8}>\n <Flex justify=\"space-between\" align=\"center\">\n <span style={{ color: '#666' }}>\u8ba2\u5355\u7f16\u53f7</span>\n <span>ORD20240115001</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span style={{ color: '#666' }}>\u4e0b\u5355\u65f6\u95f4</span>\n <span>{formatView(demoData.orderDate, 'datetime')}</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span style={{ color: '#666' }}>\u9884\u8ba1\u9001\u8fbe</span>\n <span>{formatView(demoData.deliveryDate, 'date-YYYY\u5e74MM\u6708DD\u65e5')}</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span style={{ color: '#666' }}>\u670d\u52a1\u671f\u9650</span>\n <span>{formatView(demoData.serviceDateRange, 'dateRange')}</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span style={{ color: '#666' }}>\u5ba2\u6237\u7c7b\u578b</span>\n <Tag color={demoData.isVip ? 'gold' : 'default'}>{formatView(demoData.isVip, 'boolean-VIP/\u666e\u901a')}</Tag>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span style={{ color: '#666' }}>\u8ba2\u5355\u91d1\u989d</span>\n <span style={{ color: '#f5222d', fontSize: '18px', fontWeight: 'bold' }}>\n {formatView(demoData.totalAmount, 'money-\u5143')}\n </span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span style={{ color: '#666' }}>\u4f18\u60e0\u6298\u6263</span>\n <span style={{ color: '#52c41a' }}>{formatView(demoData.discountRate 100, 'number-maximumFractionDigits:1-suffix:\u6298')}</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span style={{ color: '#666' }}>\u8ba2\u5355\u72b6\u6001</span>\n <Badge status={demoData.completionRate >= 100 ? 'success' : 'processing'} text={demoData.completionRate >= 100 ? '\u5df2\u5b8c\u6210' : '\u5904\u7406\u4e2d'} />\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span style={{ color: '#666' }}>\u5b8c\u6210\u8fdb\u5ea6</span>\n <span>{formatView(demoData.completionRate, 'number-maximumFractionDigits:2-suffix:%')}</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span style={{ color: '#666' }}>\u8054\u7cfb\u7535\u8bdd</span>\n <span>{formatPhone(demoData.phoneNumber)}</span>\n </Flex>\n </Flex>\n </div>\n </Flex>\n );\n};\n\nconst BaseExample = () => {\n return (\n <Flex vertical gap={24}>\n <FormatDemo />\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_InfoPage",packageName:"@kne/info-page",component:a},{name:"antd",packageName:"antd",component:d}]}]}}},46312(n,t,e){e.d(t,{A:()=>c});var a={};e.r(a),e.d(a,{default:()=>i});var d={};e.r(d),e.d(d,{default:()=>s});var o=e(47458),r=e(72752),l=e(55199);const i={ButtonText:"confirm"},s={ButtonText:"\u786e\u5b9a"},c={name:"Intl",summary:"<p>\u652f\u6301\u7cfb\u7edf\u56fd\u9645\u5316</p>",api:"<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n</table>",example:{isFull:!1,className:"",style:"",list:[{title:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u6807\u9898",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:"const {FormattedMessage, IntlProvider} = _Intl;\nconst {PureGlobal} = global;\nconst {Select, Space} = antd;\nconst {default: en} = localeEN;\nconst {default: cn} = localeCN;\nconst {useState} = React;\nconst BaseExample = () => {\n const [locale, setLocale] = useState('zh-CN');\n return (<Space>\n <Select value={locale} onChange={setLocale}\n options={['zh-CN', 'en-US'].map(key => ({value: key, label: key}))}/>\n <PureGlobal\n preset={{\n locale\n }}\n >\n <IntlProvider locale={locale} importMessages={locale => {\n return {\n default: {\n 'zh-CN': cn, 'en-US': en\n }[locale]\n };\n }}>\n <FormattedMessage defaultMessage=\"\u6309\u94ae\" id=\"ButtonText\">\n {text => <div>{text}</div>}\n </FormattedMessage>\n </IntlProvider>\n\n </PureGlobal>\n </Space>);\n};\n\nrender(<BaseExample/>);\n\n",scope:[{name:"_Intl",packageName:"@components/Intl",component:o},{name:"global",packageName:"@components/Global",component:r},{name:"antd",packageName:"antd",component:l},{name:"localeEN",packageName:"@components/Intl/doc/locale/en-US",component:a},{name:"localeCN",packageName:"@components/Intl/doc/locale/zh-CN",component:d}]}]}}},21763(n,t,e){e.d(t,{A:()=>r});var a=e(53132),d=e(72752),o=e(55199);const r={name:"Layout",summary:"<h3>\u4f55\u65f6\u4f7f\u7528</h3>\n<p>\u6bcf\u4e2a\u767b\u5f55\u540e\u7684\u7cfb\u7edf\u9875\u9762\u90fd\u5e94\u8be5\u5728Layout\u7684\u6846\u67b6\u4e4b\u4e0b\uff0c\u5b83\u5b9a\u4e49\u4e86\u9875\u9762\u7684\u57fa\u672c\u6846\u67b6\u3002\u6839\u636e\u8bbe\u8ba1\u5bf9\u4e8e\u9875\u9762\u7684\u4e0d\u540c\u8981\u6c42\uff0c\u9002\u5f53\u9009\u62e9\u4e0d\u540c\u7684\u7ec4\u5408</p>\n<h3>\u7279\u70b9</h3>\n<p>Layout\u5c06\u6574\u4e2a\u9875\u9762\u5212\u5206\u6210\u4ee5\u4e0b\u51e0\u4e2a\u533a\u57df</p>\n<ol>\n<li>\u5bfc\u822a\u533a</li>\n<li>\u5185\u5bb9\u533a</li>\n<li>\u5de6\u83dc\u5355\u533a</li>\n<li>\u53f3\u64cd\u4f5c\u533a</li>\n<li>\u9875\u5934\u533a</li>\n<li>\u9875\u5934\u4fe1\u606f\u533a</li>\n<li>\u9875\u9762\u6807\u9898\u533a</li>\n</ol>\n<p>\u901a\u8fc7\u7ed9Page\u914d\u7f6e\u4e0d\u540c\u7684\u53c2\u6570\u5b9e\u73b0\u4e0d\u540c\u533a\u57df\u7684\u663e\u793a</p>\n<h3>\u6ce8\u610f</h3>\n<ul>\n<li>Page\u7684name\u53c2\u6570\u5fc5\u987b\u8981\u4f20\uff0c\u7528\u6765\u5728\u9875\u9762\u8df3\u8f6c\u65f6\u786e\u5b9aPage\u662f\u4e0d\u662f\u540c\u4e00\u4e2a\uff0c\u51b3\u5b9a\u7740Page\u662f\u5426\u8d70install\u5468\u671f</li>\n<li>Page\u7ec4\u4ef6\u7684\u53c2\u6570\u662f\u901a\u8fc7Context\u4fdd\u5b58\u5728Layout\u4e2d\u7684\uff0c\u8fd9\u6837\u505a\u7684\u76ee\u7684\u662f\u4e3a\u4e86\u8ba9\u9875\u9762\u8df3\u8f6c\u65f6\uff0c\u9664\u9875\u9762\u533a\u4ee5\u5916\u7684\u533a\u57df\u5728\u524d\u540e\u4fe9\u9875\u9762\u5dee\u522b\u4e0d\u5927\u7684\u60c5\u51b5\u4e0b\u8d70\u66f4\u65b0\u5468\u671f\u800c\u4e0d\u662finstall\u5468\u671f\uff0c\u4ee5\u6b64\u5e26\u6765\u66f4\u5feb\u7684\u6e32\u67d3\u901f\u5ea6\u907f\u514d\u4e0d\u5fc5\u8981\u7684\u91cd\u590d\u5b89\u88c5\u548c\u5378\u8f7d</li>\n<li>\u8bf7\u5c3d\u91cf\u901a\u8fc7Page\u63d0\u4f9b\u7684\u53c2\u6570\u6765\u914d\u7f6e\u51fa\u8bbe\u8ba1\u8981\u6c42\u7684\u9875\u9762\uff0c\u4e0d\u8981\u81ea\u884c\u7528css\u5b9e\u73b0\uff0c\u4ee5\u4fbf\u4e8eLayout\u7ec4\u4ef6\u80fd\u4ece\u6574\u4f53\u63a7\u5236\u9875\u9762\u7684\u57fa\u672c\u5f62\u5f0f\u548c\u4e0d\u540c\u533a\u57df\u7684padding\u548cmargin\uff0c\u8ba9\u7cfb\u7edf\u66f4\u52a0\u7edf\u4e00\u5316\u6807\u51c6\u5316</li>\n</ul>",api:"<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>navigation</td>\n<td>\u5bfc\u822a\u53c2\u6570\u53c2\u8003 Navigation \u7ec4\u4ef6\u53c2\u6570</td>\n<td>object</td>\n<td>-</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u4e00\u822c\u653e\u7f6ePage\u7ec4\u4ef6</td>\n<td>jsx</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>Page</h3>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>menu</td>\n<td>\u5de6\u83dc\u5355\u533a\u5185\u5bb9</td>\n<td>jsx</td>\n<td>-</td>\n</tr>\n<tr>\n<td>filter</td>\n<td>\u9875\u9762\u6807\u9898\u4f4d\u7f6e\u7b5b\u9009\u5668\u53c2\u6570,\u53c2\u8003 Filter \u7ec4\u4ef6\u53c2\u6570</td>\n<td>object</td>\n<td>-</td>\n</tr>\n<tr>\n<td>menuOpen</td>\n<td>\u5de6\u83dc\u5355\u662f\u5426\u9ed8\u8ba4\u6253\u5f00</td>\n<td>boolean</td>\n<td>true</td>\n</tr>\n<tr>\n<td>menuWidth</td>\n<td>\u5de6\u83dc\u5355\u5bbd\u5ea6</td>\n<td>string</td>\n<td>240px</td>\n</tr>\n<tr>\n<td>menuFixed</td>\n<td>\u5de6\u83dc\u5355\u662f\u5426fixed\u5e03\u5c40</td>\n<td>boolean</td>\n<td>true</td>\n</tr>\n<tr>\n<td>menuCloseButton</td>\n<td>\u63a7\u5236\u5de6\u83dc\u5355\u663e\u793a\u9690\u85cf\u7684\u6309\u94ae\u662f\u5426\u663e\u793a</td>\n<td>boolean</td>\n<td>true</td>\n</tr>\n<tr>\n<td>header</td>\n<td>\u9875\u5934\u533a\u5185\u5bb9</td>\n<td>jsx</td>\n<td>-</td>\n</tr>\n<tr>\n<td>headerFixed</td>\n<td>\u9875\u5934\u533a\u662f\u5426fixed\u5e03\u5c40</td>\n<td>boolean</td>\n<td>true</td>\n</tr>\n<tr>\n<td>headerInfo</td>\n<td>\u9875\u5934\u4fe1\u606f\u533a\u5185\u5bb9</td>\n<td>jsx</td>\n<td>-</td>\n</tr>\n<tr>\n<td>backUrl</td>\n<td>\u53f3\u4fa7\u5185\u5bb9\u533a\u7684\u6807\u9898\u524d\u5c55\u793a\u8fd4\u56de\u6309\u94ae\uff0c\u5e76\u8fd4\u56de\u5230\u8be5url</td>\n<td>\u53c2\u8003 useNavigate</td>\n<td>-</td>\n</tr>\n<tr>\n<td>title</td>\n<td>\u9875\u9762\u6807\u9898</td>\n<td>string,jsx</td>\n<td>-</td>\n</tr>\n<tr>\n<td>titleExtra</td>\n<td>\u9875\u9762\u6807\u9898\u533a\u53f3\u4fa7\u4f4d\u7f6e\u5185\u5bb9</td>\n<td>jsx</td>\n<td>-</td>\n</tr>\n<tr>\n<td>titleLeftExtra</td>\n<td>\u9875\u9762\u6807\u9898\u533a\u5de6\u4fa7\u4f4d\u7f6e\u5185\u5bb9</td>\n<td>jsx</td>\n<td>-</td>\n</tr>\n<tr>\n<td>noMargin</td>\n<td>\u9875\u9762\u5185\u5bb9\u533a\u662f\u5426\u53bb\u6389Margin</td>\n<td>boolean</td>\n<td>false</td>\n</tr>\n<tr>\n<td>noPadding</td>\n<td>\u9875\u9762\u5185\u5bb9\u533a\u662f\u5426\u53bb\u6389Padding</td>\n<td>boolean</td>\n<td>false</td>\n</tr>\n<tr>\n<td>option</td>\n<td>\u53f3\u64cd\u4f5c\u533a\u5185\u5bb9</td>\n<td>jsx</td>\n<td>-</td>\n</tr>\n<tr>\n<td>optionWidth</td>\n<td>\u53f3\u64cd\u4f5c\u533a\u5bbd\u5ea6</td>\n<td>string</td>\n<td>400px</td>\n</tr>\n<tr>\n<td>optionNoPadding</td>\n<td>\u53f3\u64cd\u4f5c\u533a\u662f\u5426\u53bb\u6389Padding</td>\n<td>boolean</td>\n<td>false</td>\n</tr>\n<tr>\n<td>optionFixed</td>\n<td>\u53f3\u64cd\u4f5c\u533a\u662f\u5426fixed\u5e03\u5c40</td>\n<td>boolean</td>\n<td>false</td>\n</tr>\n<tr>\n<td>optionFooter</td>\n<td>\u53f3\u64cd\u4f5c\u533a\u5e95\u90e8\u5185\u5bb9</td>\n<td>jsx</td>\n<td>-</td>\n</tr>\n<tr>\n<td>openFeatures</td>\n<td>Page\u662f\u5426\u542f\u7528Features\uff0c\u542f\u7528\u65f6\u5982\u679c\u914d\u7f6e\u6587\u4ef6\u4e2d\u6ca1\u6709\u8be5\u6a21\u5757id\u5219\u5224\u65ad\u4e3a\u6a21\u5757\u5173\u95ed\uff0c\u4f1a\u5c06name\u4f5c\u4e3aFeatures\u7684id\u8fdb\u884c\u8bbe\u7f6e</td>\n<td>boolean</td>\n<td>false</td>\n</tr>\n</tbody>\n</table>\n<h3>Affix</h3>\n<p>\u53ef\u4ee5\u63a7\u5236\u5176\u4e2d\u7684\u5185\u5bb9\u662f\u5426\u662ffixed\u5e03\u5c40</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>isFixed</td>\n<td>\u5185\u5bb9\u662f\u5426fixed\u5e03\u5c40</td>\n<td>boolean</td>\n<td>true</td>\n</tr>\n<tr>\n<td>offsetTop</td>\n<td>\u8ddd\u79bb\u7a97\u53e3\u9876\u90e8\u8fbe\u5230\u6307\u5b9a\u504f\u79fb\u91cf\u540e\u89e6\u53d1</td>\n<td>number</td>\n<td>0</td>\n</tr>\n<tr>\n<td>offsetBottom</td>\n<td>\u8ddd\u79bb\u7a97\u53e3\u5e95\u90e8\u8fbe\u5230\u6307\u5b9a\u504f\u79fb\u91cf\u540e\u89e6\u53d1</td>\n<td>number</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u56fa\u5b9a\u72b6\u6001\u6539\u53d8\u65f6\u89e6\u53d1\u7684\u56de\u8c03\u51fd\u6570</td>\n<td>function</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>Menu</h3>\n<p>\u663e\u793a\u4e00\u4e2a\u83dc\u5355\uff0c\u6700\u591a\u652f\u6301\u4e24\u7ea7\uff0c\u652f\u6301\u7b2c\u4e00\u7ea7\u5c55\u5f00\u6536\u8d77\uff0c\u652f\u6301\u8def\u5f84\u5339\u914d\u81ea\u52a8\u9ad8\u4eae</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>items</td>\n<td>\u83dc\u5355\u9879</td>\n<td>array[object]</td>\n<td>[]</td>\n</tr>\n<tr>\n<td>items[].label</td>\n<td>\u83dc\u5355\u9879\u663e\u793a\u5185\u5bb9</td>\n<td>jsx</td>\n<td>-</td>\n</tr>\n<tr>\n<td>items[].key</td>\n<td>\u83dc\u5355\u9879\u7684key\u8981\u6c42\u5fc5\u987b\u552f\u4e00</td>\n<td>string</td>\n<td>-</td>\n</tr>\n<tr>\n<td>items[].iconType</td>\n<td>\u83dc\u5355\u9879\u524d\u9762\u7684icon\u7c7b\u578b\u53c2\u8003 Icon\u7ec4\u4ef6\u7684type\u53c2\u6570</td>\n<td>string</td>\n<td>-</td>\n</tr>\n<tr>\n<td>items[].path</td>\n<td>\u83dc\u5355\u9879\u7684\u8def\u5f84</td>\n<td>string</td>\n<td>-</td>\n</tr>\n<tr>\n<td>items[].onClick</td>\n<td>\u83dc\u5355\u9879\u70b9\u51fb\u89e6\u53d1\u4e8b\u4ef6\uff0c\u6ce8\u610f\uff1a\u5982\u679c\u83dc\u5355\u9879\u5df2\u7ecf\u4f20\u5165path\u53c2\u6570\u5219\u8be5\u53c2\u6570\u4e0d\u751f\u6548</td>\n<td>function</td>\n<td>-</td>\n</tr>\n<tr>\n<td>items[].children</td>\n<td>\u83dc\u5355\u9879\u7684\u7b2c\u4e8c\u7ea7\u9879\u5217\u8868\uff0c\u53c2\u8003items\u53c2\u6570\u3002\u6ce8\u610f\u8be5\u7ec4\u4ef6\u53ea\u652f\u6301\u4e24\u7ea7\u83dc\u5355\uff0c\u6240\u4ee5\u8be5\u53c2\u6570\u5185\u90e8\u7684\u83dc\u5355\u9879\u4e0d\u518d\u652f\u6301children\u53c2\u6570</td>\n<td>array[object]</td>\n<td>-</td>\n</tr>\n<tr>\n<td>currentKey</td>\n<td>\u5f53\u524d\u88ab\u9009\u4e2d\u7684\u83dc\u5355\u9879\u7684key\uff0c\u5982\u679c\u83dc\u5355\u9879\u53c8path\u53c2\u6570\uff0c\u4e0d\u9700\u8981\u4f20\u9012\u8be5\u53c2\u6570\uff0c\u7ec4\u4ef6\u4f1a\u6839\u636e\u8def\u7531\u81ea\u52a8\u5224\u65ad\u9009\u4e2d\u9879</td>\n<td>string</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>currentKey\u4ea7\u751f\u4fee\u6539\u65f6\u89e6\u53d1\u51fd\u6570\uff0c\u6ce8\u610f\uff1a\u5982\u679c\u83dc\u5355\u9879\u5df2\u7ecf\u4f20\u5165path\u53c2\u6570\u5219\u8be5\u53c2\u6570\u4e0d\u751f\u6548</td>\n<td>function</td>\n<td>-</td>\n</tr>\n<tr>\n<td>allowCollapsed</td>\n<td>\u662f\u5426\u5141\u8bb8\u4e00\u7ea7\u83dc\u5355\u6536\u8d77</td>\n<td>boolean</td>\n<td>true</td>\n</tr>\n<tr>\n<td>defaultOpenKeys</td>\n<td>\u521d\u59cb\u5c55\u5f00\u7684 SubMenu \u83dc\u5355\u9879 key \u6570\u7ec4</td>\n<td>string[]</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>PermissionsPage</h3>\n<p>\u52a0\u5165\u6743\u9650\u5224\u65ad\u7684Page\uff0c\u9519\u8bef\u7c7b\u578b\u9ed8\u8ba4\u4e3aerror\uff0c\u5373\u5728\u8be5\u9875\u9762\u6ca1\u6709\u6743\u9650\u65f6\u663e\u793a\u9519\u8bef</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>permissions</td>\n<td>\u6743\u9650\u5217\u8868\u53c2\u8003 Permissions \u7ec4\u4ef6\u53c2\u6570</td>\n<td>object</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>",example:{isFull:!0,className:"Layout_ebd9b",style:".Layout_ebd9b .layout-content {\n color: #fff;\n background: var(--primary-color-4);\n height: 100%;\n text-align: center;\n line-height: 300px;\n}\n.Layout_ebd9b .with-title-layout-content {\n height: 100%;\n}\n.Layout_ebd9b .layout-menu {\n background: #ff9c6e;\n color: #fff;\n height: 110vh;\n text-align: center;\n line-height: 300px;\n}\n.Layout_ebd9b .header {\n background: #ff9c6e;\n height: 100px;\n padding: 10px;\n color: #fff;\n}\n.Layout_ebd9b .right-options {\n background: var(--primary-color-4);\n height: 110vh;\n color: #fff;\n}\n.Layout_ebd9b .header-info {\n padding: 10px;\n height: 100px;\n background: var(--primary-color-4);\n color: #fff;\n}",list:[{title:"\u57fa\u7840\u4e0a\u4e0b\u5e03\u5c40",description:"\u5c55\u793a\u6700\u57fa\u7840\u7684\u4e0a\u5bfc\u822a\u680f\uff0c\u4e0b\u5185\u5bb9\u7684\u5e03\u5c40",code:'const { default: Layout, Page } = _Layout;\nconst { PureGlobal } = global;\nconst BaseExample = () => {\n return (\n <PureGlobal\n preset={{\n enums: {\n helperGuide: () => [\n {\n value: "base-detail",\n content: "\u6d4b\u8bd5\u5e2e\u52a9\u6587\u6863",\n url: "/",\n },\n ],\n },\n }}\n >\n <Layout navigation={{ isFixed: false }}>\n <Page name="base" helperGuideName="base-detail">\n <div className="layout-content">\u5185\u5bb9\u533a</div>\n </Page>\n </Layout>\n </PureGlobal>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Layout",packageName:"@components/Layout",component:a},{name:"global",packageName:"@components/Global",component:d}]},{title:"\u5e26\u6709\u5de6\u4fa7\u83dc\u5355\u5e03\u5c40",description:"\u5c55\u793a\u5e26\u6709\u5de6\u4fa7\u83dc\u5355\u5e03\u5c40",code:'const { default: Layout, Page, Menu } = layout;\nconst { Button, Space } = antd;\nconst { PureGlobal } = global;\n\nconst Example = () => {\n return (\n <Layout navigation={{ isFixed: false }}>\n <Page\n name="left-menu"\n menuFixed={false}\n menu={\n <Menu\n items={[\n {\n label: "\u7236\u7ea7\u6807\u98981",\n key: "p-0",\n iconType: "icon-zhanghaodenglu",\n children: [\n {\n label: "\u5b50\u6807\u98981",\n key: "s-0",\n path: "/link1",\n },\n {\n label: "\u5b50\u6807\u98982",\n key: "s-1",\n path: "/link2",\n },\n ],\n },\n {\n label: "\u7236\u7ea7\u6807\u98982",\n key: "p-1",\n iconType: "icon-zhanghaodenglu",\n children: [\n {\n label: "\u5b50\u6807\u98981",\n key: "s-2",\n path: "/link3",\n },\n {\n label: "\u5b50\u6807\u98982",\n key: "s-3",\n path: "/link4",\n },\n ],\n },\n {\n label: "\u7236\u7ea7\u6807\u98983",\n key: "p-2",\n iconType: "icon-zhanghaodenglu",\n path: "/link5",\n },\n ]}\n />\n }\n titleExtra={\n <Space>\n <Button type="primary">\u65b0\u5efa</Button>\n </Space>\n }\n backUrl={"/"}\n title="\u6807\u9898"\n >\n <div className="layout-content with-title-layout-content">\u5185\u5bb9\u533a</div>\n </Page>\n </Layout>\n );\n};\n\nrender(\n <PureGlobal>\n <Example />\n </PureGlobal>\n);\n\n',scope:[{name:"layout",packageName:"@components/Layout",component:a},{name:"antd",packageName:"antd",component:o},{name:"global",packageName:"@components/Global",component:d}]},{title:"\u5de6\u4fa7\u56fa\u5b9a\u5e26Header",description:"\u5c55\u793a\u5e26\u6709header\u7684\u5de6\u4fa7\u56fa\u5b9a\u83dc\u5355\u5e03\u5c40",code:'const { default: Layout, Page } = layout;\nconst { Button, Space } = antd;\nconst { PureGlobal } = global;\n\nconst Example = () => {\n return (\n <Space className="container" direction="vertical">\n <Layout navigation={{ isFixed: false }}>\n <Page\n name="with-header"\n helperGuideName="base-detail"\n menu={<div className="layout-menu">\u5de6\u4fa7\u83dc\u5355\u533a</div>}\n titleExtra={\n <Space>\n <Button type="primary">\u65b0\u5efa</Button>\n </Space>\n }\n title="\u6807\u9898"\n hideCloseSvg={true}\n headerHeight="40px"\n menuFixed={false}\n header={<div className="header">header</div>}\n headerFixed={false}\n headerInfo={<div className="header-info">header info\u533a\u57df</div>}\n >\n <div>\u5185\u5bb9\u533a</div>\n </Page>\n </Layout>\n </Space>\n );\n};\n\nrender(\n <PureGlobal\n preset={{\n enums: {\n helperGuide: () => [\n {\n value: "base-detail",\n content: "\u6d4b\u8bd5\u5e2e\u52a9\u6587\u6863",\n url: "/",\n },\n ],\n },\n }}\n >\n <Example />\n </PureGlobal>\n);\n\n',scope:[{name:"layout",packageName:"@components/Layout",component:a},{name:"antd",packageName:"antd",component:o},{name:"global",packageName:"@components/Global",component:d}]},{title:"\u53f3\u4fa7\u56fa\u5b9a",description:"\u5c55\u793a\u5e26\u6709header\u7684\u53f3\u4fa7\u56fa\u5b9a\u83dc\u5355\u5e03\u5c40",code:'const { default: Layout, Page } = layout;\nconst { Button, Space } = antd;\nconst { PureGlobal } = global;\n\nconst Example = () => {\n return (\n <Layout navigation={{ isFixed: false }}>\n <Page\n name="fix-right-menu"\n optionFixed={false}\n option={<div className="right-options">\u53f3\u4fa7\u64cd\u4f5c\u533a\u57df</div>}\n optionFooter={\n <Space>\n <Button type="primary">\u65b0\u5efa</Button>\n </Space>\n }\n titleExtra={\n <Space>\n <Button type="primary">\u65b0\u5efa</Button>\n </Space>\n }\n title="\u6807\u9898"\n header={<div className="header">header</div>}\n headerFixed={false}\n menuFixed={false}\n >\n <div>\u5185\u5bb9\u533a</div>\n </Page>\n </Layout>\n );\n};\n\nrender(\n <PureGlobal>\n <Example />\n </PureGlobal>\n);\n\n',scope:[{name:"layout",packageName:"@components/Layout",component:a},{name:"antd",packageName:"antd",component:o},{name:"global",packageName:"@components/Global",component:d}]},{title:"\u5e26\u6709filter\u7684\u5217\u8868\u9875",description:"\u5c55\u793a\u5e26\u6709filter\u7684\u5217\u8868\u9875",code:'const { default: Layout, Page } = layout;\nconst {\n InputFilterItem,\n CityFilterItem,\n AdvancedSelectFilterItem,\n UserFilterItem,\n FunctionSelectFilterItem,\n IndustrySelectFilterItem,\n getFilterValue,\n} = filter;\nconst { useState } = React;\nconst { Space, Button } = antd;\nconst { PureGlobal } = global;\nconst BaseExample = () => {\n const [filter, setFilter] = useState([]);\n return (\n <PureGlobal preset={{}}>\n <Layout navigation={{ isFixed: false }}>\n <Page\n name="base"\n helperGuideName="base-detail"\n titleExtra={\n <Space>\n <Button type="primary">\u6dfb\u52a0</Button>\n </Space>\n }\n filter={{\n extraExpand: (\n <Button type="primary" size="small">\n \u8ba2\u9605\u7b5b\u9009\u9879\n </Button>\n ),\n value: filter,\n onChange: (value) => {\n setFilter(value);\n console.log(getFilterValue(value));\n },\n list: [\n [\n <InputFilterItem label="\u6587\u5b57" name="text" />,\n <CityFilterItem label="\u57ce\u5e02" name="city" />,\n <AdvancedSelectFilterItem\n label="\u9ad8\u7ea7\u9009\u62e9"\n name="select"\n api={{\n loader: () => {\n return {\n pageData: [\n { label: "\u7b2c\u4e00\u9879", value: 1 },\n { label: "\u7b2c\u4e8c\u9879", value: 2, disabled: true },\n {\n label: "\u7b2c\u4e09\u9879",\n value: 3,\n },\n ],\n };\n },\n }}\n />,\n <UserFilterItem\n label="\u7528\u6237\u9009\u62e9"\n name="user"\n api={{\n loader: () => {\n return {\n pageData: [\n {\n label: "\u7528\u6237\u4e00",\n value: 1,\n description: "\u6211\u662f\u7528\u6237\u63cf\u8ff0",\n },\n {\n label: "\u7528\u6237\u4e8c",\n value: 2,\n description: "\u6211\u662f\u7528\u6237\u63cf\u8ff0",\n },\n {\n label: "\u7528\u6237\u4e09",\n value: 3,\n description: "\u6211\u662f\u7528\u6237\u63cf\u8ff0",\n },\n ],\n };\n },\n }}\n />,\n <FunctionSelectFilterItem\n label="\u804c\u80fd\u9009\u62e9"\n name="function"\n onlyAllowLastLevel\n single\n />,\n <IndustrySelectFilterItem\n label="\u884c\u4e1a\u9009\u62e9"\n name="industry"\n onlyAllowLastLevel\n />,\n ],\n [\n <UserFilterItem\n label="\u804c\u4f4d\u534f\u52a9\u4eba"\n name="position_user"\n api={{\n loader: () => {\n return {\n pageData: [\n {\n label: "\u7528\u6237\u4e00",\n value: 1,\n description: "\u6211\u662f\u7528\u6237\u63cf\u8ff0",\n },\n {\n label: "\u7528\u6237\u4e8c",\n value: 2,\n description: "\u6211\u662f\u7528\u6237\u63cf\u8ff0",\n },\n {\n label: "\u7528\u6237\u4e09",\n value: 3,\n description: "\u6211\u662f\u7528\u6237\u63cf\u8ff0",\n },\n ],\n };\n },\n }}\n />,\n ],\n ],\n }}\n >\n <div className="layout-content">\u5185\u5bb9\u533a</div>\n </Page>\n </Layout>\n </PureGlobal>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"layout",packageName:"@components/Layout",component:a},{name:"antd",packageName:"antd",component:o},{name:"global",packageName:"@components/Global",component:d},{name:"filter",packageName:"@components/Filter",component:e(77765)}]},{title:"\u5de6\u4fa7\u5bfc\u822a\u83dc\u5355",description:"\u5c55\u793a\u4e00\u4e2a\u5de6\u4fa7\u5bfc\u822a\u83dc\u5355",code:'const { Menu } = layout;\nconst { Space } = antd;\nconst { useState } = React;\n\nconst ControlMenu = () => {\n const [current, setCurrent] = useState();\n return (\n <Menu\n currentKey={current}\n onChange={setCurrent}\n items={[\n {\n label: "\u7236\u7ea7\u6807\u98981",\n key: "p-0",\n iconType: "icon-zhanghaodenglu",\n children: [\n {\n label: "\u5b50\u6807\u98981",\n key: "s-0",\n },\n {\n label: "\u5b50\u6807\u98982",\n key: "s-1",\n },\n ],\n },\n {\n label: "\u7236\u7ea7\u6807\u98982",\n key: "p-1",\n iconType: "icon-zhanghaodenglu",\n children: [\n {\n label: "\u5b50\u6807\u98981",\n key: "s-2",\n },\n {\n label: "\u5b50\u6807\u98982",\n key: "s-3",\n },\n ],\n },\n {\n label: "\u7236\u7ea7\u6807\u98983",\n key: "p-2",\n iconType: "icon-zhanghaodenglu",\n },\n ]}\n />\n );\n};\n\nconst Example = () => {\n return (\n <Space size={10}>\n <Menu\n items={[\n {\n label: "\u7236\u7ea7\u6807\u98981",\n key: "p-0",\n iconType: "icon-zhanghaodenglu",\n children: [\n {\n label: "\u5b50\u6807\u98981",\n key: "s-0",\n path: "/link1",\n },\n {\n label: "\u5b50\u6807\u98982",\n key: "s-1",\n path: "/link2",\n },\n ],\n },\n {\n label: "\u7236\u7ea7\u6807\u98982",\n key: "p-1",\n iconType: "icon-zhanghaodenglu",\n children: [\n {\n label: "\u5b50\u6807\u98981",\n key: "s-2",\n path: "/link3",\n },\n {\n label: "\u5b50\u6807\u98982",\n key: "s-3",\n path: "/link4",\n },\n ],\n },\n {\n label: "\u7236\u7ea7\u6807\u98983",\n key: "p-2",\n iconType: "icon-zhanghaodenglu",\n path: "/link5",\n },\n ]}\n />\n <Menu\n items={[\n {\n iconType: "icon-zhanghaodenglu",\n label: "\u5b50\u6807\u98981",\n key: "s-0",\n path: "/link1",\n },\n {\n iconType: "icon-zhanghaodenglu",\n label: "\u5b50\u6807\u98982",\n key: "s-1",\n path: "/link2",\n },\n {\n iconType: "icon-zhanghaodenglu",\n label: "\u5b50\u6807\u98981",\n key: "s-2",\n path: "/link3",\n },\n {\n iconType: "icon-zhanghaodenglu",\n label: "\u5b50\u6807\u98982",\n key: "s-3",\n path: "/link4",\n },\n ]}\n />\n <Menu\n allowCollapsed={false}\n items={[\n {\n label: "\u7236\u7ea7\u6807\u98981",\n key: "p-0",\n iconType: "icon-zhanghaodenglu",\n children: [\n {\n label: "\u5b50\u6807\u98981",\n key: "s-0",\n path: "/link1",\n },\n {\n label: "\u5b50\u6807\u98982",\n key: "s-1",\n path: "/link2",\n },\n ],\n },\n {\n label: "\u7236\u7ea7\u6807\u98982",\n key: "p-1",\n iconType: "icon-zhanghaodenglu",\n children: [\n {\n label: "\u5b50\u6807\u98981",\n key: "s-2",\n path: "/link3",\n },\n {\n label: "\u5b50\u6807\u98982",\n key: "s-3",\n path: "/link4",\n },\n ],\n },\n {\n label: "\u7236\u7ea7\u6807\u98983",\n key: "p-2",\n iconType: "icon-zhanghaodenglu",\n path: "/link5",\n },\n ]}\n />\n <ControlMenu />\n </Space>\n );\n};\n\nrender(<Example />);\n\n',scope:[{name:"layout",packageName:"@components/Layout",component:a},{name:"antd",packageName:"antd",component:o}]},{title:"PageHeader",description:"\u9875\u9762\u5934",code:'const { default: Layout, Page, Menu, PageHeader } = layout;\n\nconst Example = () => {\n return (\n <Layout navigation={{ isFixed: false }}>\n <Page\n menu={<div className="layout-menu">\u5de6\u4fa7\u83dc\u5355\u533a</div>}\n title="\u6807\u9898"\n hideCloseSvg={true}\n menuFixed={false}\n name="pageHeaderLayout"\n header={\n <PageHeader\n iconType="icon-color-shenpi-biaoti"\n title="\u8be6\u60c5\u9875\u540d\u79f0"\n info="\u7f16\u53f7:85767"\n options={[\n {\n children: "\u65b0\u5efa",\n },\n {\n children: "\u64cd\u4f5c1",\n },\n {\n children: "\u64cd\u4f5c2",\n },\n {\n children: "\u64cd\u4f5c3",\n },\n {\n children: "\u64cd\u4f5c4",\n },\n ]}\n tags={["\u8f85\u52a9\u4fe1\u606f", "\u8f85\u52a9\u4fe1\u606f", "\u8f85\u52a9\u4fe1\u606f", "\u8f85\u52a9\u4fe1\u606f"]}\n />\n }\n headerFixed={false}\n >\n <div>\u5185\u5bb9\u533a</div>\n </Page>\n </Layout>\n );\n};\n\nrender(<Example />);\n\n',scope:[{name:"layout",packageName:"@components/Layout",component:a},{name:"antd",packageName:"antd",component:o}]}]}}},45516(n,t,e){e.d(t,{A:()=>a});const a={name:"Menu",summary:"<p>\u652f\u6301\u8fdc\u7a0b\u52a0\u8f7d\u6570\u636e\u7684\u83dc\u5355</p>",api:"<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n</table>",example:{isFull:!1,className:"",style:"",list:[{title:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u6807\u9898",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const { default: Menu } = _Menu;\nconst { Space } = antd;\nconst { useState } = React;\n\nconst ControlMenu = () => {\n const [current, setCurrent] = useState("s-0");\n return (\n <Menu\n currentKey={current}\n onChange={setCurrent}\n items={[\n {\n label: "\u7236\u7ea7\u6807\u98981",\n key: "p-0",\n iconType: "icon-zhanghaodenglu",\n children: [\n {\n label: "\u5b50\u6807\u98981",\n key: "s-0",\n },\n {\n label: "\u5b50\u6807\u98982",\n key: "s-1",\n },\n ],\n },\n {\n label: "\u7236\u7ea7\u6807\u98982",\n key: "p-1",\n iconType: "icon-zhanghaodenglu",\n children: [\n {\n label: "\u5b50\u6807\u98981",\n key: "s-2",\n },\n {\n label: "\u5b50\u6807\u98982",\n key: "s-3",\n },\n ],\n },\n {\n label: "\u7236\u7ea7\u6807\u98983",\n key: "p-2",\n iconType: "icon-zhanghaodenglu",\n },\n ]}\n />\n );\n};\nconst BaseExample = () => {\n return (\n <Space>\n <div style={{ maxWidth: "200px" }}>\n <Menu\n defaultItems={[\n {\n label: "\u7236\u7ea7\u6807\u98981",\n iconType: "icon-zhanghaodenglu",\n children: [\n {\n label:\n "\u5b50\u6807\u98981\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u5b50\u6807\u98981\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u5b50\u6807\u98981\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u5b50\u6807\u98981\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7\u957f\u8d85\u7ea7",\n path: "/link1",\n },\n {\n label: "\u5b50\u6807\u98982",\n path: "/link2",\n },\n ],\n },\n {\n label: "\u7236\u7ea7\u6807\u98982",\n iconType: "icon-zhanghaodenglu",\n children: [\n {\n label: "\u5b50\u6807\u98981",\n path: "/link3",\n },\n {\n label: "\u5b50\u6807\u98982",\n path: "/link4",\n },\n ],\n },\n {\n label: "\u7236\u7ea7\u6807\u98983",\n iconType: "icon-zhanghaodenglu",\n fetchOptions: {\n loader: () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve([\n {\n label: "\u5b50\u6807\u98981",\n path: "/link5",\n },\n {\n label: "\u5b50\u6807\u98982",\n path: "/link6",\n },\n ]);\n }, 1000);\n });\n },\n },\n },\n ]}\n />\n </div>\n\n <Menu\n items={[\n {\n iconType: "icon-zhanghaodenglu",\n label: "\u5b50\u6807\u98981",\n key: "s-0",\n path: "/link1",\n },\n {\n iconType: "icon-zhanghaodenglu",\n label: "\u5b50\u6807\u98982",\n key: "s-1",\n path: "/link2",\n },\n {\n iconType: "icon-zhanghaodenglu",\n label: "\u5b50\u6807\u98981",\n key: "s-2",\n path: "/link3",\n },\n {\n iconType: "icon-zhanghaodenglu",\n label: "\u5b50\u6807\u98982",\n key: "s-3",\n path: "/link4",\n },\n ]}\n />\n <Menu\n allowCollapsed={false}\n items={[\n {\n label: "\u7236\u7ea7\u6807\u98981",\n key: "p-0",\n iconType: "icon-zhanghaodenglu",\n children: [\n {\n label: "\u5b50\u6807\u98981",\n key: "s-0",\n path: "/link1",\n },\n {\n label: "\u5b50\u6807\u98982",\n key: "s-1",\n path: "/link2",\n },\n ],\n },\n {\n label: "\u7236\u7ea7\u6807\u98982",\n key: "p-1",\n iconType: "icon-zhanghaodenglu",\n children: [\n {\n label: "\u5b50\u6807\u98981",\n key: "s-2",\n path: "/link3",\n },\n {\n label: "\u5b50\u6807\u98982",\n key: "s-3",\n path: "/link4",\n },\n ],\n },\n {\n label: "\u7236\u7ea7\u6807\u98983",\n key: "p-2",\n iconType: "icon-zhanghaodenglu",\n path: "/link5",\n },\n ]}\n />\n <Menu\n allowCollapsed={false}\n defaultItems={[\n {\n label: "\u7236\u7ea7\u6807\u98981",\n iconType: "icon-zhanghaodenglu",\n children: [\n {\n label: "\u5b50\u6807\u98981",\n path: "/link1",\n },\n {\n label: "\u5b50\u6807\u98982",\n path: "/link2",\n },\n ],\n },\n {\n label: "\u7236\u7ea7\u6807\u98982",\n iconType: "icon-zhanghaodenglu",\n children: [\n {\n label: "\u5b50\u6807\u98981",\n path: "/link3",\n },\n {\n label: "\u5b50\u6807\u98982",\n path: "/link4",\n },\n ],\n },\n {\n label: "\u7236\u7ea7\u6807\u98983",\n iconType: "icon-zhanghaodenglu",\n fetchOptions: {\n loader: () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve([\n {\n label: "\u5b50\u6807\u98981",\n path: "/link5",\n },\n {\n label: "\u5b50\u6807\u98982",\n path: "/link6",\n },\n ]);\n }, 1000);\n });\n },\n },\n },\n ]}\n />\n <Menu\n defaultItems={[\n {\n label: "\u7236\u7ea7\u6807\u98981",\n children: [\n {\n label: "\u5b50\u6807\u98981",\n path: "/link1",\n },\n {\n label: "\u5b50\u6807\u98982",\n path: "/link2",\n },\n ],\n },\n {\n label: "\u7236\u7ea7\u6807\u98982",\n children: [\n {\n label: "\u5b50\u6807\u98981",\n path: "/link3",\n },\n {\n label: "\u5b50\u6807\u98982",\n path: "/link4",\n },\n ],\n },\n ]}\n />\n <ControlMenu />\n </Space>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Menu",packageName:"@components/Menu",component:e(28148)},{name:"antd",packageName:"antd",component:e(55199)}]}]}}},28928(n,t,e){e.d(t,{A:()=>i});var a=e(3382),d=e(72752),o=e(55199),r=e(87558),l=e(82723);const i={name:"Modal",summary:"<h3>\u4f55\u65f6\u4f7f\u7528</h3>\n<p>\u9700\u8981\u7528\u6237\u5904\u7406\u4e8b\u52a1\uff0c\u53c8\u4e0d\u5e0c\u671b\u8df3\u8f6c\u9875\u9762\u4ee5\u81f4\u6253\u65ad\u5de5\u4f5c\u6d41\u7a0b\u65f6\uff0c\u53ef\u4ee5\u5728\u5f53\u524d\u9875\u9762\u6b63\u4e2d\u6253\u5f00\u4e00\u4e2a\u6d6e\u5c42\uff0c\u627f\u8f7d\u76f8\u5e94\u7684\u64cd\u4f5c\u3002</p>\n<h3>\u7279\u70b9</h3>\n<p>\u8be5\u7ec4\u4ef6\u662fantd Modal\u7ec4\u4ef6\u7684\u518d\u5c01\u88c5\uff1a</p>\n<ul>\n<li>\u4fee\u6539\u4e86footer\u90e8\u5206\u7684\u8bbe\u7f6e\u903b\u8f91,\u80fd\u66f4\u52a0\u7b80\u5355\u7684\u5b9a\u4e49footer\u533a\u57df\u7684\u529f\u80fd</li>\n<li>\u6dfb\u52a0\u4e86withDecorator\u53ef\u4ee5\u66f4\u52a0\u65b9\u4fbf\u7684\u5904\u7406Modal\u5916\u5c42\u7684\u663e\u793a\u903b\u8f91</li>\n<li>\u6269\u5c55\u4e86\u7528\u4e8e\u65b9\u6cd5\u8c03\u7528\u7684useModal\u7684hooks\uff0c\u53ef\u4ee5\u901a\u8fc7hooks\u83b7\u5f97\u4e00\u4e2aModal\u7684\u8c03\u7528\u65b9\u6cd5\uff0c\u5e76\u4e14\u4fdd\u8bc1\u5176\u548cModal\u7ec4\u4ef6\u5f0f\u8c03\u7528\u6709\u76f8\u540c\u7684UI\u8868\u73b0\u548c\u884c\u4e3a</li>\n<li>\u6269\u5c55\u4e86ModalButton\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u5728\u70b9\u51fb\u8be5\u6309\u94ae\u65f6\u6267\u884c\u52a0\u8f7d\u6570\u636e\uff0c\u5e76\u4e14Button\u7684\u72b6\u6001\u53d8\u4e3aloading\uff0c\u5728\u6570\u636e\u52a0\u8f7d\u5b8c\u6210\u4e4b\u540e\u518d\u5f39\u51fa\u5f39\u7a97</li>\n<li>\u6269\u5c55\u4e86TabsModal\u7ec4\u4ef6\uff0c\u5b83\u662f\u4e00\u4e2aTabs\u548cModal\u7ec4\u5408\u8d77\u6765\u7684\u7ec4\u4ef6\uff0c\u5bf9\u5f39\u7a97title\u505a\u4e86\u7279\u6b8a\u5904\u7406\uff0c\u66f4\u52a0\u7b26\u5408UI\u4ea4\u4e92\u903b\u8f91</li>\n</ul>",api:"<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>footer</td>\n<td>\u5f39\u7a97\u7684footer\uff0c\u5f53\u5176\u88ab\u663e\u5f0f\u8bbe\u7f6e\u6210null\u4e14footerButtons\u6ca1\u6709\u8bbe\u7f6e\u8fc7\u65f6\u5f39\u7a97\u4e0d\u663e\u793afooter\u3002\u5f53\u5b83\u7c7b\u578b\u4e3afunction\u65f6\u53ef\u4ee5\u5f97\u5230close\u65b9\u6cd5\u548cwithDecorator\u8bbe\u7f6e\u7684props</td>\n<td>jsx,function</td>\n<td>-</td>\n</tr>\n<tr>\n<td>footerButtons</td>\n<td>\u5f39\u7a97footer\u7684\u6309\u94ae\u533a\uff0c\u9ed8\u8ba4\u4e3a\u786e\u8ba4\u548c\u53d6\u6d88\u6309\u94ae\uff0c\u9ed8\u8ba4\u6309\u94ae\u5206\u522b\u54cd\u5e94onConfirm\u548conCancel\u65b9\u6cd5\uff0c\u5982\u679c\u81ea\u5b9a\u4e49\u8bbe\u7f6efooterButtons\u5219\u9700\u8981\u81ea\u884c\u4f20\u5165onClick\u53c2\u6570\uff0conConfirm\u548conCancel\u65b9\u6cd5\u5c06\u4e0d\u751f\u6548</td>\n<td>array</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onClose</td>\n<td>\u5f39\u7a97\u5173\u95ed\u65f6\u8c03\u7528\uff0c\u5f39\u7a97\u53d7\u63a7\u65f6\u7531\u8be5\u65b9\u6cd5\u5c06\u5916\u90e8open\u72b6\u6001\u4fee\u6539</td>\n<td>function</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onConfirm</td>\n<td>\u5f53footerButtons\u672a\u81ea\u5b9a\u4e49\u8bbe\u7f6e\u65f6\u70b9\u51fb\u786e\u8ba4\u6309\u94ae\u89e6\u53d1\u6267\u884c\u8be5\u65b9\u6cd5\uff0c\u5f53\u5176\u8fd4\u56dePromise\u70b9\u51fb\u540ePromise\uff0cresolve\u4e4b\u524d\u786e\u8ba4\u6309\u94ae\u663e\u793a\u4e3aloading\u72b6\u6001\uff0c\u8fd4\u56de\u503c\u4e3afalse\u6216\u8005Promise\u7684resolve\u503c\u4e3afalse\u65f6\u5f39\u7a97\u4e0d\u4f1a\u88ab\u5173\u95ed\uff0c\u5176\u4ed6\u60c5\u51b5\u5f39\u7a97\u9ed8\u8ba4\u5173\u95ed</td>\n<td>function</td>\n<td>-</td>\n</tr>\n<tr>\n<td>onCancel</td>\n<td>\u548conConfirm\u7c7b\u4f3c\uff0c\u5176\u4e3a\u70b9\u51fb\u53d6\u6d88\u6309\u94ae\u89e6\u53d1</td>\n<td>function</td>\n<td>-</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u5f39\u7a97\u5185\u5bb9\uff0c\u53ef\u4ee5\u4e3ajsx\u6216\u8005function\uff0c\u4e3afunction\u65f6\u53ef\u4ee5\u63a5\u6536\u5230close\u548cwithDecorator\u8bbe\u7f6e\u7684props</td>\n<td>jsx,function</td>\n<td>-</td>\n</tr>\n<tr>\n<td>withDecorator</td>\n<td>\u5f39\u7a97\u4fee\u9970\u5668\uff0c\u4f1a\u63a5\u6536\u5230\u5f39\u7a97children\u7684render\u65b9\u6cd5\uff0c\u53ef\u4ee5\u5728\u5176\u5916\u90e8\u6dfb\u52a0\u4fee\u9970\u5185\u5bb9\u540e\u6267\u884crender\u65b9\u6cd5\uff0c\u7ed9render\u65b9\u6cd5\u4f20\u5165\u7684\u503c\u53ef\u4ee5\u5728children,footer,rightOptions\u7c7b\u578b\u4e3afunction\u65f6\u63a5\u6536\u5230\u5bf9\u5e94\u7684\u53c2\u6570</td>\n<td>function</td>\n<td>-</td>\n</tr>\n<tr>\n<td>rightOptions</td>\n<td>\u5f39\u7a97\u53f3\u4fa7\u533a\u57df\uff0c\u548cchildren\u7c7b\u4f3c\u53ef\u4ee5\u4e3ajsx\u6216\u8005function\u7c7b\u578b</td>\n<td>jsx,function</td>\n<td>-</td>\n</tr>\n<tr>\n<td>maskClosable</td>\n<td>\u70b9\u51fb\u8499\u5c42\u662f\u5426\u5141\u8bb8\u5173\u95ed</td>\n<td>boolean</td>\n<td>false</td>\n</tr>\n</tbody>\n</table>\n<p>\u5176\u4ed6\u53c2\u6570\u53c2\u8003antd Modal\u7ec4\u4ef6</p>\n<h3>useModal</h3>\n<p>\u83b7\u53d6\u4e00\u4e2a\u6267\u884c\u540e\u53ef\u4ee5\u5f39\u51fa\u4e00\u4e2aModal\u7ec4\u4ef6\u7684\u65b9\u6cd5</p>\n<h4>return:modal</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>modal</td>\n<td>\u6267\u884c\u540e\u53ef\u4ee5\u5f39\u51fa\u4e00\u4e2aModal\u5f39\u7a97\uff0c\u53c2\u6570\u540cModal\u7ec4\u4ef6\u53c2\u6570</td>\n<td>function</td>\n</tr>\n</tbody>\n</table>\n<h3>TabsModal</h3>\n<p>\u4e00\u4e2aTabs\u548cModal\u7ec4\u5408\u8d77\u6765\u7684\u7ec4\u4ef6\uff0c\u5bf9\u5f39\u7a97title\u505a\u4e86\u7279\u6b8a\u5904\u7406\uff0c\u66f4\u52a0\u7b26\u5408UI\u4ea4\u4e92\u903b\u8f91</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>items</td>\n<td>\u540cantd Tabs\u7684items\u53c2\u6570</td>\n<td>array</td>\n<td>-</td>\n</tr>\n<tr>\n<td>items[].label</td>\n<td>\u9009\u9879\u5361\u5934\u663e\u793a\u6587\u5b57</td>\n<td>string</td>\n<td>-</td>\n</tr>\n<tr>\n<td>items[].children</td>\n<td>\u9009\u9879\u5361\u5934\u663e\u793a\u5185\u5bb9\uff0c\u548cantd Tabs\u4e0d\u540c\u7684\u662f\u5b83\u53ef\u4ee5\u662f\u4e00\u4e2afunction\u548cModal\u7684children\u7c7b\u4f3c\u53ef\u4ee5\u63a5\u6536items[].withDecorator\u4f20\u5165\u7684\u53c2\u6570</td>\n<td>jsx,function</td>\n<td>-</td>\n</tr>\n<tr>\n<td>items[].key</td>\n<td>\u5bf9\u5e94activeKey\u503c</td>\n<td>string</td>\n<td>-</td>\n</tr>\n<tr>\n<td>activeKey</td>\n<td>\u5f53\u524d\u6fc0\u6d3b tab \u9762\u677f\u7684 key</td>\n<td>string</td>\n<td></td>\n</tr>\n<tr>\n<td>withDecorator</td>\n<td>\u5f39\u7a97\u4fee\u9970\u5668\u548cModal\u7684withDecorator\u4f5c\u7528\u4e00\u81f4</td>\n<td>function</td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultActiveKey</td>\n<td>\u521d\u59cb\u5316\u9009\u4e2d\u9762\u677f\u7684 key\uff0c\u5982\u679c\u6ca1\u6709\u8bbe\u7f6e activeKey</td>\n<td>string</td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u5207\u6362\u9762\u677f\u7684\u56de\u8c03</td>\n<td>function</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3>useTabsModal</h3>\n<p>\u83b7\u53d6\u4e00\u4e2a\u6267\u884c\u540e\u53ef\u4ee5\u5f39\u51fa\u4e00\u4e2aTabsModal\u7ec4\u4ef6\u7684\u65b9\u6cd5</p>\n<h4>return:tabsModal</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>tabsModal</td>\n<td>\u6267\u884c\u540e\u53ef\u4ee5\u5f39\u51fa\u4e00\u4e2aTabsModal\u5f39\u7a97\uff0c\u53c2\u6570\u540cTabsModal\u7ec4\u4ef6\u53c2\u6570</td>\n<td>function</td>\n</tr>\n</tbody>\n</table>\n<h3>ModalButton</h3>\n<p>\u70b9\u51fb\u4ee5\u540e\u53ef\u4ee5\u6267\u884c\u83b7\u53d6\u6570\u636e\uff0c\u5728\u6570\u636e\u672a\u8fd4\u56de\u65f6\u6309\u94ae\u5c55\u793a\u4e3aloading\u72b6\u6001\uff0c\u6570\u636e\u8fd4\u56de\u540e\u5f39\u51faModal\u5f39\u7a97</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>api</td>\n<td>@kne/react-fetch \u6240\u9700\u53c2\u6570</td>\n<td>object</td>\n<td>-</td>\n</tr>\n<tr>\n<td>modalProps</td>\n<td>\u540cModal\u53c2\u6570,\u5f53\u5b83\u4e3afunction\u65f6\uff0c\u6267\u884cfunction\u540e\u8fd4\u56de\u7684\u503c\u4f5c\u4e3amodalProps</td>\n<td>object,function({data,fetchApi,close})</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<p>\u5176\u4ed6\u53c2\u6570\u540cantd Button \u7ec4\u4ef6</p>\n<h3>TabsModalButton</h3>\n<p>\u70b9\u51fb\u4ee5\u540e\u53ef\u4ee5\u6267\u884c\u83b7\u53d6\u6570\u636e\uff0c\u5728\u6570\u636e\u672a\u8fd4\u56de\u65f6\u6309\u94ae\u5c55\u793a\u4e3aloading\u72b6\u6001\uff0c\u6570\u636e\u8fd4\u56de\u540e\u5f39\u51faTabsModal\u5f39\u7a97</p>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>api</td>\n<td>@kne/react-fetch \u6240\u9700\u53c2\u6570</td>\n<td>object</td>\n<td>-</td>\n</tr>\n<tr>\n<td>modalProps</td>\n<td>\u540cTabsModal\u53c2\u6570,\u5f53\u5b83\u4e3afunction\u65f6\uff0c\u6267\u884cfunction\u540e\u8fd4\u56de\u7684\u503c\u4f5c\u4e3amodalProps</td>\n<td>object,function({data,fetchApi,close})</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<p>\u5176\u4ed6\u53c2\u6570\u540cantd Button \u7ec4\u4ef6</p>",example:{isFull:!1,className:"",style:"",list:[{title:"\u666e\u901a\u5f39\u7a97",description:"\u5c55\u793a\u5f39\u7a97\u7684\u57fa\u672c\u7528\u6cd5\uff0c\u81ea\u5b9a\u4e49footer\u7b49\u529f\u80fd\u3002\n\u6ce8\u610f:\n1.onConfirm\u548conCancel\u53ea\u5bf9\u4e8e\u9ed8\u8ba4\u7684footerButtons\u751f\u6548\uff0c\u5982\u679c\u662f\u81ea\u5b9a\u4e49\u7684footerButtons\u5219\u4e0d\u9700\u8981\u4f20\u8fd9\u4e24\u4e2a\u53c2\u6570\uff0c\u76f4\u63a5\u5b9a\u4e49\u6309\u94ae\u7684onClick\u5373\u53ef\u3002\n2.\u81ea\u5b9a\u4e49\u7684footerButtons\u7684onClick\u53ef\u4ee5\u8fd4\u56de\u4e00\u4e2aPromise\u6765\u5ef6\u8fdf\u5173\u95ed\u5f39\u7a97\uff0cresolve\u7684\u503c\u4e3afalse\u4e0d\u5173\u95ed\u5f39\u7a97\uff0c\u5176\u4ed6\u60c5\u51b5\u4f1a\u81ea\u52a8\u5173\u95ed\u5f39\u7a97\u3002\u5728resolve\u672a\u8fd4\u56de\u4e4b\u524d\u6309\u94ae\u4f1a\u53d8\u6210loading\u72b6\u6001",code:'const { default: Modal, useModal } = _Modal;\nconst { useState } = React;\nconst { Button, Space, message, Radio } = antd;\nconst { PureGlobal } = global;\n\nconst BaseExample = () => {\n const modal = useModal();\n const [size, setSize] = useState("default");\n const [open, setOpen] = useState(false);\n return (\n <Space direction="vertical">\n <Radio.Group\n value={size}\n options={[\n { label: "small", value: "small" },\n { label: "default", value: "default" },\n {\n label: "large",\n value: "large",\n },\n ]}\n onChange={(e) => {\n setSize(e.target.value);\n }}\n optionType="button"\n buttonStyle="solid"\n />\n <Space wrap>\n <Modal\n title="\u786e\u5b9a\u5ef6\u8fdf\u5173\u95ed\u5f39\u7a97"\n size={size}\n open={open}\n onClose={() => {\n setOpen(false);\n }}\n onConfirm={() => {\n return new Promise((resolve) => {\n message.success("\u5f39\u7a971s\u540e\u5173\u95ed");\n setTimeout(() => {\n message.success("\u5f39\u7a97\u5173\u95ed");\n resolve();\n }, 1000);\n });\n }}\n >\n <div>\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97</div>\n </Modal>\n <Button\n onClick={() => {\n setOpen(true);\n }}\n >\n \u786e\u5b9a\u5ef6\u8fdf\u5173\u95ed\u5f39\u7a97\n </Button>\n <Button\n onClick={() => {\n modal({\n title: "hooks\u8c03\u7528\u5f39\u6846",\n size,\n children: <div>\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97</div>,\n });\n }}\n >\n hooks\u8c03\u7528\u5f39\u6846\n </Button>\n <Button\n onClick={() => {\n modal({\n title: "\u8d85\u9ad8\u5f39\u7a97",\n size,\n children: (\n <div style={{ height: "2000px" }}>\n \u8d85\u9ad8\u5f39\u7a97\u8d85\u9ad8\u5f39\u7a97\u8d85\u9ad8\u5f39\u7a97\u8d85\u9ad8\u5f39\u7a97\u8d85\u9ad8\u5f39\u7a97\u8d85\u9ad8\u5f39\u7a97\u8d85\u9ad8\u5f39\u7a97\u8d85\u9ad8\u5f39\u7a97\u8d85\u9ad8\u5f39\u7a97\u8d85\u9ad8\u5f39\u7a97\n </div>\n ),\n });\n }}\n >\n \u5c55\u793a\u8d85\u9ad8\u5f39\u7a97\n </Button>\n <Button\n onClick={() => {\n modal({\n title: "\u81ea\u5b9a\u4e49footer\u5f39\u6846",\n size,\n children: <div>\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97</div>,\n footer: ({ close }) => (\n <Space>\n <span>\u81ea\u5b9a\u4e49footer</span>\n <Button\n type="link"\n onClick={() => {\n close();\n }}\n >\n \u5173\u95ed\n </Button>\n </Space>\n ),\n });\n }}\n >\n \u5c55\u793a\u81ea\u5b9a\u4e49footer\u5f39\u6846\n </Button>\n <Button\n onClick={() => {\n modal({\n title: "\u65e0footer\u5f39\u6846",\n size,\n children: <div>\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97</div>,\n footer: null,\n });\n }}\n >\n \u65e0footer\u5f39\u6846\n </Button>\n <Button\n onClick={() => {\n modal({\n title: "\u81ea\u5b9a\u4e49\u6309\u94ae\u7ec4",\n size,\n children: <div>\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97</div>,\n footerButtons: [\n {\n children: "\u6309\u94ae\u4e00",\n },\n {\n type: "primary",\n children: "\u6309\u94ae\u4e8c",\n },\n {\n children: "\u6309\u94ae\u4e09",\n },\n ],\n });\n }}\n >\n \u81ea\u5b9a\u4e49\u6309\u94ae\u7ec4\n </Button>\n <Button\n onClick={() => {\n modal({\n title: "\u6709rightOptions\u7684\u5f39\u7a97",\n size,\n children: <div>\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97</div>,\n rightOptions: <div>\u53f3\u4fa7\u5185\u5bb9\u53f3\u4fa7\u5185\u5bb9\u53f3\u4fa7\u5185\u5bb9\u53f3\u4fa7\u5185\u5bb9</div>,\n rightSpan: 12,\n });\n }}\n >\n \u6709rightOptions\u7684\u5f39\u7a97\n </Button>\n <Button\n onClick={() => {\n const StateContainer = ({ children }) => {\n const [disabled, setDisabled] = useState(false);\n return children({ disabled, setDisabled });\n };\n\n modal({\n title: "\u6709rightOptions\u7684\u5f39\u7a97",\n size,\n withDecorator: (render) => {\n return <StateContainer>{render}</StateContainer>;\n },\n footerButtons: ({ disabled }) => [\n {\n type: "primary",\n disabled,\n children: "\u786e\u5b9a",\n },\n ],\n children: ({ disabled, setDisabled }) => (\n <div>\n \u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97[{String(disabled)}]\n <Button\n onClick={() => {\n setDisabled((disabled) => !disabled);\n }}\n >\n \u5207\u6362\u786e\u5b9a\u6309\u94aedisabled\n </Button>\n </div>\n ),\n });\n }}\n >\n children\u63a7\u5236footerButtons\u72b6\u6001\n </Button>\n </Space>\n </Space>\n );\n};\n\nrender(\n <PureGlobal>\n <BaseExample />\n </PureGlobal>\n);\n\n',scope:[{name:"_Modal",packageName:"@components/Modal",component:a},{name:"global",packageName:"@components/Global",component:d},{name:"antd",packageName:"antd",component:o}]},{title:"childrenRef\u7684\u4f7f\u7528",description:"",code:'const { default: Modal, useModal } = _Modal;\nconst { Button } = antd;\nconst BaseExample = () => {\n const modal = useModal();\n\n return (\n <Button\n onClick={() => {\n modal({\n title: "\u793a\u4f8b\u5f39\u6846",\n children: ({ childrenRef }) => {\n return (\n <div ref={childrenRef}>\n \u793a\u4f8b\u5f39\u6846\u793a\u4f8b\u5f39\u6846\u793a\u4f8b\u5f39\u6846\u793a\u4f8b\u5f39\u6846\u793a\u4f8b\u5f39\u6846\u793a\u4f8b\u5f39\u6846\n </div>\n );\n },\n onConfirm: (e, { childrenRef }) => {\n console.log(childrenRef.current);\n },\n });\n }}\n >\n \u70b9\u51fb\u5f39\u51fa\u5f39\u6846\n </Button>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Modal",packageName:"@components/Modal",component:a},{name:"antd",packageName:"antd",component:o}]},{title:"\u9700\u8981\u52a0\u8f7d\u6570\u636e\u7684\u5f39\u7a97",description:"\u53ef\u4ee5\u901a\u8fc7withDecorator\u5c5e\u6027\u5b9e\u73b0\u5f39\u7a97\u7684\u52a0\u8f7d\u6570\u636e\u6216\u8005\u52a0\u8f7d\u8fdc\u7a0b\u7ec4\u4ef6\u7684\u903b\u8f91\uff0c\u5728\u6570\u636e\u6216\u8005\u8fdc\u7a0b\u7ec4\u4ef6\u52a0\u8f7d\u5b8c\u6210\u4e4b\u524d\u5f39\u7a97\u5c55\u793aloading\u72b6\u6001\uff0c\u52a0\u8f7d\u5b8c\u6210\u4e4b\u540echildren\u53ef\u4ee5\u83b7\u53d6\u5230\u52a0\u8f7d\u7684\u6570\u636e",code:'const { default: Modal, useModal } = _Modal;\nconst { useState } = React;\nconst { Button, Space } = antd;\nconst { default: Fetch } = fetch;\nconst { PureGlobal } = global;\nconst { default: Content } = _Content;\n\nconst BaseExample = () => {\n const modal = useModal();\n const [open, setOpen] = useState(false);\n return (\n <Space wrap>\n <Modal\n title="\u7ec4\u4ef6\u8c03\u7528\u65b9\u5f0f"\n withDecorator={(render) => (\n <Fetch\n loader={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve([\n {\n label: "\u5185\u5bb91",\n content: "\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91",\n },\n {\n label: "\u5185\u5bb92",\n content: "\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92",\n },\n ]);\n }, 1000);\n });\n }}\n render={({ data }) => render({ data })}\n />\n )}\n open={open}\n onClose={() => {\n setOpen(false);\n }}\n >\n {({ data }) => <Content list={data} col={2} />}\n </Modal>\n <Button\n onClick={() => {\n setOpen(true);\n }}\n >\n \u7ec4\u4ef6\u8c03\u7528\u65b9\u5f0f\n </Button>\n <Button\n onClick={() => {\n modal({\n title: "hooks\u8c03\u7528\u65b9\u5f0f",\n withDecorator: (render) => (\n <Fetch\n loader={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve([\n {\n label: "\u5185\u5bb91",\n content: "\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91",\n },\n {\n label: "\u5185\u5bb92",\n content: "\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92",\n },\n ]);\n }, 1000);\n });\n }}\n render={({ data }) => render({ data })}\n />\n ),\n children: ({ data }) => <Content list={data} col={2} />,\n });\n }}\n >\n hooks\u8c03\u7528\u65b9\u5f0f\n </Button>\n <Button\n onClick={() => {\n modal({\n title: (props) => {\n return "hooks\u8c03\u7528\u65b9\u5f0f";\n },\n withDecorator: (render) => (\n <Fetch\n loader={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve([\n {\n label: "\u5185\u5bb91",\n content: "\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91",\n },\n {\n label: "\u5185\u5bb92",\n content: "\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92",\n },\n ]);\n }, 1000);\n });\n }}\n render={({ data }) => render({ data })}\n />\n ),\n children: ({ data }) => <Content list={data} col={2} />,\n });\n }}\n >\n hooks title\u8c03\u7528\u65b9\u5f0f\n </Button>\n </Space>\n );\n};\n\nrender(\n <PureGlobal>\n <BaseExample />\n </PureGlobal>\n);\n\n',scope:[{name:"_Modal",packageName:"@components/Modal",component:a},{name:"global",packageName:"@components/Global",component:d},{name:"antd",packageName:"antd",component:o},{name:"fetch",packageName:"@kne/react-fetch",component:r},{name:"_Content",packageName:"@components/Content",component:l}]},{title:"\u53ef\u4ee5\u5f39\u51fa\u5f39\u7a97\u7684\u6309\u94ae",description:"\u53ef\u4ee5\u70b9\u51fb\u6309\u94ae\u5f39\u51fa\u5f39\u7a97\uff0c\u5e76\u4e14\u5728\u5f39\u7a97\u5f39\u51fa\u4e4b\u524d\u53ef\u4ee5\u52a0\u8f7d\u6570\u636e\uff0c\u52a0\u8f7d\u6570\u636e\u65f6\uff0c\u6309\u94ae\u4e3aloading\u72b6\u6001\uff0c\u6570\u636e\u52a0\u8f7d\u5b8c\u6210\u4e4b\u540e\u518d\u5f39\u51fa\u5f39\u7a97",code:'const { ModalButton, TabsModalButton } = _Modal;\nconst { Space } = antd;\nconst { PureGlobal } = global;\nconst { default: Content } = _Content;\nconst { default: FormInfo, Input, TextArea } = _FormInfo;\n\nconst api = {\n loader: () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve([\n { label: "\u5185\u5bb91", content: "\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91" },\n {\n label: "\u5185\u5bb92",\n content: "\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92",\n },\n ]);\n }, 1000);\n });\n },\n};\n\nconst BaseExample = () => {\n return (\n <Space wrap>\n <ModalButton\n api={api}\n modalProps={({ data }) => {\n return {\n title: "\u52a0\u8f7d\u6570\u636e\u7684\u5f39\u7a97",\n children: <Content list={data} col={2} />,\n };\n }}\n >\n \u70b9\u51fb\u52a0\u8f7d\u6570\u636e\n </ModalButton>\n <TabsModalButton\n api={api}\n modalProps={({ data }) => {\n return {\n items: data.map(({ label, content }, index) => {\n return {\n key: index,\n children: content,\n label,\n };\n }),\n };\n }}\n >\n \u70b9\u51fb\u52a0\u8f7d\u6570\u636e\u7684Tabs\u5f39\u7a97\n </TabsModalButton>\n </Space>\n );\n};\n\nrender(\n <PureGlobal>\n <BaseExample />\n </PureGlobal>\n);\n\n',scope:[{name:"_Modal",packageName:"@components/Modal",component:a},{name:"global",packageName:"@components/Global",component:d},{name:"antd",packageName:"antd",component:o},{name:"_Content",packageName:"@components/Content",component:l},{name:"_FormInfo",packageName:"@components/FormInfo",component:e(96252)}]},{title:"tabs\u5f39\u7a97",description:"\u5c55\u793a\u4e00\u4e2atabs\u5f39\u7a97\uff0ctabs\u7684\u9009\u9879\u7684label\u4f1a\u5360\u636e\u5f39\u7a97title\u4f4d\u7f6e\uff0c\u5f39\u6846\u7684title\u5c06\u4e0d\u663e\u793a\ntabs\u7684items\u591a\u52a0\u4e86withDecorator\u53c2\u6570\u548cModal\u7684withDecorator\u53c2\u6570\u7c7b\u4f3c\u53ef\u4ee5\u63a7\u5236\u5176\u5916\u90e8\u663e\u793a\u53ca\u6e32\u67d3\u5185\u5bb9\ntabs\u7684items\u7684children\u4e5f\u53ef\u4ee5\u662ffunction\uff0c\u540c\u6837\u53ef\u4ee5\u63a5\u6536\u5230TabsModal\u7684withDecorator\u4f20\u56de\u7684\u53c2\u6570",code:'const { TabsModal, useTabsModal } = _Modal;\nconst { useState } = React;\nconst { default: Fetch } = fetch;\nconst { Button, Space } = antd;\nconst { PureGlobal } = global;\nconst { default: Content } = _Content;\n\nconst BaseExample = () => {\n const [open, setOpen] = useState(false);\n const tabsModal = useTabsModal();\n return <Space wrap>\n <TabsModal open={open} onClose={() => {\n setOpen(false);\n }} items={[{\n label: "\u9879\u76ee 1", key: "item-1", children: <div>\u9879\u76ee 1\u9879\u76ee 1\u9879\u76ee 1\u9879\u76ee 1\u9879\u76ee 1\u9879\u76ee 1\u9879\u76ee 1\u9879\u76ee 1</div>\n }, {\n label: "\u9879\u76ee 2", key: "item-2", children: <div>\u9879\u76ee 2\u9879\u76ee 2\u9879\u76ee 2\u9879\u76ee 2\u9879\u76ee 2\u9879\u76ee 2\u9879\u76ee 2\u9879\u76ee 2</div>\n }]} rightOptions={<div>\u53f3\u8fb9\u680f\u5185\u5bb9\u53f3\u8fb9\u680f\u5185\u5bb9\u53f3\u8fb9\u680f\u5185\u5bb9\u53f3\u8fb9\u680f\u5185\u5bb9</div>}>\n <div>\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97\u5f39\u7a97</div>\n </TabsModal>\n <Button onClick={() => {\n setOpen(true);\n }}>\u7ec4\u4ef6\u8c03\u7528\u65b9\u5f0f</Button>\n <Button onClick={() => {\n tabsModal({\n rightOptions: <div>\u53f3\u8fb9\u680f\u5185\u5bb9\u53f3\u8fb9\u680f\u5185\u5bb9\u53f3\u8fb9\u680f\u5185\u5bb9\u53f3\u8fb9\u680f\u5185\u5bb9</div>, items: [{\n label: "\u9879\u76ee 1", key: "item-1", children: <div>\u9879\u76ee 1\u9879\u76ee 1\u9879\u76ee 1\u9879\u76ee 1\u9879\u76ee 1\u9879\u76ee 1\u9879\u76ee 1\u9879\u76ee 1</div>\n }, {\n label: "\u9879\u76ee 2", key: "item-2", children: <div>\u9879\u76ee 2\u9879\u76ee 2\u9879\u76ee 2\u9879\u76ee 2\u9879\u76ee 2\u9879\u76ee 2\u9879\u76ee 2\u9879\u76ee 2</div>\n }]\n });\n }}>hooks\u8c03\u7528\u65b9\u5f0f</Button>\n <Button onClick={() => {\n tabsModal({\n title: "\u6b64title\u4e0d\u5c55\u793a",\n rightOptions: ({ data }) => <Content list={data} />,\n withDecorator: (render) => <Fetch loader={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve([{ label: "\u5185\u5bb91", content: "\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91\u5185\u5bb91" }, {\n label: "\u5185\u5bb92", content: "\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92\u5185\u5bb92"\n }]);\n }, 1000);\n });\n }} render={({ data }) => render({ data })} />,\n items: [{\n label: "\u9879\u76ee 1", key: "item-1", children: ({ data }) => <Content list={data} col={2} />\n }, {\n withDecorator: (render) => <Fetch loader={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve([{ label: "\u5185\u5bb93", content: "\u5185\u5bb93\u5185\u5bb93\u5185\u5bb93\u5185\u5bb93\u5185\u5bb93\u5185\u5bb93\u5185\u5bb93" }, {\n label: "\u5185\u5bb94", content: "\u5185\u5bb94\u5185\u5bb94\u5185\u5bb94\u5185\u5bb94\u5185\u5bb94\u5185\u5bb94\u5185\u5bb94\u5185\u5bb94"\n }]);\n }, 1000);\n });\n }} render={({ data }) => render({ tabData: data })} />,\n label: "\u9879\u76ee 2",\n key: "item-2",\n children: ({ data, tabData }) => <Content list={[...data, ...tabData]} col={2} />\n }]\n });\n }}>\u590d\u6742\u6570\u636e\u52a0\u8f7d</Button>\n </Space>;\n};\n\nrender(<PureGlobal><BaseExample /></PureGlobal>);\n',scope:[{name:"_Modal",packageName:"@components/Modal",component:a},{name:"global",packageName:"@components/Global",component:d},{name:"antd",packageName:"antd",component:o},{name:"fetch",packageName:"@kne/react-fetch",component:r},{name:"_Content",packageName:"@components/Content",component:l}]},{title:"\u6d88\u606f\u786e\u8ba4\u548c\u63d0\u793a",description:"\u5c55\u793a\u786e\u8ba4\u6d88\u606f\u63d0\u9192",code:'const { default: Modal, useConfirmModal } = _Modal;\nconst { useState } = React;\nconst { Button, Space, message } = antd;\nconst { PureGlobal } = global;\nconst BaseExample = () => {\n const confirmModal = useConfirmModal();\n return (\n <Space wrap>\n <Button\n onClick={() => {\n confirmModal({\n danger: true,\n type: "confirm",\n title: "\u786e\u5b9a\u8981\u5220\u9664\u5417\uff1f",\n message:\n "\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664",\n });\n }}\n >\n confirm\n </Button>\n <Button\n onClick={() => {\n confirmModal({\n type: "confirm",\n confirmType: "warning",\n title: "\u786e\u5b9a\u8981\u7f16\u8f91\u5417\uff1f",\n message:\n "\u786e\u5b9a\u8981\u7f16\u8f91\u786e\u5b9a\u8981\u7f16\u8f91\u786e\u5b9a\u8981\u7f16\u8f91\u786e\u5b9a\u8981\u7f16\u8f91\u786e\u5b9a\u8981\u7f16\u8f91\u786e\u5b9a\u8981\u7f16\u8f91\u786e\u5b9a\u8981\u7f16\u8f91",\n });\n }}\n >\n confirm \u8b66\u544a\n </Button>\n <Button\n onClick={() => {\n confirmModal({\n type: "info",\n title: "\u786e\u5b9a\u8981\u5220\u9664\u5417\uff1f",\n message:\n "\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664",\n });\n }}\n >\n info\n </Button>\n <Button\n onClick={() => {\n confirmModal({\n type: "info",\n message:\n "\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664",\n });\n }}\n >\n info\u65e0\u6807\u9898\n </Button>\n <Button\n onClick={() => {\n confirmModal({\n type: "success",\n title: "\u786e\u5b9a\u8981\u5220\u9664\u5417\uff1f",\n message:\n "\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664",\n });\n }}\n >\n success\n </Button>\n <Button\n onClick={() => {\n confirmModal({\n type: "warning",\n title: "\u786e\u5b9a\u8981\u5220\u9664\u5417\uff1f",\n message:\n "\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664",\n });\n }}\n >\n warning\n </Button>\n <Button\n onClick={() => {\n confirmModal({\n type: "error",\n title: "\u786e\u5b9a\u8981\u5220\u9664\u5417\uff1f",\n message:\n "\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664\u786e\u5b9a\u8981\u5220\u9664",\n });\n }}\n >\n error\n </Button>\n </Space>\n );\n};\n\nrender(\n <PureGlobal>\n <BaseExample />\n </PureGlobal>\n);\n\n',scope:[{name:"_Modal",packageName:"@components/Modal",component:a},{name:"global",packageName:"@components/Global",component:d},{name:"antd",packageName:"antd",component:o},{name:"fetch",packageName:"@kne/react-fetch",component:r},{name:"_Content",packageName:"@components/Content",component:l}]}]}}},38799(n,t,e){e.d(t,{A:()=>o});var a=e(79329),d=e(72752);const o={name:"Navigation",summary:"<h3>\u4f55\u65f6\u4f7f\u7528</h3>\n<p>\u7cfb\u7edf\u7684\u9876\u90e8\u5bfc\u822a\uff0c\u4e00\u7ea7\u5bfc\u822a\u9879\u504f\u5de6\u9760\u8fd1 logo \u653e\u7f6e\uff0c\u8f85\u52a9\u83dc\u5355\u504f\u53f3\u653e\u7f6e\u3002</p>\n<h3>\u7279\u70b9</h3>\n<ul>\n<li>\u96c6\u6210\u4e86Permissions\u6743\u9650\u5224\u65ad\uff0c\u53ef\u4ee5\u901a\u8fc7\u6743\u9650\u5217\u8868\u6765\u5224\u65ad\u5bfc\u9879\u662f\u5426\u663e\u793a</li>\n<li>\u5728\u5c4f\u5e55\u663e\u793a\u4e0d\u4e86\u5168\u90e8\u7684\u4e00\u7ea7\u5bfc\u822a\u65f6\u53ef\u4ee5\u81ea\u52a8\u5c06\u540e\u9762\u7684\u5bfc\u822a\u9879\u6536\u8d77\u5230\u66f4\u591a\u4e0b\u62c9\u83dc\u5355\u91cc\u9762</li>\n</ul>",api:"<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n</table>",example:{isFull:!0,className:"Navigation_84649",style:".Navigation_84649 .fold-items {\n width: 600px;\n}",list:[{title:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u6807\u9898",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const { default: Navigation } = _Navigation;\nconst { PureGlobal } = global;\n\nconst menuList = [\n {\n key: "client",\n title: "\u5ba2\u6237",\n path: "/client",\n permission: "client:client:look",\n },\n {\n key: "position",\n title: "\u804c\u4f4d",\n path: "/position",\n permission: "jd:job:look",\n },\n {\n key: "ats",\n title: "\u62db\u8058\u6d41\u7a0b",\n path: "/ats",\n },\n {\n key: "talent",\n title: "\u4eba\u624d\u5e93",\n permission: "cv:cv:look",\n path: "/talent",\n },\n {\n key: "contract",\n title: "\u5408\u540c",\n permission: "contract:mgr:look",\n path: "/contract",\n },\n {\n key: "payment",\n title: "\u4ed8\u6b3e\u4fe1\u606f",\n permission: "payment:mgr:look",\n path: "/payment",\n },\n {\n key: "invoice-center",\n title: "\u5f00\u7968",\n permission: "client:invoice:center",\n path: "/invoice-center",\n },\n {\n key: "invoice-manage",\n title: "\u53d1\u7968\u7ba1\u7406",\n permission: "client:invoice:manager",\n path: "/invoice-manage",\n },\n {\n key: "setting",\n title: "\u8bbe\u7f6e",\n permission: (permissions) =>\n permissions.some(\n (x) =>\n [\n "system:permissions:mgr",\n "system:org:mgr",\n "system:user:mgr",\n ].indexOf(x) !== -1\n ),\n path: "/setting",\n },\n];\n\nrender(\n <PureGlobal>\n <Navigation\n list={menuList}\n isFixed={false}\n permissions={[\n "client:client:look",\n "jd:job:look",\n "cv:cv:look",\n "contract:mgr:look",\n "payment:mgr:look",\n "client:invoice:center",\n "client:invoice:manager",\n "system:permissions:mgr",\n ]}\n />\n </PureGlobal>\n);\n\n',scope:[{name:"_Navigation",packageName:"@components/Navigation",component:a},{name:"global",packageName:"@components/Global",component:d}]},{title:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u6807\u9898",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const { default: Navigation } = _Navigation;\nconst { PureGlobal } = global;\n\nconst menuList = [\n {\n key: "client",\n title: "\u5ba2\u6237",\n path: "/client",\n permission: "client:client:look",\n },\n {\n key: "position",\n title: "\u804c\u4f4d",\n path: "/position",\n permission: "jd:job:look",\n },\n {\n key: "ats",\n title: "\u62db\u8058\u6d41\u7a0b",\n path: "/ats",\n },\n {\n key: "talent",\n title: "\u4eba\u624d\u5e93",\n permission: "cv:cv:look",\n path: "/talent",\n },\n {\n key: "contract",\n title: "\u5408\u540c",\n permission: "contract:mgr:look",\n path: "/contract",\n },\n {\n key: "payment",\n title: "\u4ed8\u6b3e\u4fe1\u606f",\n permission: "payment:mgr:look",\n path: "/payment",\n },\n {\n key: "invoice-center",\n title: "\u5f00\u7968",\n permission: "client:invoice:center",\n path: "/invoice-center",\n },\n {\n key: "invoice-manage",\n title: "\u53d1\u7968\u7ba1\u7406",\n permission: "client:invoice:manager",\n path: "/invoice-manage",\n },\n {\n key: "setting",\n title: "\u8bbe\u7f6e",\n permission: (permissions) =>\n permissions.some(\n (x) =>\n [\n "system:permissions:mgr",\n "system:org:mgr",\n "system:user:mgr",\n ].indexOf(x) !== -1\n ),\n path: "/setting",\n },\n];\n\nrender(\n <PureGlobal>\n <div className="fold-items">\n <Navigation\n isFixed={false}\n list={menuList}\n permissions={[\n "client:client:look",\n "jd:job:look",\n "cv:cv:look",\n "contract:mgr:look",\n "payment:mgr:look",\n "client:invoice:center",\n "client:invoice:manager",\n "system:permissions:mgr",\n ]}\n />\n </div>\n </PureGlobal>\n);\n\n',scope:[{name:"_Navigation",packageName:"@components/Navigation",component:a},{name:"global",packageName:"@components/Global",component:d}]},{title:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u6807\u9898",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const { useState } = React;\nconst { PureGlobal } = global;\nconst { default: Navigation } = _Navigation;\nconst { Checkbox, Space } = antd;\n\nconst menuList = [\n {\n key: "client",\n title: "\u5ba2\u6237",\n path: "/client",\n permission: "client:client:look",\n },\n {\n key: "position",\n title: "\u804c\u4f4d",\n path: "/position",\n permission: "jd:job:look",\n },\n {\n key: "ats",\n title: "\u62db\u8058\u6d41\u7a0b",\n path: "/ats",\n },\n {\n key: "talent",\n title: "\u4eba\u624d\u5e93",\n permission: "cv:cv:look",\n path: "/talent",\n },\n {\n key: "contract",\n title: "\u5408\u540c",\n permission: "contract:mgr:look",\n path: "/contract",\n },\n {\n key: "payment",\n title: "\u4ed8\u6b3e\u4fe1\u606f",\n permission: "payment:mgr:look",\n path: "/payment",\n },\n {\n key: "invoice-center",\n title: "\u5f00\u7968",\n permission: "client:invoice:center",\n path: "/invoice-center",\n },\n {\n key: "invoice-manage",\n title: "\u53d1\u7968\u7ba1\u7406",\n permission: "client:invoice:manager",\n path: "/invoice-manage",\n },\n {\n key: "setting",\n title: "\u8bbe\u7f6e",\n permission: (permissions) =>\n permissions.some(\n (x) =>\n [\n "system:permissions:mgr",\n "system:org:mgr",\n "system:user:mgr",\n ].indexOf(x) !== -1\n ),\n path: "/setting",\n },\n];\n\nconst Example = () => {\n const [permissions, setPermissions] = useState([]);\n return (\n <PureGlobal>\n <Space className="container" direction="vertical" size={32}>\n <Navigation isFixed={false} list={menuList} permissions={permissions} />\n <Checkbox.Group\n value={permissions}\n options={[\n "client:client:look",\n "jd:job:look",\n "cv:cv:look",\n "contract:mgr:look",\n "payment:mgr:look",\n "client:invoice:center",\n "client:invoice:manager",\n "system:permissions:mgr",\n ]}\n onChange={(values) => {\n setPermissions(values);\n }}\n />\n </Space>\n </PureGlobal>\n );\n};\n\nrender(<Example />);\n\n',scope:[{name:"_Navigation",packageName:"@components/Navigation",component:a},{name:"antd",packageName:"antd",component:e(55199)},{name:"global",packageName:"@components/Global",component:d}]}]}}},28967(n,t,e){e.d(t,{A:()=>a});const a={name:"Permissions",summary:"<h3>\u4f55\u65f6\u4f7f\u7528</h3>\n<p>\u5728\u7cfb\u7edf\u4e2d\u5b58\u5728\u4e00\u4e9b\u529f\u80fd\u548c\u64cd\u4f5c\u53ea\u5141\u8bb8\u67d0\u4e9b\u89d2\u8272\u7528\u6237\u4f7f\u7528\uff0c\u4f7f\u7528\u8be5\u7ec4\u4ef6\u53ef\u4ee5\u8ba9\u5176\u5305\u88f9\u7684\u7ec4\u4ef6\u6216\u8005\u533a\u57df\u6839\u636e\u7cfb\u7edf\u7684\u6743\u9650\u5217\u8868\u914d\u7f6e\u5c55\u793a\u4e0d\u540c\u7684\u72b6\u6001</p>\n<h3>\u7279\u70b9</h3>\n<p>\u901a\u8fc7\u5728Global\u4e2d\u7684preset\u4e2d\u8bbe\u7f6epermissions\u4f5c\u4e3a\u5f53\u524d\u7528\u6237\u7684\u6743\u9650\u5217\u8868\uff0c\u5728Permissions\u7ec4\u4ef6\u914d\u7f6epermissions\u4f5c\u4e3a\u8be5\u529f\u80fd\u8981\u6c42\u5177\u5907\u7684\u6743\u9650\u9879\uff0c\u5f53\u8981\u6c42\u5177\u5907\u7684\u6743\u9650\u9879\u5168\u90e8\u5728\u7528\u6237\u7684\u6743\u9650\u5217\u8868\u4e2d\u627e\u5230\u65f6\u4e3a\u6743\u9650\u901a\u8fc7\u72b6\u6001\u5426\u5219\u4e3a\u6743\u9650\u4e0d\u901a\u8fc7\u72b6\u6001</p>\n<p>\u5f53\u6743\u9650\u4e0d\u901a\u8fc7\u65f6\uff0cPermissions\u7ec4\u4ef6\u53ef\u4ee5\u6709\u4e09\u79cd\u65b9\u5f0f\u5448\u73b0\uff1a</p>\n<ol>\n<li>\u7528\u6237\u53ef\u4ee5\u770b\u5230\u64cd\u4f5c\u529f\u80fd\u7684\u7ec4\u4ef6\u663e\u793a\uff0c\u4f46\u662f\u4e0d\u80fd\u8fdb\u884c\u64cd\u4f5c\uff0c\u5728\u9f20\u6807\u79fb\u5165\u65f6\u4f1a\u4ee5ToolTip\u63d0\u793a\u9519\u8bef\u539f\u56e0\uff0c\u4e00\u822c\u7528\u5728\u6309\u94ae\u7b49\u9700\u8981\u7528\u6237\u4ea4\u4e92\u7684\u529f\u80fd\u4f4d\u7f6e</li>\n<li>\u7528\u6237\u4e0d\u80fd\u770b\u5230\u64cd\u4f5c\u529f\u80fd\u6216\u8005\u6570\u636e\u5448\u73b0\uff0c\u5bf9\u5e94\u533a\u57df\u663e\u793a\u9519\u8bef\u539f\u56e0\uff0c\u4e00\u822c\u7528\u5728\u8981\u6570\u636e\u5c55\u793a\u7b49\u573a\u666f</li>\n<li>\u9690\u85cf\u5185\u90e8\u7ec4\u4ef6\uff0c\u4e00\u822c\u7528\u5728\u4e0d\u9700\u8981\u5e72\u6270\u5230\u7528\u6237\u6216\u7528\u6237\u4e0d\u9700\u8981\u4e86\u89e3\u5176\u6ca1\u6709\u6743\u9650\u7684\u529f\u80fd\u6216\u6570\u636e\u7b49\u573a\u666f</li>\n</ol>",api:"<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>type</td>\n<td>\u7c7b\u578b\uff0c\u53ef\u9009\u503c\u4e3ahidden\uff0ctooltip\uff0cerror\uff0c\u5206\u522b\u4e3a\u9690\u85cf\uff0c\u6c14\u6ce1\u63d0\u793a\uff0c\u9519\u8bef\u63d0\u793a\u4e09\u79cd\u5f62\u5f0f</td>\n<td>string</td>\n<td>hidden</td>\n</tr>\n<tr>\n<td>tagName</td>\n<td>\u5f53\u524d\u7ec4\u4ef6\u7684tagName\uff0c\u540cReact.createElement\u7684type\u53c2\u6570\uff0c\u9ed8\u8ba4\u4e3aspan</td>\n<td>string</td>\n<td>span</td>\n</tr>\n<tr>\n<td>message</td>\n<td>\u63d0\u793a\u6587\u6848</td>\n<td>string</td>\n<td>\u60a8\u6682\u65e0\u6743\u9650\uff0c\u8bf7\u8054\u7cfb\u7ba1\u7406\u5458</td>\n</tr>\n<tr>\n<td>request</td>\n<td>\u6743\u9650\u5217\u8868\u4e3a\u4e00\u4e2a\u5b57\u7b26\u4e32\u6570\u7ec4\uff0c\u6bcf\u4e2aitem\u4e3a\u4e00\u9879\u6743\u9650\u7684key\uff0c\u6240\u6709\u6743\u9650\u5728\u5168\u5c40\u7684permissions\u4e2d\u5b58\u5728\u5219\u5224\u65ad\u4e3a\u6743\u9650\u901a\u8fc7</td>\n<td>array[string]</td>\n<td>[]</td>\n</tr>\n<tr>\n<td>children</td>\n<td>\u8be5\u53c2\u6570\u53ef\u4ee5\u4f20function\u7c7b\u578b\uff0cchildren({isPass, type, request})\uff0cisPass\u4e3a\u6743\u9650\u6821\u9a8c\u662f\u5426\u901a\u8fc7\uff0ctype\u4e3a\u63d0\u793a\u7c7b\u578b\uff0crequest\u4e3a\u6240\u9700\u6743\u9650\u5217\u8868\uff0c\u53ef\u4ee5\u81ea\u884c\u5b9e\u73b0\u6743\u9650\u7684\u5c55\u793a</td>\n<td>jsx,function</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>",example:{isFull:!1,className:"Permissions_d08cc",style:".Permissions_d08cc .box {\n padding: 20px;\n background: #f8f8f8;\n}",list:[{title:"\u5c55\u793a\u6743\u9650\u4e0d\u901a\u8fc7\u7684\u51e0\u79cd\u5f62\u5f0f",description:"\u901a\u8fc7\u5207\u6362\u4e0d\u540c\u7684type\uff0c\u53ef\u4ee5\u9884\u89c8\u4e09\u79cd\u4e0d\u540ctype\u7684\u8868\u73b0\u5f62\u5f0f",code:'const { default: Permissions } = _Permissions;\nconst { PureGlobal } = global;\nconst { Button, Radio, Space } = antd;\nconst { useState } = React;\n\nconst BaseExample = () => {\n const [type, setType] = useState("tooltip");\n return (\n <PureGlobal\n preset={{\n permissions: ["permission_1", "permission_2"],\n }}\n >\n <Space direction="vertical">\n <Radio.Group\n value={type}\n options={[\n { label: "tooltip", value: "tooltip" },\n {\n label: "error",\n value: "error",\n },\n { label: "hidden", value: "hidden" },\n ]}\n onChange={(e) => {\n setType(e.target.value);\n }}\n optionType="button"\n buttonStyle="solid"\n />\n <Permissions type={type} request={["permission_2"]}>\n <div className="box">\n <Button onClick={() => console.log("\u6267\u884c\u64cd\u4f5c")}>\u6709\u6743\u9650\u64cd\u4f5c</Button>\n </div>\n </Permissions>\n <Permissions type={type} request={["permission_3"]}>\n <div className="box">\n <Button onClick={() => console.log("\u6267\u884c\u64cd\u4f5c")}>\u65e0\u6743\u9650\u64cd\u4f5c</Button>\n </div>\n </Permissions>\n </Space>\n </PureGlobal>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Permissions",packageName:"@components/Permissions",component:e(29053)},{name:"global",packageName:"@components/Global",component:e(72752)},{name:"antd",packageName:"antd",component:e(55199)}]}]}}},12027(n,t,e){e.d(t,{A:()=>o});var a=e(87227),d=e(55199);const o={name:"StateBar",summary:"<p>\u7528\u4e8e State Bar</p>",api:"<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>stateOption</td>\n<td>state\u64cd\u4f5c\u5217\u8868</td>\n<td>string</td>\n<td>{key: string, tab: ReactNode}[]</td>\n</tr>\n<tr>\n<td>activeKey</td>\n<td>\u5f53\u524d\u6fc0\u6d3b tab \u9762\u677f\u7684 key</td>\n<td>string</td>\n<td>-</td>\n</tr>\n<tr>\n<td>type</td>\n<td>\u5f53\u524dtab\u5c55\u793a\u6837\u5f0f</td>\n<td>'tab'\u3001'radio'\u3001'step'</td>\n<td>'tab'</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u4e8b\u4ef6\u8fd4\u56de\u9009\u4e2d\u7684key</td>\n<td>(value: string) => void</td>\n<td></td>\n</tr>\n<tr>\n<td>tabBarExtraContent</td>\n<td>\u5c55\u793a\u5728state bar\u53f3\u4fa7</td>\n<td>ReactNode</td>\n<td>null</td>\n</tr>\n<tr>\n<td>isInner</td>\n<td>\u5e95\u90e8\u7ebf\u5ef6\u5c55\u81f3\u603b\u957f</td>\n<td>boolean</td>\n<td>false</td>\n</tr>\n</tbody>\n</table>\n<h3>Mapping</h3>\n<h4>stateOption</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>key</td>\n<td>\u5bf9\u5e94 activeKey</td>\n<td>string</td>\n<td>-</td>\n</tr>\n<tr>\n<td>tab</td>\n<td>\u9009\u9879\u5361\u5934\u663e\u793a\u6587\u5b57</td>\n<td>ReactNode</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>",example:{isFull:!1,className:"",style:"",list:[{title:"State Bar",description:"State Bar",code:'const { default: StateBar } = _StateBar;\nconst { Button, Radio, Space } = antd;\nconst { useState } = React;\n\nconst BaseExample = () => {\n const [size, setSize] = useState("default");\n const [isInner, setIsInner] = useState(false);\n return (\n <Space direction="vertical">\n <Radio.Group\n value={isInner}\n options={[\n { label: "inner", value: true },\n { label: "normal", value: false },\n ]}\n onChange={(e) => {\n setIsInner(e.target.value);\n }}\n optionType="button"\n buttonStyle="solid"\n />\n <Radio.Group\n value={size}\n options={[\n { label: "small", value: "small" },\n { label: "default", value: "default" },\n { label: "large", value: "large" },\n ]}\n onChange={(e) => {\n setSize(e.target.value);\n }}\n optionType="button"\n buttonStyle="solid"\n />\n <StateBar\n size={size}\n isInner={isInner}\n stateOption={[\n { tab: "\u5168\u90e8", key: "1" },\n { tab: "\u79d1\u76ee\u4e00", key: "2" },\n {\n tab: "\u79d1\u76ee\u4e8c",\n key: "3",\n },\n { tab: "\u79d1\u76ee\u4e09", key: "4" },\n { tab: "\u79d1\u76ee\u56db", key: "5" },\n ]}\n />\n </Space>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_StateBar",packageName:"@components/StateBar",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"Radio State Bar",description:"Radio State Bar",code:'const { default: StateBar } = _StateBar;\nconst { Radio, Space } = antd;\nconst { useState } = React;\n\nconst BaseStateExample = () => {\n const [size, setSize] = useState("default");\n return (\n <Space direction="vertical">\n <Radio.Group\n value={size}\n options={[\n { label: "small", value: "small" },\n { label: "default", value: "default" },\n { label: "large", value: "large" },\n ]}\n onChange={(e) => {\n setSize(e.target.value);\n }}\n optionType="button"\n buttonStyle="solid"\n />\n <StateBar\n size={size}\n type="radio"\n stateOption={[\n { tab: "\u5168\u90e8", key: "1" },\n { tab: "\u79d1\u76ee\u4e00", key: "2" },\n { tab: "\u79d1\u76ee\u4e8c", key: "3" },\n { tab: "\u79d1\u76ee\u4e09", key: "4" },\n { tab: "\u79d1\u76ee\u56db", key: "5" },\n { tab: "\u79d1\u76ee\u4e001", key: "22" },\n { tab: "\u79d1\u76ee\u4e8c2", key: "33" },\n { tab: "\u79d1\u76ee\u4e093", key: "44" },\n { tab: "\u79d1\u76ee\u56db4", key: "55", style: { cursor: "copy" } },\n ]}\n />\n </Space>\n );\n};\n\nrender(<BaseStateExample />);\n\n',scope:[{name:"_StateBar",packageName:"@components/StateBar",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"Step State Bar",description:"Step State Bar",code:'const { default: StateBar } = _StateBar;\n\nconst BaseStateExample = () => {\n return (\n <StateBar\n type="step"\n stateOption={[\n { tab: "\u5168\u90e8", key: "1" },\n { tab: "\u79d1\u76ee\u4e00", key: "2" },\n { tab: "\u79d1\u76ee\u4e8c", key: "3" },\n { tab: "\u79d1\u76ee\u4e09", key: "4" },\n { tab: "\u79d1\u76ee\u56db", key: "5" },\n { tab: "\u79d1\u76ee\u4e001", key: "22" },\n { tab: "\u79d1\u76ee\u4e8c2", key: "33" },\n { tab: "\u79d1\u76ee\u4e093", key: "44" },\n { tab: "\u79d1\u76ee\u56db4", key: "55", className: "last" },\n ]}\n tabBarExtraContent={<div>\u6d4b\u8bd5</div>}\n />\n );\n};\n\nrender(<BaseStateExample />);\n\n',scope:[{name:"_StateBar",packageName:"@components/StateBar",component:a}]}]}}},52616(n,t,e){e.d(t,{A:()=>l});var a=e(3874),d=e(5633),o=e(65317),r=e(55199);const l={name:"StateTag",summary:"<p>\u7528\u4e8e\u5c55\u793a\u6807\u7b7e</p>",api:"<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>type</td>\n<td>tag\u7684\u7c7b\u578b\uff0c\u7c7b\u578b\u51b3\u5b9a\u663e\u793a\u7684\u989c\u8272</td>\n<td>'default'(#666666)\u3001'skill'(#666666)(\u6b64\u65f6\u8fb9\u6846\u989c\u8272\u4e3a #EEEEEE)\u3001'success'(#027A48)\u3001'progress'(#F09700)\u3001'danger'(#D14343)\u3001'info'(#155ACF)\u3001'other'(#6740C3)(\u5f85\u5b9a\u989c\u8272)\u3001'result'(#666666)\u3001'filterResult'(#5CB8B2)</td>\n<td>'default'</td>\n</tr>\n<tr>\n<td>showBorder</td>\n<td>\u662f\u5426\u5c55\u793a\u8fb9\u6846</td>\n<td>boolean</td>\n<td>false</td>\n</tr>\n<tr>\n<td>showBackground</td>\n<td>\u662f\u5426\u5c55\u793a\u80cc\u666f\u8272</td>\n<td>boolean</td>\n<td>true</td>\n</tr>\n<tr>\n<td>text</td>\n<td>tag\u6587\u6848</td>\n<td>string</td>\n<td>''</td>\n</tr>\n<tr>\n<td>filterName</td>\n<td>tag\u7c7b\u578b\u4e3a\u201cfilterResult\u201d\u65f6\u663e\u793a\u5728\u524d\u8fb9\u7684\u6587\u6848</td>\n<td>string</td>\n<td>''</td>\n</tr>\n</tbody>\n</table>\n<p>\u5176\u4ed6\u53c2\u6570\u53c2\u8003 <a href=\"https://ant.design/components/tag-cn\">antd Tag.Tag</a></p>",example:{isFull:!0,className:"",style:"",list:[{title:"\u57fa\u672c\u793a\u4f8b",description:"\u72b6\u6001\u6807\u7b7e",code:'const { default: StateTag } = _StateTag;\nconst { default: Descriptions } = _Descriptions;\nconst { range } = lodash;\nconst { Space, Typography } = antd;\n\nconst BaseExample = () => {\n return (\n <div>\n <div>\u4f7f\u7528\u573a\u666f: \u5217\u8868\u9875Table,\u7b80\u5386\u8be6\u60c5\u9875</div>\n <br />\n <Descriptions\n dataSource={[\n [\n { label: "\u4f7f\u7528\u89c4\u5219", content: "\u5f85XX\uff0c\u6682\u505c" },\n {\n label: "\u793a\u4f8b",\n content: (\n <Space>\n <StateTag {...{ type: "info", text: "\u5f85\u63d0\u4ea4\u5f00\u7968" }} />\n <Typography.Text\n copyable={{\n text: \'<StateTag type="info" text="\u6807\u7b7e\u5185\u5bb9" />\',\n }}\n />\n </Space>\n ),\n },\n ],\n [\n { label: "\u4f7f\u7528\u89c4\u5219", content: "XX\u4e2d\uff0c\u6b63\u5728XX\u4e2d" },\n {\n label: "\u793a\u4f8b",\n content: (\n <Space>\n <StateTag {...{ type: "progress", text: "\u9000\u7968\u5ba1\u6838\u4e2d" }} />\n <Typography.Text\n copyable={{\n text: \'<StateTag type="progress" text="\u6807\u7b7e\u5185\u5bb9" />\',\n }}\n />\n </Space>\n ),\n },\n ],\n [\n { label: "\u4f7f\u7528\u89c4\u5219", content: "\u901a\u8fc7\uff0c\u6210\u529f\uff0c\u5b8c\u6210" },\n {\n label: "\u793a\u4f8b",\n content: (\n <Space>\n <StateTag {...{ type: "success", text: "\u6807\u7b7e\u5185\u5bb9" }} />\n <Typography.Text\n copyable={{\n text: \'<StateTag type="success" text="\u6807\u7b7e\u5185\u5bb9" />\',\n }}\n />\n </Space>\n ),\n },\n ],\n [\n { label: "\u4f7f\u7528\u89c4\u5219", content: "\u4e0d\u901a\u8fc7\uff0c\u5931\u8d25\uff0c\u6dd8\u6c70\uff0c\u7f3a\u5e2d\uff0c\u62d2\u7edd" },\n {\n label: "\u793a\u4f8b",\n content: (\n <Space>\n <StateTag {...{ type: "danger", text: "\u9000\u7968\u62d2\u7edd" }} />\n <Typography.Text\n copyable={{\n text: \'<StateTag type="danger" text="\u6807\u7b7e\u5185\u5bb9" />\',\n }}\n />\n </Space>\n ),\n },\n ],\n [\n { label: "\u4f7f\u7528\u89c4\u5219", content: "\u53d6\u6d88\uff0c\u64a4\u9500\uff0c\u505c\u6b62" },\n {\n label: "\u793a\u4f8b",\n content: (\n <Space>\n <StateTag {...{ type: "default", text: "\u64a4\u9500\u5f00\u7968\u5ba1\u6838" }} />\n <Typography.Text\n copyable={{\n text: \'<StateTag type="default" text="\u6807\u7b7e\u5185\u5bb9" />\',\n }}\n />\n </Space>\n ),\n },\n ],\n [\n { label: "\u4f7f\u7528\u89c4\u5219", content: "\uff08\u6682\u65f6\u8fd8\u672a\u7528\u5230\uff09" },\n {\n label: "\u793a\u4f8b",\n content: (\n <Space>\n <StateTag {...{ type: "other", text: "\u6807\u7b7e\u5185\u5bb9" }} />\n <Typography.Text\n copyable={{\n text: \'<StateTag type="other" text="\u6807\u7b7e\u5185\u5bb9" />\',\n }}\n />\n </Space>\n ),\n },\n ],\n ]}\n />\n <br />\n <br />\n <div>\u4e2a\u522b\u7279\u6b8a\u573a\u666f\uff08\u9700\u8981\u5355\u72ec\u8be2\u95eeUI):</div>\n <br />\n <Descriptions\n dataSource={[\n [\n { label: "\u4f7f\u7528\u89c4\u5219", content: "\u5f85XX\uff0c\u6682\u505c" },\n {\n label: "\u793a\u4f8b",\n content: (\n <div>\n <StateTag {...{ type: "success", text: "\u5df2\u63a8\u8350\u7b80\u5386" }} />\n <StateTag {...{ type: "success", text: "\u5df2\u9000\u7968" }} />\n </div>\n ),\n },\n ],\n [\n { label: "\u4f7f\u7528\u89c4\u5219", content: "\u5df2XX\u5f85XX" },\n {\n label: "\u793a\u4f8b",\n content: (\n <div>\n <StateTag {...{ type: "success", text: "\u5df2\u5f00\u7968\u5f85\u5bc4\u51fa" }} />\n <StateTag {...{ type: "success", text: "\u5df2\u5f85\u5bc4\u5f85\u6536\u6b3e" }} />\n </div>\n ),\n },\n ],\n [\n {\n label: "\u4f7f\u7528\u89c4\u5219",\n content: "\u5df2XX+\u8bcd\u8bed\uff1a\u6839\u636e\u540e\u9762\u7684\u8bcd\u8bed\u8bed\u4e49\u8fdb\u884c\u5224\u65ad",\n },\n {\n label: "\u793a\u4f8b",\n content: (\n <div>\n <StateTag {...{ type: "success", text: "\u5df2\u6210\u529f" }} />\n <StateTag {...{ type: "default", text: "\u5df2\u53d6\u6d88" }} />\n <StateTag {...{ type: "danger", text: "\u5df2\u5931\u8d25" }} />\n <StateTag {...{ type: "progress", text: "\u5df2\u6682\u505c" }} />\n </div>\n ),\n },\n ],\n [\n { label: "\u4f7f\u7528\u89c4\u5219", content: "\u5b8c\u5168\u6839\u636e\u8bed\u4e49\u8bed\u5883\u5224\u65ad" },\n {\n label: "\u793a\u4f8b",\n content: (\n <div>\n <StateTag {...{ type: "success", text: "\u5168\u90e8\u5230\u6b3e" }} />\n <StateTag {...{ type: "success", text: "\u90e8\u5206\u5230\u6b3e" }} />\n <StateTag {...{ type: "success", text: "\u7b80\u5386\u4eae\u70b9" }} />\n <StateTag {...{ type: "danger", text: "\u7b80\u5386\u98ce\u9669\u70b9" }} />\n </div>\n ),\n },\n ],\n ]}\n />\n </div>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_StateTag",packageName:"@components/StateTag",component:a},{name:"_Descriptions",packageName:"@components/Descriptions",component:d},{name:"lodash",packageName:"lodash",component:o},{name:"antd",packageName:"antd",component:r}]},{title:"\u57fa\u672c\u793a\u4f8b",description:"\u6280\u80fd\u6807\u7b7e",code:'const { default: StateTag } = _StateTag;\n\nconst BaseExample = () => {\n return (\n <div>\n <StateTag\n text={"\u6280\u80fd\u6807\u7b7e"}\n type={"skill"}\n showBorder\n showBackground={false}\n />\n </div>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_StateTag",packageName:"@components/StateTag",component:a}]},{title:"\u57fa\u672c\u793a\u4f8b",description:"\u4e0b\u62c9\u83dc\u5355\u3001\u5f39\u7a97\u4e2d\u5df2\u9009\u7ed3\u679c\u6807\u7b7e",code:'const { default: StateTag } = _StateTag;\n\nconst BaseExample = () => {\n return (\n <div>\n <StateTag\n text={"\u6280\u80fd\u6807\u7b7e"}\n type={"result"}\n showBackground={false}\n closable\n onClose={() => console.log("close")}\n />\n <StateTag\n text={"\u6280\u80fd\u6807\u7b7e"}\n type={"result"}\n closable\n onClose={() => console.log("close")}\n />\n </div>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_StateTag",packageName:"@components/StateTag",component:a}]},{title:"\u57fa\u672c\u793a\u4f8b",description:"\u7b5b\u9009\u7ec4\u4ef6\u4e2d\u7b5b\u9009\u7ed3\u679c\u6807\u7b7e",code:'const { default: StateTag } = _StateTag;\n\nconst BaseExample = () => {\n return (\n <div>\n <StateTag\n filterName={"BD"}\n text={"\u9648\u67ab\u6797\uff0c\u738b\u6653\u6668"}\n type={"filterResult"}\n closable\n onClose={() => console.log("close")}\n />\n <br />\n <StateTag\n filterName={"\u6dfb\u52a0\u4eba"}\n text={"\u9648\u67ab\u6797\uff0c\u738b\u6653\u6668\uff0c\u9648\u8def\uff0c\u5f20\u529b"}\n type={"filterResult"}\n closable\n onClose={() => console.log("close")}\n />\n </div>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_StateTag",packageName:"@components/StateTag",component:a}]},{title:"\u57fa\u672c\u793a\u4f8b",description:"\u679a\u4e3e\u72b6\u6001\u6807\u7b7e",code:'const { StateTagEnum } = _StateTag;\nconst { PureGlobal } = global;\nconst { Space } = antd;\n\nconst BaseExample = ()=>{\n return (\n <PureGlobal\n preset={{\n locale: "zh-CN",\n enums: {\n testEnums: async ({ locale }) => {\n console.log(locale);\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve([\n { value: "1", description: "\u7b2c\u4e00\u9879", type: \'success\' },\n { value: "2", description: "\u7b2c\u4e8c\u9879", type: \'danger\' },\n { value: "3", description: "\u7b2c\u4e09\u9879", type: \'info\'},\n ]);\n }, 1000);\n });\n },\n },\n }}\n >\n <Space>\n <StateTagEnum moduleName="testEnums" name="1" />\n <StateTagEnum moduleName="testEnums" name="2" />\n <StateTagEnum moduleName="testEnums" name="3" />\n </Space>\n </PureGlobal>\n )\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_StateTag",packageName:"@components/StateTag",component:a},{name:"antd",packageName:"antd",component:r},{name:"global",packageName:"@components/Global",component:e(72752)}]}]}}},70467(n,t,e){e.d(t,{A:()=>l});var a=e(11598),d=e(72752),o=e(87558),r=e(65317);const l={name:"Table",summary:"<p>\u53ef\u4ee5\u4ece\u540e\u7aef\u83b7\u53d6\u6570\u636e\uff0c\u7136\u540e\u5c55\u793a\u4e3a\u4e00\u4e2a\u8868\u683c</p>",api:"<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n</table>",example:{isFull:!0,className:"",style:"",list:[{title:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u6807\u9898",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const { default: Table } = _Table;\nconst { PureGlobal } = _Global;\nconst { preset } = reactFetch;\n\nconst ajax = (config) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n if (config.url === "/api/v1/user/user/user_key_get") {\n resolve({\n data: {\n code: 0,\n data: `{"date":{"visible":false},"serialNumber":{"width":400}}`,\n },\n });\n } else if (config.url === "/api/v1/user/user/user_key_set") {\n console.log(config.data);\n resolve({\n data: {\n code: 0,\n data: "",\n },\n });\n }\n }, 100);\n });\n};\n\npreset({\n ajax,\n});\n\nconst BaseExample = () => {\n return (\n <PureGlobal\n preset={{\n ajax /tableServerApis: {\n getDataApi: (name) => {\n return {\n url: "/api/v1/user/user/user_key_get",\n method: "GET",\n params: {\n key: `table_config_v2_${name}`,\n },\n transformResponse: (response) => {\n const { data } = response;\n response.data = Object.assign({}, data, {\n data: (() => {\n try {\n return JSON.parse(data.data);\n } catch (e) {\n return [];\n }\n })(),\n });\n\n response.data = {\n code: response.data.code === 0 ? 200 : data.code,\n msg: response.data.msg,\n results: response.data.data,\n };\n\n return response;\n },\n cache: "TABLE_PAGE_CONFIG",\n };\n },\n setDataFunc: (name, data) => {\n return ajax({\n url: "/api/v1/user/user/user_key_set",\n data: {\n map: {\n [`table_config_v2_${name}`]: JSON.stringify(data),\n },\n },\n });\n },\n },/,\n }}\n >\n <Table\n name="test-table"\n onTablePropsReady={({ columns, dataSource }) => {\n console.log({ columns, dataSource });\n }}\n dataSource={[\n {\n id: 0,\n date: "2021-07-21",\n datetime: "2023-07-22 09:00:00",\n serialNumber: "SX00192932323434",\n serialNumberShort: "SH0023",\n userName: "\u6797\u73ca\u73ca",\n title: "\u6211\u662f\u4e3b\u8981\u5b57\u6bb5",\n tagEnum: null,\n enUserName: "Lin Shanshan",\n phoneNumber: "+86 18792877372",\n email: "a@a.com",\n count: 4,\n description:\n "\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0",\n description2:\n "\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0",\n other: "\u5176\u4ed6\u4fe1\u606f",\n },\n {\n id: 1,\n date: "",\n datetime: "2023-07-22 09:00:00",\n serialNumber: "SX00192932323434",\n serialNumberShort: "SH0023",\n userName: "\u6797\u73ca\u73ca1",\n title: "\u6211\u662f\u4e3b\u8981\u5b57\u6bb5",\n tagEnum: "Y",\n enUserName: "Lin Shanshan",\n phoneNumber: null,\n email: "a@a.com",\n count: 5,\n description: "\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0",\n description2: "\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0",\n other: "\u5176\u4ed6\u4fe1\u606f",\n },\n ]}\n columns={[\n {\n name: "date",\n title: "\u65e5\u671f",\n type: "date",\n hover: true,\n },\n {\n name: "datetime",\n title: "\u65e5\u671f\u65f6\u95f4",\n type: "datetime",\n hideSecond: true,\n },\n {\n name: "serialNumber",\n title: "\u7f16\u53f7",\n type: "serialNumber",\n primary: true,\n onClick: async (item) => {\n console.log(item);\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(true);\n }, 10000);\n });\n },\n },\n {\n name: "serialNumberShort",\n title: "\u77ed\u7f16\u53f7",\n type: "serialNumberShort",\n },\n {\n name: "title",\n title: "\u4e3b\u8981\u4fe1\u606f",\n type: "mainInfo",\n },\n {\n name: "tag",\n title: "\u72b6\u6001\u6807\u7b7e",\n type: "tag",\n valueOf: () => ({ type: "success", text: "\u5ba1\u6838\u901a\u8fc7" }),\n },\n {\n name: "tagEnum",\n title: "\u6807\u7b7e\u679a\u4e3e",\n type: "tag",\n valueOf: (item) =>\n item.tagEnum && {\n type: "success",\n isEnum: true,\n moduleName: "marital",\n name: item.tagEnum,\n },\n },\n {\n name: "avatar",\n title: "\u5934\u50cf",\n type: "avatar",\n valueOf: () => ({ gender: "F" }),\n },\n {\n name: "user",\n title: "\u7528\u6237",\n type: "user",\n valueOf: (item) => `${item.enUserName} ${item.userName}`,\n },\n {\n name: "hideInfo",\n title: "\u9690\u85cf\u5b57\u6bb5",\n type: "hideInfo",\n valueOf: (item) =>\n item["phoneNumber"] && {\n loader: () => {\n return item["phoneNumber"] + "-" + item["id"];\n },\n },\n },\n {\n name: "userName",\n title: "\u7528\u6237\u540d",\n type: "userName",\n },\n {\n name: "contacts",\n title: "\u8054\u7cfb\u4eba",\n type: "contacts",\n valueOf: (item) => `${item.userName} ${item.phoneNumber}`,\n },\n {\n name: "count",\n title: "\u6570\u91cf",\n type: "singleRow",\n render: ({ target }) => {\n return target.count === 5 ? { hover: true } : { hover: false };\n },\n },\n {\n name: "description",\n title: "\u63cf\u8ff0",\n type: "description",\n },\n {\n name: "description2",\n title: "\u63cf\u8ff0(\u7701\u7565)",\n type: "description",\n ellipsis: true,\n },\n {\n name: "other",\n title: "\u5176\u4ed6",\n type: "other",\n hover: true,\n },\n {\n name: "options",\n title: "\u64cd\u4f5c",\n type: "options",\n valueOf: (item) => [\n {\n onClick: () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve();\n }, 1000);\n });\n },\n children: "\u5206\u914d",\n message: "\u786e\u5b9a\u8981\u5206\u914d\u5417",\n isDelete: false,\n },\n {\n children: "\u5ba1\u6838",\n },\n {\n onClick: () => {\n console.log(item);\n },\n children: "\u6dd8\u6c70",\n },\n {\n onClick: () => {\n console.log(item);\n },\n children: "\u4e00\u952e\u7ea6\u9762",\n },\n {\n children: "\u5220\u9664",\n confirm: true,\n onClick: () => {\n console.log("\u5220\u9664");\n },\n },\n ],\n },\n ]}\n />\n </PureGlobal>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Table",packageName:"@components/Table",component:a},{name:"_Global",packageName:"@components/Global",component:d},{name:"reactFetch",packageName:"@kne/react-fetch",component:o}]},{title:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u6807\u9898",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const { PureGlobal } = _Global;\nconst { TablePage } = _Table;\nconst { range } = lodash;\nconst BaseExample = () => {\n return (\n <PureGlobal\n preset={{\n features: {\n debug: true,\n profile: {\n id: "erc",\n type: "system",\n name: "\u4e1a\u52a1\u7cfb\u7edf",\n children: [\n {\n id: "test",\n type: "feature",\n name: "\u6d4b\u8bd5\u529f\u80fd",\n options: {\n hiddenColumns: ["date", "datetime"],\n },\n },\n ],\n },\n },\n }}\n >\n <TablePage\n featureId="test"\n name="test-2"\n sticky={false}\n rowSelection={{\n type: "checkbox",\n }}\n loader={() => {\n return {\n addUserName: "\u6211\u662f\u5927\u9b54\u738b",\n pageData: range(0, 50).map((index) => ({\n id: index,\n date: "2021-07-21",\n datetime: "2023-07-22 09:00:00",\n serialNumber: "SX00192932323434",\n serialNumberShort: "SH0023",\n userName: "\u6797\u73ca\u73ca" + index,\n title: "\u6211\u662f\u4e3b\u8981\u5b57\u6bb5",\n enUserName: "Lin Shanshan",\n phoneNumber: "+86 18792877372",\n email: "a@a.com",\n count: 5,\n description:\n "\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0",\n other: "\u5176\u4ed6\u4fe1\u606f",\n })),\n totalCount: 50,\n };\n }}\n columns={[\n {\n name: "date",\n title: "\u65e5\u671f",\n type: "date",\n hover: true,\n },\n {\n name: "datetime",\n title: "\u65e5\u671f\u65f6\u95f4",\n type: "datetime",\n },\n {\n name: "dateRange",\n title: "\u65e5\u671f\u8303\u56f4",\n type: "dateRange",\n valueOf: ({ date, datetime }) => [date, datetime],\n },\n {\n name: "serialNumber",\n title: "\u7f16\u53f7",\n type: "serialNumber",\n primary: true,\n },\n {\n name: "serialNumberShort",\n title: "\u77ed\u7f16\u53f7",\n type: "serialNumberShort",\n },\n {\n name: "title",\n title: "\u4e3b\u8981\u4fe1\u606f",\n type: "mainInfo",\n },\n {\n name: "phone",\n title: "\u624b\u673a\u53f7",\n type: "hideInfo",\n primary: true,\n valueOf: (item) => ({\n loader: () => {\n return item["phoneNumber"] + "-" + item["id"];\n },\n }),\n },\n {\n name: "email",\n title: "\u90ae\u7bb1",\n type: "hideInfo",\n valueOf: (item) => ({\n loader: () => {\n return item["email"] + "-" + item["id"];\n },\n children: (data) => {\n return `${data},${item["userName"]}`;\n },\n }),\n },\n {\n name: "tag",\n title: "\u72b6\u6001\u6807\u7b7e",\n type: "tag",\n valueOf: () => ({ type: "success", text: "\u5ba1\u6838\u901a\u8fc7" }),\n },\n {\n name: "avatar",\n title: "\u5934\u50cf",\n type: "avatar",\n valueOf: () => ({ gender: "F" }),\n },\n {\n name: "user",\n title: "\u7528\u6237",\n type: "user",\n valueOf: (item) => `${item.enUserName} ${item.userName}`,\n },\n {\n name: "userName",\n title: "\u7528\u6237\u540d",\n type: "userName",\n },\n {\n name: "contacts",\n title: "\u8054\u7cfb\u4eba",\n type: "contacts",\n valueOf: (item) => `${item.userName} ${item.phoneNumber}`,\n },\n {\n name: "count",\n title: "\u6570\u91cf",\n type: "singleRow",\n },\n {\n name: "description",\n title: "\u63cf\u8ff0(\u7701\u7565)",\n type: "description",\n ellipsis: true,\n },\n {\n name: "other",\n title: "\u5176\u4ed6",\n type: "other",\n hover: true,\n },\n {\n name: "addUser",\n title: "\u6dfb\u52a0\u4eba",\n type: "user",\n render: ({ data }) => ({ valueOf: () => data.addUserName }),\n },\n {\n name: "options",\n title: "\u64cd\u4f5c",\n type: "options",\n fixed: "right",\n valueOf: (item) => [\n {\n onClick: () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve();\n }, 1000);\n });\n },\n children: "\u7f16\u8f91",\n disabled: true,\n tooltipProps: {\n title: "\u4e0d\u80fd\u7f16\u8f91\u8fd9\u6761\u4fe1\u606f",\n },\n },\n {\n children: "\u5ba1\u6838",\n tooltipProps: {\n title: (\n <div\n style={{ padding: "10px", backgroundColor: "skyblue" }}\n >\n \u5ba1\u6838\u64cd\u4f5c\u7684tooltip\n </div>\n ),\n },\n },\n {\n onClick: () => {\n console.log(item);\n },\n children: "\u6dd8\u6c70",\n },\n {\n onClick: () => {\n console.log(item);\n },\n children: "\u4e00\u952e\u7ea6\u9762",\n },\n {\n children: "\u5220\u9664",\n },\n ],\n },\n ]}\n />\n </PureGlobal>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Table",packageName:"@components/Table",component:a},{name:"lodash",packageName:"lodash",component:r},{name:"_Global",packageName:"@components/Global",component:d}]},{title:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u6807\u9898",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const { default: Table } = _Table;\nconst { PureGlobal } = _Global;\nconst { preset } = reactFetch;\nconst { useState } = React;\nconst { Input } = antd;\nconst ajax = (config) => {\n return new Promise((resolve) => {\n setTimeout(() => {\n if (config.url === "/api/v1/user/user/user_key_get") {\n resolve({\n data: {\n code: 0,\n data: `{"date":{},"serialNumber":{"width":400}}`,\n },\n });\n } else if (config.url === "/api/v1/user/user/user_key_set") {\n console.log(config.data);\n resolve({\n data: {\n code: 0,\n data: "",\n },\n });\n }\n }, 100);\n });\n};\n\npreset({\n ajax,\n});\n\nconst ValueEdit = ({ value, targetRender }) => {\n const [isEdit, setIsEdit] = useState(false);\n return (\n <span\n onClick={() => {\n setIsEdit(true);\n }}\n >\n {isEdit ? (\n <Input\n type="text"\n size="small"\n defaultValue={value}\n onBlur={() => {\n setIsEdit(false);\n }}\n />\n ) : (\n targetRender(value)\n )}\n </span>\n );\n};\n\nconst BaseExample = () => {\n return (\n <PureGlobal\n preset={{\n ajax,\n tableServerApis: {\n getDataApi: (name) => {\n return {\n url: "/api/v1/user/user/user_key_get",\n method: "GET",\n params: {\n key: `table_config_v2_${name}`,\n },\n transformResponse: (response) => {\n const { data } = response;\n response.data = Object.assign({}, data, {\n data: (() => {\n try {\n return JSON.parse(data.data);\n } catch (e) {\n return [];\n }\n })(),\n });\n\n response.data = {\n code: response.data.code === 0 ? 200 : data.code,\n msg: response.data.msg,\n results: response.data.data,\n };\n\n return response;\n },\n cache: "TABLE_PAGE_CONFIG",\n };\n },\n setDataFunc: (name, data) => {\n return ajax({\n url: "/api/v1/user/user/user_key_set",\n data: {\n map: {\n [`table_config_v2_${name}`]: JSON.stringify(data),\n },\n },\n });\n },\n },\n }}\n >\n <Table\n name="test-table"\n dataSource={[\n {\n id: 0,\n date: "2021-07-21",\n datetime: "2023-07-22 09:00:00",\n serialNumber: "SX00192932323434",\n serialNumberShort: "SH0023",\n userName: "\u6797\u73ca\u73ca",\n title: "\u6211\u662f\u4e3b\u8981\u5b57\u6bb5",\n tagEnum: "Y",\n enUserName: "Lin Shanshan",\n phoneNumber: "+86 18792877372",\n email: "a@a.com",\n count: 4,\n description:\n "\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0",\n description2:\n "\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0",\n other: "\u5176\u4ed6\u4fe1\u606f",\n },\n {\n id: 1,\n date: "",\n datetime: "2023-07-22 09:00:00",\n serialNumber: "SX00192932323434",\n serialNumberShort: "SH0023",\n userName: "\u6797\u73ca\u73ca1",\n title: "\u6211\u662f\u4e3b\u8981\u5b57\u6bb5",\n tagEnum: "Y",\n enUserName: "Lin Shanshan",\n phoneNumber: "+86 18792877372",\n email: "a@a.com",\n count: 5,\n description: "\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0",\n description2: "\u6211\u662f\u4e00\u6bb5\u63cf\u8ff0",\n other: "\u5176\u4ed6\u4fe1\u606f",\n },\n ]}\n columns={[\n {\n name: "date",\n title: "\u65e5\u671f",\n sort: true,\n groupHeader: [\n {\n name: "group1",\n title: "\u5206\u7ec41",\n },\n {\n name: "group1-1",\n title: "\u5206\u7ec41-1",\n },\n ],\n type: "date",\n hover: true,\n },\n {\n name: "datetime",\n title: "\u65e5\u671f\u65f6\u95f4",\n sort: true,\n groupHeader: [\n {\n name: "group1",\n title: "\u5206\u7ec41",\n },\n {\n name: "group1-2",\n title: "\u5206\u7ec41-2",\n },\n ],\n type: "datetime",\n },\n {\n name: "serialNumber",\n title: "\u7f16\u53f7",\n sort: true,\n groupHeader: [\n {\n name: "group1",\n title: "\u5206\u7ec41",\n },\n {\n name: "group1-1",\n title: "\u5206\u7ec41-1",\n },\n ],\n type: "serialNumber",\n primary: true,\n },\n {\n name: "serialNumberShort",\n title: "\u77ed\u7f16\u53f7",\n type: "serialNumberShort",\n },\n {\n name: "title",\n title: "\u4e3b\u8981\u4fe1\u606f",\n type: "mainInfo",\n disableColItem: true,\n valueOf: (item, { targetRender }) => (\n <ValueEdit value={item["title"]} targetRender={targetRender} />\n ),\n },\n {\n name: "tag",\n title: "\u72b6\u6001\u6807\u7b7e",\n type: "tag",\n valueOf: () => ({ type: "success", text: "\u5ba1\u6838\u901a\u8fc7" }),\n },\n {\n name: "tagEnum",\n title: "\u6807\u7b7e\u679a\u4e3e",\n type: "tag",\n valueOf: (item) => ({\n type: "success",\n isEnum: true,\n moduleName: "marital",\n name: item.tagEnum,\n }),\n },\n {\n name: "avatar",\n title: "\u5934\u50cf",\n type: "avatar",\n valueOf: () => ({ gender: "F" }),\n },\n {\n name: "user",\n title: "\u7528\u6237",\n type: "user",\n valueOf: (item) => `${item.enUserName} ${item.userName}`,\n },\n {\n name: "hideInfo",\n title: "\u9690\u85cf\u5b57\u6bb5",\n type: "hideInfo",\n valueOf: (item) => ({\n loader: () => {\n return item["phoneNumber"] + "-" + item["id"];\n },\n }),\n },\n {\n name: "userName",\n title: "\u7528\u6237\u540d",\n type: "userName",\n },\n {\n name: "contacts",\n title: "\u8054\u7cfb\u4eba",\n type: "contacts",\n valueOf: (item) => `${item.userName} ${item.phoneNumber}`,\n },\n {\n name: "count",\n title: "\u6570\u91cf",\n type: "singleRow",\n render: ({ target }) => {\n return target.count === 5 ? { hover: true } : { hover: false };\n },\n },\n {\n name: "description",\n title: "\u63cf\u8ff0",\n type: "description",\n },\n {\n name: "description2",\n title: "\u63cf\u8ff0(\u7701\u7565)",\n type: "description",\n ellipsis: true,\n },\n {\n name: "other",\n title: "\u5176\u4ed6",\n type: "other",\n hover: true,\n sort: true,\n },\n {\n name: "options",\n title: "\u64cd\u4f5c",\n type: "options",\n fixed: "right",\n sort: true,\n valueOf: (item) => [\n {\n onClick: () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve();\n }, 1000);\n });\n },\n children: "\u5206\u914dProgram\u53ca\u6559\u7ec3",\n },\n {\n children: "\u5ba1\u6838",\n },\n {\n onClick: () => {\n console.log(item);\n },\n children: "\u6dd8\u6c70",\n },\n {\n onClick: () => {\n console.log(item);\n },\n children: "\u4e00\u952e\u7ea6\u9762",\n },\n {\n children: "\u5220\u9664",\n },\n ],\n },\n ]}\n onSortChange={(sort) => {\n console.log(">>>>>>", sort);\n }}\n />\n </PureGlobal>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Table",packageName:"@components/Table",component:a},{name:"_Global",packageName:"@components/Global",component:d},{name:"reactFetch",packageName:"@kne/react-fetch",component:o},{name:"antd",packageName:"antd",component:e(55199)}]}]}}},91026(n,t,e){e.d(t,{A:()=>d});var a=e(29556);const d={name:"Tooltip",summary:"<p>\u7b80\u5355\u7684\u6587\u5b57\u63d0\u793a\u6c14\u6ce1\u6846</p>",api:"<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>size</td>\n<td>\u9ed8\u8ba4\u5bbd\u5ea6 360\uff0csmall \u5bbd\u5ea6 240</td>\n<td>string</td>\n<td>-</td>\n</tr>\n<tr>\n<td>title</td>\n<td>\u6807\u9898\u5185\u5bb9</td>\n<td>string,jsx</td>\n<td>-</td>\n</tr>\n<tr>\n<td>showInfo</td>\n<td>\u5c55\u793a\u6807\u9898\u65c1\u7684\u63d0\u793a\u6309\u94ae</td>\n<td>boolean</td>\n<td>-</td>\n</tr>\n<tr>\n<td>importantInfo</td>\n<td>\u91cd\u8981\u5185\u5bb9</td>\n<td>string,jsx</td>\n<td>-</td>\n</tr>\n<tr>\n<td>subtitle</td>\n<td>\u526f\u6807\u9898</td>\n<td>string,jsx</td>\n<td>-</td>\n</tr>\n<tr>\n<td>content</td>\n<td>\u5185\u5bb9</td>\n<td>string,jsx</td>\n<td>-</td>\n</tr>\n<tr>\n<td>importantInfoType</td>\n<td>\u91cd\u8981\u5185\u5bb9\u7c7b\u578b\uff0csuccess,error,warning</td>\n<td>string,jsx</td>\n<td>-</td>\n</tr>\n<tr>\n<td>moreInfo</td>\n<td>\u5176\u4ed6\u5185\u5bb9</td>\n<td>jsx</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>TooltipFetch</h3>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>api</td>\n<td>\u83b7\u53d6\u6570\u636e\u7684\u63a5\u53e3\uff0c\u53c2\u8003@kne/react-fetch</td>\n<td>object</td>\n<td>-</td>\n</tr>\n<tr>\n<td>fetchContent</td>\n<td>\u5f53api\u63a5\u53e3\u8fd4\u56de\u503c\u7684\u65f6\u5019\u8c03\u7528\uff0c\u53ef\u4ee5\u83b7\u53d6\u5230\u63a5\u53e3\u53c2\u6570\uff0c\u8fd4\u56de\u503c\u4f1a\u66f4\u65b0\u5230Tootip\u7684\u53c2\u6570\u4e2d</td>\n<td>function</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>",example:{isFull:!1,className:"",style:"",list:[{title:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u6807\u9898",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const { default: Tooltip, TooltipInfoLabel } = _Tooltip;\nconst { default: Space } = space;\nconst {\n default: FormInfo,\n Form,\n Input,\n TypeDateRangePicker,\n SubmitButton,\n CancelButton,\n} = formInfo;\n\nconst MoreInfo = () => {\n return (\n <Form>\n <FormInfo\n column={1}\n list={[\n <Input label="\u59d3\u540d" name="name" rule="REQ" />,\n <TypeDateRangePicker\n name="type_date"\n label="\u65e5\u671f\u65f6\u95f4\u6bb5"\n rule="REQ"\n />,\n <Space\n style={{\n width: "100%",\n justifyContent: "end",\n }}\n >\n <CancelButton>\u53d6\u6d88</CancelButton>\n <SubmitButton>\u786e\u5b9a</SubmitButton>\n </Space>,\n ]}\n />\n </Form>\n );\n};\n\nconst BaseExample = () => {\n return (\n <Space>\n <Tooltip content="\u8fd9\u91cc\u663e\u793a\u5b8c\u6574\u7684\u4fe1\u606f">\u5c0f\u6bb5\u4fe1\u606f</Tooltip>\n <Tooltip\n size="small"\n content="\u8fd9\u91cc\u663e\u793a\u5b8c\u6574\u7684\u4fe1\u606f\u5b8c\u6574\u7684\u4fe1\u606f\uff0c\u8fd9\u91cc\u663e\u793a\u5b8c\u6574\u7684\u4fe1\u606f\u5b8c\u6574\u7684\u4fe1\u606f\u8fd9\u91cc\u663e\u793a\u5b8c\u6574\u7684\u4fe1\u606f\u5b8c\u6574\u7684\u4fe1\u606f\u8fd9\u91cc\u663e\u793a\u5b8c\u6574\u7684\u4fe1\u606f\u5b8c\u6574\u7684\u4fe1\u606f\uff0c\u8fd9\u91cc\u663e\u793a\u5b8c\u6574\u7684\u4fe1\u606f\u3002"\n >\n \u5927\u6bb5\u4fe1\u606f\n </Tooltip>\n <Tooltip title="\u6807\u9898" content="\u5185\u5bb9\u63cf\u8ff0\u5185\u5bb9\u63cf\u8ff0\u5185\u5bb9\u3002">\n \u5e26\u6709\u6807\u9898\u7684\u5c0f\u6bb5\u4fe1\u606f\n </Tooltip>\n <Tooltip\n title="\u6807\u9898"\n content="\u5185\u5bb9\u63cf\u8ff0\u5185\u5bb9\u63cf\u8ff0\u5185\u5bb9\u63cf\u8ff0\u5185\u5bb9\u63cf\u8ff0\u5185\u5bb9\u63cf\u8ff0\u5185\u5bb9\u63cf\u8ff0\u5185\u5bb9\u63cf\u8ff0\u5185\u5bb9\u63cf\u8ff0\u5185\u5bb9\u63cf\u8ff0\u5185\u5bb9\u63cf\u8ff0\u5185\u5bb9\u63cf\u8ff0"\n >\n \u5e26\u6709\u6807\u9898\u7684\u5927\u6bb5\u4fe1\u606f\n </Tooltip>\n <Tooltip\n importantInfo="\u7b5b\u9009\u65e5\u671f\u8303\u56f4\u5185\uff0c\u804c\u4f4d\u4e0a\u5b89\u6392\u987e\u95ee\u9762\u8bd5\u7684\u5019\u9009\u4eba\u603b\u6570\u3002\u6839\u636e\u6240\u586b\u5199\u7684\u987e\u95ee\u3010\u9762\u8bd5\u9762\u8bd5\u3011\u65f6\u95f4\u6765\u8fdb\u884c\u7edf\u8ba1\uff0c\u800c\u975e\u5728\u7cfb\u7edf\u7684\u64cd\u4f5c\u65f6\u95f4\u3002"\n subtitle="\u793a\u4f8b:"\n content="2022.10.21\u5728\u7cfb\u7edf\u64cd\u4f5c\u987e\u95ee\u9762\u8bd5\uff0c\u4f46\u586b\u5199\u7684\u987e\u95ee\u9762\u8bd5\u65f6\u95f4\u4e3a2022.10.20\uff0c\u5219\u6570\u636e\u4f1a\u7edf\u8ba1\u57282022.10.20\uff0c\u800c\u975e2022.10.21 \u3002"\n >\n \u5e26\u6709\u91cd\u8981\u4fe1\u606f\n </Tooltip>\n <TooltipInfoLabel\n title="\u5e26\u6709Info\u4fe1\u606f"\n tooltipTitle={{\n importantInfo:\n "\u7b5b\u9009\u65e5\u671f\u8303\u56f4\u5185\uff0c\u804c\u4f4d\u4e0a\u5b89\u6392\u987e\u95ee\u9762\u8bd5\u7684\u5019\u9009\u4eba\u603b\u6570\u3002\u6839\u636e\u6240\u586b\u5199\u7684\u987e\u95ee\u3010\u9762\u8bd5\u9762\u8bd5\u3011\u65f6\u95f4\u6765\u8fdb\u884c\u7edf\u8ba1\uff0c\u800c\u975e\u5728\u7cfb\u7edf\u7684\u64cd\u4f5c\u65f6\u95f4\u3002",\n subtitle: "\u793a\u4f8b:",\n content:\n "2022.10.21\u5728\u7cfb\u7edf\u64cd\u4f5c\u987e\u95ee\u9762\u8bd5\uff0c\u4f46\u586b\u5199\u7684\u987e\u95ee\u9762\u8bd5\u65f6\u95f4\u4e3a2022.10.20\uff0c\u5219\u6570\u636e\u4f1a\u7edf\u8ba1\u57282022.10.20\uff0c\u800c\u975e2022.10.21 \u3002",\n }}\n />\n <Tooltip\n trigger="click"\n title="\u6807\u9898"\n content="\u8f85\u52a9\u4fe1\u606f\u63cf\u8ff0\u5185\u5bb9\u8f85\u52a9\u4fe1\u606f\u63cf\u8ff0\u5185\u5bb9\u8f85\u52a9\u4fe1\u606f\u63cf\u8ff0\u5185\u5bb9\u8f85\u52a9\u4fe1\u606f\u63cf\u8ff0\u5185\u5bb9\u8f85\u52a9\u4fe1\u606f\u63cf\u8ff0\u5185\u5bb9"\n moreInfo={<MoreInfo />}\n >\n \u5e26\u6709\u8868\u5355\u4fe1\u606f\n </Tooltip>\n </Space>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Tooltip",packageName:"@components/Tooltip",component:a},{name:"space",packageName:"antd/lib/space",component:e(8002)},{name:"formInfo",packageName:"@components/FormInfo",component:e(96252)}]},{title:"\u5e26\u6709\u8fdc\u7a0b\u6570\u636e\u52a0\u8f7d\u7684\u63d0\u793a",description:"\u5c55\u793a\u5e26\u6709\u8fdc\u7a0b\u6570\u636e\u52a0\u8f7d\u7684\u63d0\u793a",code:'const { TooltipFetch } = _Tooltip;\nconst { preset } = reactFetch;\nconst { default: Descriptions } = _Descriptions;\nconst { default: StateTag } = _StateTag;\n\npreset({\n ajax: () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: {\n code: 0,\n data: {\n clientName: "\u817e\u8baf",\n title: "\u817e\u8baf\u79d1\u6280\u516c\u53f8",\n type: "\u589e\u503c\u7a0e\u4e13\u7528\u53d1\u7968",\n date: "2022-08-15",\n },\n },\n });\n }, 1000);\n });\n },\n});\n\nconst BaseExample = () => {\n return (\n <TooltipFetch\n api={{\n url: "/api/data",\n }}\n size="large"\n fetchContent={(data) => {\n return {\n content: (\n <Descriptions\n dataSource={[\n [\n { label: "\u5ba2\u6237\u540d\u79f0", content: data.clientName },\n { label: "\u53d1\u7968\u62ac\u5934", content: data.title },\n ],\n [\n { label: "\u53d1\u7968\u7c7b\u578b", content: data.type },\n { label: "\u53d1\u7968\u65e5\u671f", content: data.date },\n ],\n ]}\n />\n ),\n };\n }}\n >\n <StateTag text="\u54c8\u54c8\u54c8" />\n </TooltipFetch>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_Tooltip",packageName:"@components/Tooltip",component:a},{name:"reactFetch",packageName:"@kne/react-fetch",component:e(87558)},{name:"_Descriptions",packageName:"@components/Descriptions",component:e(5633)},{name:"_StateTag",packageName:"@components/StateTag",component:e(3874)}]}]}}},82723(n,t,e){e.r(t),e.d(t,{default:()=>a.Content});var a=e(25668)},5633(n,t,e){e.r(t),e.d(t,{default:()=>a.Descriptions});e(55664);var a=e(25668)},24666(n,t,e){e.r(t),e.d(t,{default:()=>v});const a="style_overlay__ZS5Wz__CoAiq",d="style_overlay-content__IVFmc__CoAiq",o="style_state-tag__+59RJ__CoAiq";var r=e(73884),l=e(25644),i=e(3874),s=e(55199),c=e(69175),p=e.n(c),m=e(20977),u=e.n(m),h=e(70720),g=e(83136),b=e.n(g),y=e(70579);const v=n=>{let{className:t,overlayClassName:e,storeName:c="HISTORY_STORE_KEY",maxLength:m=5,label:g="\u6700\u8fd1\u641c\u7d22",children:v,onSelect:f,zIndex:S,getPopupContainer:x}=n;const[k,T]=(0,r.useState)(()=>l.A.getItem(c)\|\|[]),[F,I]=(0,r.useState)(!1),B=(0,r.useCallback)(()=>{0!==k.length&&I(!0)},[k]),C=(0,r.useRef)(c);C.current=c,(0,r.useEffect)(()=>{l.A.setItem(C.current,k)},[k]);const P=(0,r.useCallback)(n=>{n.value&&n.label&&T(t=>{const e=p()(t,{value:n.value});return e.splice(0,0,n),m?u()(e,"value").slice(0,m):e}),I(!1)},[m]),N=(0,r.useCallback)(()=>{I(!1)},[]),w=(0,h.default)(N),E=(0,r.useRef)(null),R=(0,r.useRef)(null);w.current={contains:n=>E.current.contains(n)\|\|F&&R.current.contains(n)};const D=(0,r.useRef)(null),[L,A]=(0,r.useState)(0);return(0,r.useLayoutEffect)(()=>{const n=()=>{A(E.current.clientWidth)};n();const t=new ResizeObserver(n);t.observe(E.current);const e=new MutationObserver(n);return e.observe(E.current,{subtree:!0,childList:!0}),()=>{e.disconnect(),t.disconnect()}},[]),(0,y.jsx)(s.Popover,{zIndex:S,placement:"bottom",transitionName:"ant-slide-up",arrow:!1,open:F,getPopupContainer:x,overlayClassName:b()(e,a),content:(0,y.jsx)("div",{className:d,style:{width:L},ref:R,children:(0,y.jsxs)(s.Space,{direction:"vertical",children:[(0,y.jsx)("div",{children:g}),(0,y.jsx)(s.Space,{wrap:!0,children:k.map(n=>(0,y.jsx)(i.default,{className:o,text:n.label,type:"result",onClick:()=>{f&&f(n.value,n),D.current&&D.current(n.value,n),N(),P(n)}}))})]})}),children:(0,y.jsx)("div",{ref:E,className:b()(t),children:v({open:F,openHistory:B,appendHistory:P,setOnSelect:n=>{D.current=n},close:N})})})}}}]);
2	- //# sourceMappingURL=7394.d52d668e.chunk.js.map