@kne-components/button-group 0.1.22 → 0.1.23

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 (17) hide show
  1. package/build/asset-manifest.json +12 -12
  2. package/build/index.html +1 -1
  3. package/build/remoteEntry.js +1 -1
  4. package/build/remoteEntry.js.map +1 -1
  5. package/build/static/js/155.8c880363.chunk.js +2 -0
  6. package/build/static/js/155.8c880363.chunk.js.map +1 -0
  7. package/build/static/js/{72.63abbd17.chunk.js → 72.4007f4c4.chunk.js} +2 -2
  8. package/build/static/js/{72.63abbd17.chunk.js.map → 72.4007f4c4.chunk.js.map} +1 -1
  9. package/build/static/js/{784.9ff531a5.chunk.js → 784.ce58bf47.chunk.js} +2 -2
  10. package/build/static/js/{784.9ff531a5.chunk.js.map → 784.ce58bf47.chunk.js.map} +1 -1
  11. package/build/static/js/{872.de24a139.chunk.js → 872.bbb90254.chunk.js} +2 -2
  12. package/build/static/js/{872.de24a139.chunk.js.map → 872.bbb90254.chunk.js.map} +1 -1
  13. package/build/static/js/{main.3885ec4a.js → main.797aeb83.js} +2 -2
  14. package/build/static/js/{main.3885ec4a.js.map → main.797aeb83.js.map} +1 -1
  15. package/package.json +1 -1
  16. package/build/static/js/155.fad08abd.chunk.js +0 -2
  17. package/build/static/js/155.fad08abd.chunk.js.map +0 -1
package/build/static/js/{784.9ff531a5.chunk.js → 784.ce58bf47.chunk.js} RENAMED
@@ -1,2 +1,2 @@
1
- "use strict";(self.webpackChunk_kne_components_button_group=self.webpackChunk_kne_components_button_group||[]).push([[784],{8151(o,n,u){u.r(n),u.d(n,{default:()=>t,manifest:()=>e});const t={ButtonGroup:u(58872).A},e={name:"button-group",version:"0.1.22","open-version":!0,"public-url":"/button-group",modules:[{name:"button-group",baseDir:"/home/runner/work/button-group/button-group",description:"\u5b9e\u73b0\u4e86\u4e00\u4e2a\u6309\u94ae\u7ec4,loading\u6309\u94ae,\u786e\u8ba4\u6309\u94ae\u548c\u52a0\u8f7d\u6309\u94ae.",packageName:"@kne/button-group"}]}}}]);
2
- //# sourceMappingURL=784.9ff531a5.chunk.js.map
1
+ "use strict";(self.webpackChunk_kne_components_button_group=self.webpackChunk_kne_components_button_group||[]).push([[784],{8151(o,n,u){u.r(n),u.d(n,{default:()=>t,manifest:()=>e});const t={ButtonGroup:u(58872).A},e={name:"button-group",version:"0.1.23","open-version":!0,"public-url":"/button-group",modules:[{name:"button-group",baseDir:"/home/runner/work/button-group/button-group",description:"\u5b9e\u73b0\u4e86\u4e00\u4e2a\u6309\u94ae\u7ec4,loading\u6309\u94ae,\u786e\u8ba4\u6309\u94ae\u548c\u52a0\u8f7d\u6309\u94ae.",packageName:"@kne/button-group"}]}}}]);
2
+ //# sourceMappingURL=784.ce58bf47.chunk.js.map
package/build/static/js/{784.9ff531a5.chunk.js.map → 784.ce58bf47.chunk.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"static/js/784.9ff531a5.chunk.js","mappings":"qLAA6D,SAAgBA,Y,SAAWA,GAC3EC,EAAW,CAAC,KAAO,eAAe,QAAU,SAAS,gBAAe,EAAK,aAAa,gBAAgB,QAAU,CAAC,CAAC,KAAO,eAAe,QAAU,8CAA8C,YAAc,+HAAgC,YAAc,sB","sources":["../node_modules/readme/modules.js"],"sourcesContent":["import ButtonGroup from '@components/button-group/README.md';export default {ButtonGroup};\nexport const manifest = {\"name\":\"button-group\",\"version\":\"0.1.22\",\"open-version\":true,\"public-url\":\"/button-group\",\"modules\":[{\"name\":\"button-group\",\"baseDir\":\"/home/runner/work/button-group/button-group\",\"description\":\"实现了一个按钮组,loading按钮,确认按钮和加载按钮.\",\"packageName\":\"@kne/button-group\"}]};"],"names":["ButtonGroup","manifest"],"sourceRoot":""}
1
+ {"version":3,"file":"static/js/784.ce58bf47.chunk.js","mappings":"qLAA6D,SAAgBA,Y,SAAWA,GAC3EC,EAAW,CAAC,KAAO,eAAe,QAAU,SAAS,gBAAe,EAAK,aAAa,gBAAgB,QAAU,CAAC,CAAC,KAAO,eAAe,QAAU,8CAA8C,YAAc,+HAAgC,YAAc,sB","sources":["../node_modules/readme/modules.js"],"sourcesContent":["import ButtonGroup from '@components/button-group/README.md';export default {ButtonGroup};\nexport const manifest = {\"name\":\"button-group\",\"version\":\"0.1.23\",\"open-version\":true,\"public-url\":\"/button-group\",\"modules\":[{\"name\":\"button-group\",\"baseDir\":\"/home/runner/work/button-group/button-group\",\"description\":\"实现了一个按钮组,loading按钮,确认按钮和加载按钮.\",\"packageName\":\"@kne/button-group\"}]};"],"names":["ButtonGroup","manifest"],"sourceRoot":""}
package/build/static/js/{872.de24a139.chunk.js → 872.bbb90254.chunk.js} RENAMED
@@ -1,2 +1,2 @@
1
- "use strict";(self.webpackChunk_kne_components_button_group=self.webpackChunk_kne_components_button_group||[]).push([[872],{58872(n,t,e){e.d(t,{A:()=>r});var o=e(28711),a=e(28833);const r={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>",description:"\u5b9e\u73b0\u4e86\u4e00\u4e2a\u6309\u94ae\u7ec4,loading\u6309\u94ae,\u786e\u8ba4\u6309\u94ae\u548c\u52a0\u8f7d\u6309\u94ae.",packageName:"@kne/button-group",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&lt;object | function&gt;</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 }) =&gt; 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 }) =&gt; {\n return { data: 'response data' };\n }\n}\n\n// \u51fd\u6570\u5f62\u5f0f\napi: async ({ params }) =&gt; {\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/current-lib_button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:o},{name:"antd",packageName:"antd",component:a}]},{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/current-lib_button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:o},{name:"antd",packageName:"antd",component:a}]},{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/current-lib_button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:o},{name:"antd",packageName:"antd",component:a}]},{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 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 data: {\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 });\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/current-lib_button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:o},{name:"antd",packageName:"antd",component:a}]},{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/current-lib_button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:o},{name:"antd",packageName:"antd",component:a}]}]}}}}]);
2
- //# sourceMappingURL=872.de24a139.chunk.js.map
1
+ "use strict";(self.webpackChunk_kne_components_button_group=self.webpackChunk_kne_components_button_group||[]).push([[872],{58872(n,t,e){e.d(t,{A:()=>r});var o=e(28711),a=e(28833);const r={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>",description:"\u5b9e\u73b0\u4e86\u4e00\u4e2a\u6309\u94ae\u7ec4,loading\u6309\u94ae,\u786e\u8ba4\u6309\u94ae\u548c\u52a0\u8f7d\u6309\u94ae.",packageName:"@kne/button-group",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&lt;object | function&gt;</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 }) =&gt; 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 }) =&gt; {\n return { data: 'response data' };\n }\n}\n\n// \u51fd\u6570\u5f62\u5f0f\napi: async ({ params }) =&gt; {\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/current-lib_button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:o},{name:"antd",packageName:"antd",component:a}]},{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/current-lib_button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:o},{name:"antd",packageName:"antd",component:a}]},{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/current-lib_button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:o},{name:"antd",packageName:"antd",component:a}]},{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/current-lib_button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:o},{name:"antd",packageName:"antd",component:a}]},{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/current-lib_button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:o},{name:"antd",packageName:"antd",component:a}]}]}}}}]);
2
+ //# sourceMappingURL=872.bbb90254.chunk.js.map