seven-design-ui 0.0.1

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 (157) hide show
  1. package/.eslintrc.json +35 -0
  2. package/.prettierrc.json +10 -0
  3. package/CONTRIBUTING.md +350 -0
  4. package/PROJECT_STRUCTURE.md +343 -0
  5. package/README.md +83 -0
  6. package/app/globals.css +125 -0
  7. package/app/layout.tsx +45 -0
  8. package/app/page.tsx +202 -0
  9. package/components/theme-provider.tsx +11 -0
  10. package/components/ui/accordion.tsx +66 -0
  11. package/components/ui/alert-dialog.tsx +157 -0
  12. package/components/ui/alert.tsx +66 -0
  13. package/components/ui/aspect-ratio.tsx +11 -0
  14. package/components/ui/avatar.tsx +53 -0
  15. package/components/ui/badge.tsx +46 -0
  16. package/components/ui/breadcrumb.tsx +109 -0
  17. package/components/ui/button-group.tsx +83 -0
  18. package/components/ui/button.tsx +60 -0
  19. package/components/ui/calendar.tsx +213 -0
  20. package/components/ui/card.tsx +92 -0
  21. package/components/ui/carousel.tsx +241 -0
  22. package/components/ui/chart.tsx +353 -0
  23. package/components/ui/checkbox.tsx +32 -0
  24. package/components/ui/collapsible.tsx +33 -0
  25. package/components/ui/command.tsx +184 -0
  26. package/components/ui/context-menu.tsx +252 -0
  27. package/components/ui/dialog.tsx +143 -0
  28. package/components/ui/drawer.tsx +135 -0
  29. package/components/ui/dropdown-menu.tsx +257 -0
  30. package/components/ui/empty.tsx +104 -0
  31. package/components/ui/field.tsx +244 -0
  32. package/components/ui/form.tsx +167 -0
  33. package/components/ui/hover-card.tsx +44 -0
  34. package/components/ui/input-group.tsx +169 -0
  35. package/components/ui/input-otp.tsx +77 -0
  36. package/components/ui/input.tsx +21 -0
  37. package/components/ui/item.tsx +193 -0
  38. package/components/ui/kbd.tsx +28 -0
  39. package/components/ui/label.tsx +24 -0
  40. package/components/ui/menubar.tsx +276 -0
  41. package/components/ui/navigation-menu.tsx +166 -0
  42. package/components/ui/pagination.tsx +127 -0
  43. package/components/ui/popover.tsx +48 -0
  44. package/components/ui/progress.tsx +31 -0
  45. package/components/ui/radio-group.tsx +45 -0
  46. package/components/ui/resizable.tsx +56 -0
  47. package/components/ui/scroll-area.tsx +58 -0
  48. package/components/ui/select.tsx +185 -0
  49. package/components/ui/separator.tsx +28 -0
  50. package/components/ui/sheet.tsx +139 -0
  51. package/components/ui/sidebar.tsx +726 -0
  52. package/components/ui/skeleton.tsx +13 -0
  53. package/components/ui/slider.tsx +63 -0
  54. package/components/ui/sonner.tsx +25 -0
  55. package/components/ui/spinner.tsx +16 -0
  56. package/components/ui/switch.tsx +31 -0
  57. package/components/ui/table.tsx +116 -0
  58. package/components/ui/tabs.tsx +66 -0
  59. package/components/ui/textarea.tsx +18 -0
  60. package/components/ui/toast.tsx +129 -0
  61. package/components/ui/toaster.tsx +35 -0
  62. package/components/ui/toggle-group.tsx +73 -0
  63. package/components/ui/toggle.tsx +47 -0
  64. package/components/ui/tooltip.tsx +61 -0
  65. package/components/ui/use-mobile.tsx +19 -0
  66. package/components/ui/use-toast.ts +191 -0
  67. package/components.json +21 -0
  68. package/docs/components/button.mdx +155 -0
  69. package/docs/components/input.mdx +157 -0
  70. package/docs/components/pagination.mdx +186 -0
  71. package/docs/components/switch.mdx +134 -0
  72. package/docs/doc_build/.nojekyll +0 -0
  73. package/docs/doc_build/404.html +15 -0
  74. package/docs/doc_build/components/button.html +39 -0
  75. package/docs/doc_build/components/input.html +39 -0
  76. package/docs/doc_build/components/pagination.html +39 -0
  77. package/docs/doc_build/components/switch.html +38 -0
  78. package/docs/doc_build/guide/introduction.html +58 -0
  79. package/docs/doc_build/guide/quick-start.html +98 -0
  80. package/docs/doc_build/guide/theme.html +139 -0
  81. package/docs/doc_build/index.html +15 -0
  82. package/docs/doc_build/logo.svg +1 -0
  83. package/docs/doc_build/static/css/styles.5a3e7113.css +1 -0
  84. package/docs/doc_build/static/js/414.04bb58dd.js +6 -0
  85. package/docs/doc_build/static/js/414.04bb58dd.js.LICENSE.txt +21 -0
  86. package/docs/doc_build/static/js/async/166.f43be01a.js +2 -0
  87. package/docs/doc_build/static/js/async/166.f43be01a.js.LICENSE.txt +19 -0
  88. package/docs/doc_build/static/js/async/218.cd780e24.js +1 -0
  89. package/docs/doc_build/static/js/async/232.11414fd7.js +1 -0
  90. package/docs/doc_build/static/js/async/416.b217df75.js +1 -0
  91. package/docs/doc_build/static/js/async/509.97958e51.js +1 -0
  92. package/docs/doc_build/static/js/async/512.9047d21e.js +1 -0
  93. package/docs/doc_build/static/js/async/531.131f5963.js +1 -0
  94. package/docs/doc_build/static/js/async/562.b402b94f.js +2 -0
  95. package/docs/doc_build/static/js/async/562.b402b94f.js.LICENSE.txt +11 -0
  96. package/docs/doc_build/static/js/async/637.cb5d76c9.js +1 -0
  97. package/docs/doc_build/static/js/async/712.558b85be.js +1 -0
  98. package/docs/doc_build/static/js/index.0991c749.js +1 -0
  99. package/docs/doc_build/static/js/lib-react.ce4199ca.js +2 -0
  100. package/docs/doc_build/static/js/lib-react.ce4199ca.js.LICENSE.txt +49 -0
  101. package/docs/doc_build/static/js/lib-router.4000fe55.js +2 -0
  102. package/docs/doc_build/static/js/lib-router.4000fe55.js.LICENSE.txt +32 -0
  103. package/docs/doc_build/static/js/styles.f2af9a40.js +1 -0
  104. package/docs/doc_build/static/search_index.72c9c372.json +1 -0
  105. package/docs/docs/public/logo.svg +1 -0
  106. package/docs/guide/introduction.md +50 -0
  107. package/docs/guide/quick-start.md +132 -0
  108. package/docs/guide/theme.md +230 -0
  109. package/docs/index.md +85 -0
  110. package/docs/package.json +22 -0
  111. package/docs/public/logo.svg +1 -0
  112. package/docs/rspress.config.ts +116 -0
  113. package/hooks/use-mobile.ts +19 -0
  114. package/hooks/use-toast.ts +191 -0
  115. package/next.config.mjs +11 -0
  116. package/package.json +75 -0
  117. package/packages/components/package.json +34 -0
  118. package/packages/components/src/button/Button.tsx +83 -0
  119. package/packages/components/src/button/button.css +256 -0
  120. package/packages/components/src/button/index.ts +2 -0
  121. package/packages/components/src/index.ts +8 -0
  122. package/packages/components/src/input/Input.tsx +230 -0
  123. package/packages/components/src/input/index.ts +2 -0
  124. package/packages/components/src/input/input.css +99 -0
  125. package/packages/components/src/pagination/Pagination.tsx +271 -0
  126. package/packages/components/src/pagination/index.ts +1 -0
  127. package/packages/components/src/pagination/pagination.css +225 -0
  128. package/packages/components/src/switch/Switch.tsx +145 -0
  129. package/packages/components/src/switch/index.ts +2 -0
  130. package/packages/components/src/switch/switch.css +119 -0
  131. package/packages/components/tsconfig.json +12 -0
  132. package/packages/components/vite.config.ts +31 -0
  133. package/packages/core/package.json +23 -0
  134. package/packages/core/src/hooks/useControllableState.ts +31 -0
  135. package/packages/core/src/hooks/useEventListener.ts +37 -0
  136. package/packages/core/src/index.ts +7 -0
  137. package/packages/core/src/utils/classnames.ts +48 -0
  138. package/packages/core/tsconfig.json +12 -0
  139. package/packages/core/vite.config.ts +24 -0
  140. package/packages/theme/package.json +20 -0
  141. package/packages/theme/src/index.css +138 -0
  142. package/packages/theme/src/index.ts +1 -0
  143. package/packages/theme/vite.config.ts +21 -0
  144. package/play/index.html +13 -0
  145. package/play/package.json +25 -0
  146. package/play/src/App.tsx +237 -0
  147. package/play/src/index.css +93 -0
  148. package/play/src/main.tsx +14 -0
  149. package/play/tsconfig.json +8 -0
  150. package/play/vite.config.ts +10 -0
  151. package/pnpm-workspace.yaml +4 -0
  152. package/postcss.config.mjs +8 -0
  153. package/public/logo.svg +1 -0
  154. package/scripts/build.sh +19 -0
  155. package/scripts/deploy-docs.js +38 -0
  156. package/styles/globals.css +125 -0
  157. package/tsconfig.json +30 -0
@@ -0,0 +1,21 @@
1
+ /* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress
2
+ * @license MIT */
3
+
4
+ /*! medium-zoom 1.1.0 | MIT License | https://github.com/francoischalifour/medium-zoom */
5
+
6
+ /**
7
+ * Prism: Lightweight, robust, elegant syntax highlighting
8
+ *
9
+ * @license MIT <https://opensource.org/licenses/MIT>
10
+ * @author Lea Verou <https://lea.verou.me>
11
+ * @namespace
12
+ * @public
13
+ */
14
+
15
+ /**!
16
+ * FlexSearch.js v0.7.41 (Bundle.module)
17
+ * Author and Copyright: Thomas Wilkerling
18
+ * Licence: Apache-2.0
19
+ * Hosted by Nextapps GmbH
20
+ * https://github.com/nextapps-de/flexsearch
21
+ */
@@ -0,0 +1,2 @@
1
+ /*! For license information please see 166.f43be01a.js.LICENSE.txt */
2
+ "use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["166"],{3321:function(e,a,s){s.d(a,{tl:()=>p,zx:()=>d,II:()=>c,rs:()=>u});var n,t=s(3732);function i(...e){let a=[];for(let s of e)if(s){if("string"==typeof s&&s.trim())a.push(s.trim());else if("number"==typeof s)a.push(String(s));else if(Array.isArray(s)){let e=i(...s);e&&a.push(e)}else if("object"==typeof s)for(let e in s)s[e]&&a.push(e)}return a.join(" ")}var l={exports:{}},r={};l.exports=function(){if(n)return r;n=1;var e=Symbol.for("react.transitional.element");function a(a,s,n){var t=null;if(void 0!==n&&(t=""+n),void 0!==s.key&&(t=""+s.key),"key"in s)for(var i in n={},s)"key"!==i&&(n[i]=s[i]);else n=s;return{$$typeof:e,type:a,key:t,ref:void 0!==(s=n.ref)?s:null,props:n}}return r.Fragment=Symbol.for("react.fragment"),r.jsx=a,r.jsxs=a,r}();var o=l.exports;let d=(0,t.forwardRef)((e,a)=>{let{type:s="default",size:n="default",plain:t=!1,round:l=!1,circle:r=!1,loading:d=!1,disabled:c=!1,nativeType:u="button",icon:p,className:h,children:m,...f}=e,x=i("sd-button",`sd-button--${s}`,`sd-button--${n}`,{"sd-button--plain":t,"sd-button--round":l,"sd-button--circle":r,"sd-button--loading":d,"is-disabled":c||d},h);return o.jsxs("button",{ref:a,type:u,className:x,disabled:c||d,...f,children:[d&&o.jsx("span",{className:"sd-button__loading-icon",children:o.jsx("svg",{viewBox:"0 0 1024 1024",className:"sd-button__spinner",children:o.jsx("path",{fill:"currentColor",d:"M512 64a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.2a32 32 0 0 1 0 45.248L692.992 376.32a32 32 0 0 1-45.248-45.248L783.552 195.2a32 32 0 0 1 45.248 0zM376.32 647.744a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"})})}),p&&!d&&o.jsx("span",{className:"sd-button__icon",children:p}),m&&o.jsx("span",{className:"sd-button__text",children:m})]})});d.displayName="Button";let c=(0,t.forwardRef)((e,a)=>{let{type:s="text",size:n="default",disabled:l=!1,readOnly:r=!1,clearable:d=!1,showPassword:c=!1,prefixIcon:u,suffixIcon:p,className:h,value:m,defaultValue:f,onInput:x,onChange:g,onClear:_,onFocus:v,...b}=e,[j,N]=(0,t.useState)(!1),[C,y]=(0,t.useState)(f||""),k=(0,t.useRef)(null);(0,t.useImperativeHandle)(a,()=>k.current,[]);let w=c?j?"text":"password":s,z=void 0!==m?m:C,M=d&&z&&!l&&!r,S=i("sd-input",`sd-input--${n}`,{"is-disabled":l,"sd-input--prefix":!!u,"sd-input--suffix":!!(p||M||c)},h);return o.jsxs("div",{className:S,children:[u&&o.jsx("span",{className:"sd-input__prefix",children:u}),o.jsx("input",{ref:k,type:w,className:"sd-input__inner",disabled:l,readOnly:r,value:z,onChange:e=>{let a=e.target.value;void 0===m&&y(a),null==g||g(e),null==x||x(a)},onFocus:e=>{let a=e.target;void 0!==m?(null==x||x(""),g&&g({target:{...a,value:""},currentTarget:a})):(y(""),g&&g({target:{...a,value:""},currentTarget:a}),null==x||x("")),null==v||v(e)},...b}),o.jsxs("span",{className:"sd-input__suffix",children:[M&&o.jsx("span",{className:"sd-input__clear",onClick:e=>{e.preventDefault(),e.stopPropagation(),null==x||x(""),void 0===m&&y("");let a=k.current;a&&g&&g({target:{...a,value:""},currentTarget:a}),null==_||_()},onMouseDown:e=>{e.preventDefault()},children:o.jsx("svg",{viewBox:"0 0 1024 1024",width:"14",height:"14",style:{pointerEvents:"none"},children:o.jsx("path",{fill:"currentColor",d:"M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336L512 457.664z"})})}),c&&o.jsx("span",{className:"sd-input__password",onClick:()=>N(!j),children:j?o.jsx("svg",{viewBox:"0 0 1024 1024",width:"14",height:"14",children:o.jsx("path",{fill:"currentColor",d:"M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448zm0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160z"})}):o.jsxs("svg",{viewBox:"0 0 1024 1024",width:"14",height:"14",children:[o.jsx("path",{fill:"currentColor",d:"M876.8 156.8c0-9.6-3.2-16-9.6-22.4-6.4-6.4-12.8-9.6-22.4-9.6-9.6 0-16 3.2-22.4 9.6L736 220.8c-64-32-137.6-51.2-224-60.8-160 16-288 73.6-377.6 176C44.8 438.4 0 496 0 512s48 73.6 134.4 176c22.4 25.6 44.8 48 73.6 67.2l-86.4 89.6c-6.4 6.4-9.6 12.8-9.6 22.4 0 9.6 3.2 16 9.6 22.4 6.4 6.4 12.8 9.6 22.4 9.6 9.6 0 16-3.2 22.4-9.6l704-710.4c3.2-6.4 6.4-12.8 6.4-22.4Zm-646.4 528c-76.8-70.4-128-128-153.6-172.8 28.8-48 80-105.6 153.6-172.8C304 272 400 230.4 512 224c64 3.2 124.8 19.2 176 44.8l-54.4 54.4C598.4 300.8 560 288 512 288c-64 0-115.2 22.4-160 64s-64 96-64 160c0 48 12.8 89.6 35.2 124.8L256 707.2c-9.6-6.4-19.2-16-25.6-22.4Zm140.8-96c-12.8-22.4-19.2-48-19.2-76.8 0-44.8 16-83.2 48-112 32-28.8 67.2-48 112-48 28.8 0 54.4 6.4 73.6 19.2L371.2 588.8ZM889.599 336c-12.8-16-28.8-28.8-41.6-41.6l-48 48c73.6 67.2 124.8 124.8 150.4 169.6-28.8 48-80 105.6-153.6 172.8-73.6 67.2-172.8 108.8-284.8 115.2-51.2-3.2-99.2-12.8-140.8-28.8l-48 48c57.6 22.4 118.4 38.4 188.8 44.8 160-16 288-73.6 377.6-176C979.199 585.6 1024 528 1024 512s-48.001-73.6-134.401-176Z"}),o.jsx("path",{fill:"currentColor",d:"M511.998 672c-12.8 0-25.6-3.2-38.4-6.4l-51.2 51.2c28.8 12.8 57.6 19.2 89.6 19.2 64 0 115.2-22.4 160-64 41.6-41.6 64-96 64-160 0-32-6.4-64-19.2-89.6l-51.2 51.2c3.2 12.8 6.4 25.6 6.4 38.4 0 44.8-16 83.2-48 112-32 28.8-67.2 48-112 48Z"})]})}),p&&!M&&o.jsx("span",{className:"sd-input__suffix-icon",children:p})]})]})});c.displayName="Input";let u=(0,t.forwardRef)((e,a)=>{let{checked:s,defaultChecked:n=!1,disabled:l=!1,loading:r=!1,checkedNode:d,unCheckedNode:c,checkedColor:u,unCheckedColor:p,className:h,onChange:m,name:f,id:x}=e,[g,_]=t.useState(n),v=void 0!==s,b=v?s:g,j=()=>{if(l||r)return;let e=!b;v||_(e),m&&m(e)},N=i("sd-switch",{"is-checked":b,"is-disabled":l||r,"is-loading":r},h),C={};return b&&u?C.backgroundColor=u:!b&&p&&(C.backgroundColor=p),o.jsxs("div",{className:N,role:"switch","aria-checked":b,"aria-disabled":l||r,tabIndex:l||r?-1:0,onClick:j,onKeyDown:e=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),j())},children:[o.jsx("input",{ref:a,type:"checkbox",className:"sd-switch__input",checked:b,disabled:l||r,onChange:j,name:f,id:x,"aria-hidden":"true"}),o.jsxs("span",{className:"sd-switch__core",style:C,children:[r&&o.jsx("span",{className:"sd-switch__loading",children:o.jsx("svg",{viewBox:"0 0 1024 1024",className:"sd-switch__spinner",children:o.jsx("path",{fill:"currentColor",d:"M512 64a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32z"})})}),o.jsx("span",{className:"sd-switch__action"}),(b?d:c)&&o.jsx("span",{className:"sd-switch__content",children:b?d:c})]})]})});u.displayName="Switch";let p=(0,t.forwardRef)((e,a)=>{let{total:s,defaultCurrent:n=1,defaultPageSize:l=10,current:r,pageSize:d,onChange:c,onPageSizeChange:u,pagerCount:p=7,size:h="m",pageSizeOptions:m=[10,20,50,100],showSizeChanger:f=!0,showQuickJumper:x=!1,className:g,..._}=e,[v,b]=(0,t.useState)(n),j=r??v,[N,C]=(0,t.useState)(l),y=d??N,k=(0,t.useMemo)(()=>Math.ceil(s/y),[s,y]),w=(0,t.useCallback)(e=>{if(e<1||e>k||e===j)return;let a=Math.max(1,Math.min(e,k));void 0===r&&b(a),null==c||c(a,y)},[j,k,y,c,r]),z=(0,t.useCallback)(e=>{void 0===d&&C(e),null==u||u(e),void 0===r&&b(1),null==c||c(1,e)},[u,c,r,d]),M=(0,t.useMemo)(()=>{let e=[];if(k<=p)for(let a=1;a<=k;a++)e.push(a);else{let a=Math.floor((p-2)/2),s=p-2-a;if(e.push(1),j<=a+2){for(let a=2;a<=Math.min(p-2,k-1);a++)e.push(a);k>p-1&&e.push("next-more")}else if(j>=k-s-1){k>p-1&&e.push("prev-more");for(let a=Math.max(2,k-(p-3));a<=k-1;a++)e.push(a)}else{e.push("prev-more");for(let n=j-a;n<=j+s;n++)e.push(n);e.push("next-more")}k>1&&e.push(k)}return e},[k,p,j]),[S,L]=(0,t.useState)(""),I=(0,t.useCallback)(()=>{let e=parseInt(S,10);isNaN(e)||(w(e),L(""))},[S,w]);if(0===s)return null;let $=i("sd-pagination",`sd-pagination--${h}`,g);return o.jsxs("div",{ref:a,className:$,..._,children:[o.jsx("button",{type:"button",className:i("sd-pagination__item","sd-pagination__prev",{"is-disabled":1===j}),disabled:1===j,onClick:()=>w(j-1),"aria-label":"上一页",children:"‹"}),M.map((e,a)=>"prev-more"===e?o.jsx("span",{className:"sd-pagination__more sd-pagination__more--prev",children:"..."},`more-${a}`):"next-more"===e?o.jsx("span",{className:"sd-pagination__more sd-pagination__more--next",children:"..."},`more-${a}`):o.jsx("button",{type:"button",className:i("sd-pagination__item","sd-pagination__page",{"is-active":e===j}),onClick:()=>w(e),children:e},e)),o.jsx("button",{type:"button",className:i("sd-pagination__item","sd-pagination__next",{"is-disabled":j===k}),disabled:j===k,onClick:()=>w(j+1),"aria-label":"下一页",children:"›"}),f&&o.jsx("div",{className:"sd-pagination__size-changer",children:o.jsx("select",{value:y,onChange:e=>z(Number(e.target.value)),className:"sd-pagination__size-select",children:m.map(e=>o.jsxs("option",{value:e,children:[e," 条/页"]},e))})}),x&&o.jsxs("div",{className:"sd-pagination__jumper",children:[o.jsx("span",{className:"sd-pagination__jumper-text",children:"跳至"}),o.jsx("input",{type:"number",min:"1",max:k,value:S,onChange:e=>L(e.target.value),onKeyPress:e=>"Enter"===e.key&&I(),className:"sd-pagination__jumper-input",placeholder:j.toString()}),o.jsx("span",{className:"sd-pagination__jumper-text",children:"页"})]}),o.jsxs("div",{className:"sd-pagination__total",children:["共 ",s," 条"]})]})});p.displayName="Pagination"}}]);
@@ -0,0 +1,19 @@
1
+ /**
2
+ * @license React
3
+ * react-jsx-runtime.development.js
4
+ *
5
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
6
+ *
7
+ * This source code is licensed under the MIT license found in the
8
+ * LICENSE file in the root directory of this source tree.
9
+ */
10
+
11
+ /**
12
+ * @license React
13
+ * react-jsx-runtime.production.js
14
+ *
15
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
16
+ *
17
+ * This source code is licensed under the MIT license found in the
18
+ * LICENSE file in the root directory of this source tree.
19
+ */
@@ -0,0 +1 @@
1
+ "use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["218"],{9059:function(e,n,r){r.r(n),r.d(n,{default:()=>f});var d=r(503),t=r(6971),s=r(3732),i=r(3321);function l(){return(0,d.jsxs)("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[(0,d.jsx)(i.zx,{children:"默认按钮"}),(0,d.jsx)(i.zx,{type:"primary",children:"主要按钮"}),(0,d.jsx)(i.zx,{type:"success",children:"成功按钮"}),(0,d.jsx)(i.zx,{type:"warning",children:"警告按钮"}),(0,d.jsx)(i.zx,{type:"danger",children:"危险按钮"}),(0,d.jsx)(i.zx,{type:"info",children:"信息按钮"})]})}function c(){return(0,d.jsxs)("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[(0,d.jsx)(i.zx,{plain:!0,children:"朴素按钮"}),(0,d.jsx)(i.zx,{type:"primary",plain:!0,children:"主要按钮"}),(0,d.jsx)(i.zx,{type:"success",plain:!0,children:"成功按钮"}),(0,d.jsx)(i.zx,{type:"warning",plain:!0,children:"警告按钮"}),(0,d.jsx)(i.zx,{type:"danger",plain:!0,children:"危险按钮"}),(0,d.jsx)(i.zx,{type:"info",plain:!0,children:"信息按钮"})]})}function a(){return(0,d.jsxs)("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[(0,d.jsx)(i.zx,{round:!0,children:"圆角按钮"}),(0,d.jsx)(i.zx,{type:"primary",round:!0,children:"主要按钮"}),(0,d.jsx)(i.zx,{type:"success",round:!0,children:"成功按钮"})]})}function h(){return(0,d.jsxs)("div",{style:{display:"flex",gap:"12px",alignItems:"center"},children:[(0,d.jsx)(i.zx,{size:"large",children:"大型按钮"}),(0,d.jsx)(i.zx,{children:"默认按钮"}),(0,d.jsx)(i.zx,{size:"small",children:"小型按钮"})]})}function x(){return(0,d.jsxs)("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[(0,d.jsx)(i.zx,{disabled:!0,children:"默认按钮"}),(0,d.jsx)(i.zx,{type:"primary",disabled:!0,children:"主要按钮"}),(0,d.jsx)(i.zx,{type:"success",disabled:!0,children:"成功按钮"})]})}function o(){let[e,n]=s.useState(!1);return(0,d.jsx)(i.zx,{type:"primary",loading:e,onClick:()=>{n(!0),setTimeout(()=>n(!1),2e3)},children:e?"加载中...":"点击加载"})}r(9916);var j=r(8169);function p(e){let n=Object.assign({h1:"h1",a:"a",p:"p",h2:"h2",code:"code",pre:"pre",h3:"h3",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td"},(0,t.ah)(),e.components);return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)(n.h1,{id:"button-按钮",children:[(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#button-按钮",children:"#"}),"Button 按钮"]}),"\n",(0,d.jsx)(n.p,{children:"常用的操作按钮。"}),"\n",(0,d.jsxs)(n.h2,{id:"基础用法",children:[(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#基础用法",children:"#"}),"基础用法"]}),"\n",(0,d.jsxs)(n.p,{children:["使用 ",(0,d.jsx)(n.code,{children:"type"}),"、",(0,d.jsx)(n.code,{children:"plain"}),"、",(0,d.jsx)(n.code,{children:"round"})," 和 ",(0,d.jsx)(n.code,{children:"circle"})," 来定义按钮的样式。"]}),"\n",(0,d.jsxs)(j.Z,{isMobile:"false",demoId:"_components_button_1",children:[(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-tsx",meta:"preview",children:'export default function Demo() {\r\n return (\r\n <div style={{ display: \'flex\', gap: \'12px\', flexWrap: \'wrap\' }}>\r\n <Button>默认按钮</Button>\r\n <Button type="primary">主要按钮</Button>\r\n <Button type="success">成功按钮</Button>\r\n <Button type="warning">警告按钮</Button>\r\n <Button type="danger">危险按钮</Button>\r\n <Button type="info">信息按钮</Button>\r\n </div>\r\n )\r\n}\n'})}),(0,d.jsx)(l,{})]}),"\n",(0,d.jsxs)(n.h2,{id:"朴素按钮",children:[(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#朴素按钮",children:"#"}),"朴素按钮"]}),"\n",(0,d.jsxs)(n.p,{children:["使用 ",(0,d.jsx)(n.code,{children:"plain"})," 属性来创建朴素按钮,朴素按钮的文字为按钮颜色,背景为白色。"]}),"\n",(0,d.jsxs)(j.Z,{isMobile:"false",demoId:"_components_button_2",children:[(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-tsx",meta:"preview",children:'export default function Demo() {\r\n return (\r\n <div style={{ display: \'flex\', gap: \'12px\', flexWrap: \'wrap\' }}>\r\n <Button plain>朴素按钮</Button>\r\n <Button type="primary" plain>\r\n 主要按钮\r\n </Button>\r\n <Button type="success" plain>\r\n 成功按钮\r\n </Button>\r\n <Button type="warning" plain>\r\n 警告按钮\r\n </Button>\r\n <Button type="danger" plain>\r\n 危险按钮\r\n </Button>\r\n <Button type="info" plain>\r\n 信息按钮\r\n </Button>\r\n </div>\r\n )\r\n}\n'})}),(0,d.jsx)(c,{})]}),"\n",(0,d.jsxs)(n.h2,{id:"圆角按钮",children:[(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#圆角按钮",children:"#"}),"圆角按钮"]}),"\n",(0,d.jsxs)(n.p,{children:["使用 ",(0,d.jsx)(n.code,{children:"round"})," 属性来创建圆角按钮。"]}),"\n",(0,d.jsxs)(j.Z,{isMobile:"false",demoId:"_components_button_3",children:[(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-tsx",meta:"preview",children:"export default function Demo() {\r\n return (\r\n <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>\r\n <Button round>圆角按钮</Button>\r\n <Button type=\"primary\" round>\r\n 主要按钮\r\n </Button>\r\n <Button type=\"success\" round>\r\n 成功按钮\r\n </Button>\r\n </div>\r\n )\r\n}\n"})}),(0,d.jsx)(a,{})]}),"\n",(0,d.jsxs)(n.h2,{id:"不同尺寸",children:[(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#不同尺寸",children:"#"}),"不同尺寸"]}),"\n",(0,d.jsx)(n.p,{children:"Button 组件提供除了默认值以外的三种尺寸,可以在不同场景下选择合适的按钮尺寸。"}),"\n",(0,d.jsxs)(j.Z,{isMobile:"false",demoId:"_components_button_4",children:[(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-tsx",meta:"preview",children:"export default function Demo() {\r\n return (\r\n <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>\r\n <Button size=\"large\">大型按钮</Button>\r\n <Button>默认按钮</Button>\r\n <Button size=\"small\">小型按钮</Button>\r\n </div>\r\n )\r\n}\n"})}),(0,d.jsx)(h,{})]}),"\n",(0,d.jsxs)(n.h2,{id:"禁用状态",children:[(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#禁用状态",children:"#"}),"禁用状态"]}),"\n",(0,d.jsxs)(n.p,{children:["你可以使用 ",(0,d.jsx)(n.code,{children:"disabled"})," 属性来定义按钮是否被禁用。"]}),"\n",(0,d.jsxs)(j.Z,{isMobile:"false",demoId:"_components_button_5",children:[(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-tsx",meta:"preview",children:"export default function Demo() {\r\n return (\r\n <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>\r\n <Button disabled>默认按钮</Button>\r\n <Button type=\"primary\" disabled>\r\n 主要按钮\r\n </Button>\r\n <Button type=\"success\" disabled>\r\n 成功按钮\r\n </Button>\r\n </div>\r\n )\r\n}\n"})}),(0,d.jsx)(x,{})]}),"\n",(0,d.jsxs)(n.h2,{id:"加载状态",children:[(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#加载状态",children:"#"}),"加载状态"]}),"\n",(0,d.jsxs)(n.p,{children:["通过设置 ",(0,d.jsx)(n.code,{children:"loading"})," 属性为 ",(0,d.jsx)(n.code,{children:"true"})," 来显示加载中状态。"]}),"\n",(0,d.jsxs)(j.Z,{isMobile:"false",demoId:"_components_button_6",children:[(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-tsx",meta:"preview",children:"export default function LoadingButton() {\r\n const [loading, setLoading] = React.useState(false)\r\n\r\n const handleClick = () => {\r\n setLoading(true)\r\n setTimeout(() => setLoading(false), 2000)\r\n }\r\n\r\n return (\r\n <Button type=\"primary\" loading={loading} onClick={handleClick}>\r\n {loading ? '加载中...' : '点击加载'}\r\n </Button>\r\n )\r\n}\n"})}),(0,d.jsx)(o,{})]}),"\n",(0,d.jsxs)(n.h2,{id:"api",children:[(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#api",children:"#"}),"API"]}),"\n",(0,d.jsxs)(n.h3,{id:"props",children:[(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#props",children:"#"}),"Props"]}),"\n",(0,d.jsxs)(n.table,{children:[(0,d.jsx)(n.thead,{children:(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.th,{children:"属性"}),(0,d.jsx)(n.th,{children:"说明"}),(0,d.jsx)(n.th,{children:"类型"}),(0,d.jsx)(n.th,{children:"默认值"})]})}),(0,d.jsxs)(n.tbody,{children:[(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"type"}),(0,d.jsx)(n.td,{children:"按钮类型"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"default"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"size"}),(0,d.jsx)(n.td,{children:"按钮尺寸"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"'large' | 'default' | 'small'"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"default"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"plain"}),(0,d.jsx)(n.td,{children:"是否为朴素按钮"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"boolean"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"false"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"round"}),(0,d.jsx)(n.td,{children:"是否为圆角按钮"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"boolean"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"false"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"circle"}),(0,d.jsx)(n.td,{children:"是否为圆形按钮"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"boolean"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"false"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"loading"}),(0,d.jsx)(n.td,{children:"是否为加载中状态"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"boolean"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"false"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"disabled"}),(0,d.jsx)(n.td,{children:"是否禁用"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"boolean"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"false"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"nativeType"}),(0,d.jsx)(n.td,{children:"原生 type 属性"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"'button' | 'submit' | 'reset'"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"button"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"icon"}),(0,d.jsx)(n.td,{children:"图标组件"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"React.ReactNode"})}),(0,d.jsx)(n.td,{children:"-"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"className"}),(0,d.jsx)(n.td,{children:"自定义类名"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"string"})}),(0,d.jsx)(n.td,{children:"-"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"onClick"}),(0,d.jsx)(n.td,{children:"点击事件回调"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"(e: React.MouseEvent) => void"})}),(0,d.jsx)(n.td,{children:"-"})]})]})]}),"\n",(0,d.jsxs)(n.h3,{id:"events",children:[(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#events",children:"#"}),"Events"]}),"\n",(0,d.jsxs)(n.table,{children:[(0,d.jsx)(n.thead,{children:(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.th,{children:"事件名"}),(0,d.jsx)(n.th,{children:"说明"}),(0,d.jsx)(n.th,{children:"类型"})]})}),(0,d.jsx)(n.tbody,{children:(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"onClick"}),(0,d.jsx)(n.td,{children:"点击按钮时触发"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"(e: React.MouseEvent) => void"})})]})})]})]})}function u(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,t.ah)(),e.components);return n?(0,d.jsx)(n,Object.assign({},e,{children:(0,d.jsx)(p,e)})):p(e)}let f=u;u.__RSPRESS_PAGE_META={},u.__RSPRESS_PAGE_META["components%2Fbutton.mdx"]={toc:[{id:"基础用法",text:"基础用法",depth:2},{id:"朴素按钮",text:"朴素按钮",depth:2},{id:"圆角按钮",text:"圆角按钮",depth:2},{id:"不同尺寸",text:"不同尺寸",depth:2},{id:"禁用状态",text:"禁用状态",depth:2},{id:"加载状态",text:"加载状态",depth:2},{id:"api",text:"API",depth:2},{id:"props",text:"Props",depth:3},{id:"events",text:"Events",depth:3}],title:"Button 按钮",headingTitle:"Button 按钮",frontmatter:{}}}}]);
@@ -0,0 +1 @@
1
+ "use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["232"],{6227:function(e,n,d){d.r(n),d.d(n,{default:()=>f});var r=d(503),s=d(6971),l=d(3732),t=d(3321);function i(){let[e,n]=l.useState("");return(0,r.jsxs)("div",{children:[(0,r.jsx)(t.II,{placeholder:"请输入内容",value:e,onInput:n,style:{width:"300px"}}),(0,r.jsxs)("p",{style:{marginTop:"12px",color:"#606266"},children:["输入的内容:",e]})]})}function c(){return(0,r.jsx)(t.II,{placeholder:"禁用状态",disabled:!0,style:{width:"300px"}})}function h(){let[e,n]=l.useState("可以清空的内容");return(0,r.jsx)(t.II,{placeholder:"请输入内容",value:e,onInput:n,clearable:!0,style:{width:"300px"}})}function x(){return(0,r.jsx)(t.II,{placeholder:"请输入密码",type:"password",showPassword:!0,style:{width:"300px"}})}function a(){return(0,r.jsxs)("div",{style:{display:"flex",flexDirection:"column",gap:"12px"},children:[(0,r.jsx)(t.II,{placeholder:"大尺寸",size:"large",style:{width:"300px"}}),(0,r.jsx)(t.II,{placeholder:"默认尺寸",style:{width:"300px"}}),(0,r.jsx)(t.II,{placeholder:"小尺寸",size:"small",style:{width:"300px"}})]})}function o(){return(0,r.jsxs)("div",{style:{display:"flex",flexDirection:"column",gap:"12px"},children:[(0,r.jsx)(t.II,{placeholder:"请输入内容",prefixIcon:(0,r.jsx)("svg",{viewBox:"0 0 1024 1024",width:"14",height:"14",children:(0,r.jsx)("path",{fill:"currentColor",d:"M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm23.744 191.488c-52.096 0-92.928 14.784-123.2 44.352-30.976 29.568-45.76 70.4-45.76 122.496h80.256c0-29.568 5.632-52.8 17.6-68.992 13.376-19.712 35.2-28.864 66.176-28.864 23.936 0 42.944 6.336 56.32 19.712 12.672 13.376 19.712 31.68 19.712 54.912 0 17.6-6.336 34.496-19.008 49.984l-11.776 14.08-30.272 34.496c-52.8 59.136-75.328 102.4-75.328 133.376v20.224h80.96V608c0-22.528 1.408-36.608 4.928-47.68 2.816-12.672 15.488-28.864 37.376-48.576l23.232-27.392c12.672-14.08 24.64-28.16 35.2-43.648 23.936-35.904 35.2-71.104 35.2-107.712 0-52.096-17.6-93.632-51.904-123.904-32.896-30.272-78.08-45.056-133.376-45.056zM512 704a48 48 0 1 0 0 96 48 48 0 0 0 0-96z"})}),style:{width:"300px"}}),(0,r.jsx)(t.II,{placeholder:"请输入内容",suffixIcon:(0,r.jsx)("svg",{viewBox:"0 0 1024 1024",width:"14",height:"14",children:(0,r.jsx)("path",{fill:"currentColor",d:"M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336L512 457.664z"})}),style:{width:"300px"}})]})}d(9916);var j=d(8169);function p(e){let n=Object.assign({h1:"h1",a:"a",p:"p",h2:"h2",pre:"pre",code:"code",h3:"h3",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td"},(0,s.ah)(),e.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.h1,{id:"input-输入框",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#input-输入框",children:"#"}),"Input 输入框"]}),"\n",(0,r.jsx)(n.p,{children:"通过鼠标或键盘输入内容,是最基础的表单域的包装。"}),"\n",(0,r.jsxs)(n.h2,{id:"基础用法",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#基础用法",children:"#"}),"基础用法"]}),"\n",(0,r.jsx)(n.p,{children:"基本的输入框用法。"}),"\n",(0,r.jsxs)(j.Z,{isMobile:"false",demoId:"_components_input_1",children:[(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",meta:"preview",children:"export default function BasicInput() {\r\n const [value, setValue] = React.useState('')\r\n\r\n return (\r\n <div>\r\n <Input\r\n placeholder=\"请输入内容\"\r\n value={value}\r\n onInput={setValue}\r\n style={{ width: '300px' }}\r\n />\r\n <p style={{ marginTop: '12px', color: '#606266' }}>输入的内容:{value}</p>\r\n </div>\r\n )\r\n}\n"})}),(0,r.jsx)(i,{})]}),"\n",(0,r.jsxs)(n.h2,{id:"禁用状态",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#禁用状态",children:"#"}),"禁用状态"]}),"\n",(0,r.jsxs)(n.p,{children:["通过 ",(0,r.jsx)(n.code,{children:"disabled"})," 属性指定是否禁用 input 组件。"]}),"\n",(0,r.jsxs)(j.Z,{isMobile:"false",demoId:"_components_input_2",children:[(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",meta:"preview",children:"export default function Demo() {\r\n return <Input placeholder=\"禁用状态\" disabled style={{ width: '300px' }} />\r\n}\n"})}),(0,r.jsx)(c,{})]}),"\n",(0,r.jsxs)(n.h2,{id:"可清空",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#可清空",children:"#"}),"可清空"]}),"\n",(0,r.jsxs)(n.p,{children:["使用 ",(0,r.jsx)(n.code,{children:"clearable"})," 属性即可得到一个可清空的输入框。"]}),"\n",(0,r.jsxs)(j.Z,{isMobile:"false",demoId:"_components_input_3",children:[(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",meta:"preview",children:"export default function ClearableInput() {\r\n const [value, setValue] = React.useState('可以清空的内容')\r\n\r\n return (\r\n <Input\r\n placeholder=\"请输入内容\"\r\n value={value}\r\n onInput={setValue}\r\n clearable\r\n style={{ width: '300px' }}\r\n />\r\n )\r\n}\n"})}),(0,r.jsx)(h,{})]}),"\n",(0,r.jsxs)(n.h2,{id:"密码输入框",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#密码输入框",children:"#"}),"密码输入框"]}),"\n",(0,r.jsxs)(n.p,{children:["使用 ",(0,r.jsx)(n.code,{children:"showPassword"})," 属性即可得到一个可切换显示隐藏的密码框。"]}),"\n",(0,r.jsxs)(j.Z,{isMobile:"false",demoId:"_components_input_4",children:[(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",meta:"preview",children:'export default function Demo() {\r\n return (\r\n <Input\r\n placeholder="请输入密码"\r\n type="password"\r\n showPassword\r\n style={{ width: \'300px\' }}\r\n />\r\n )\r\n}\n'})}),(0,r.jsx)(x,{})]}),"\n",(0,r.jsxs)(n.h2,{id:"不同尺寸",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#不同尺寸",children:"#"}),"不同尺寸"]}),"\n",(0,r.jsxs)(n.p,{children:["使用 ",(0,r.jsx)(n.code,{children:"size"})," 属性改变输入框大小。除了默认大小外,还有另外两个选项:",(0,r.jsx)(n.code,{children:"large"}),"、",(0,r.jsx)(n.code,{children:"small"}),"。"]}),"\n",(0,r.jsxs)(j.Z,{isMobile:"false",demoId:"_components_input_5",children:[(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",meta:"preview",children:"export default function Demo() {\r\n return (\r\n <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\r\n <Input placeholder=\"大尺寸\" size=\"large\" style={{ width: '300px' }} />\r\n <Input placeholder=\"默认尺寸\" style={{ width: '300px' }} />\r\n <Input placeholder=\"小尺寸\" size=\"small\" style={{ width: '300px' }} />\r\n </div>\r\n )\r\n}\n"})}),(0,r.jsx)(a,{})]}),"\n",(0,r.jsxs)(n.h2,{id:"带图标的输入框",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#带图标的输入框",children:"#"}),"带图标的输入框"]}),"\n",(0,r.jsxs)(n.p,{children:["使用 ",(0,r.jsx)(n.code,{children:"prefixIcon"})," 和 ",(0,r.jsx)(n.code,{children:"suffixIcon"})," 属性在 input 组件首部和尾部增加显示图标。"]}),"\n",(0,r.jsxs)(j.Z,{isMobile:"false",demoId:"_components_input_6",children:[(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",meta:"preview",children:'export default function Demo() {\r\n return (\r\n <div style={{ display: \'flex\', flexDirection: \'column\', gap: \'12px\' }}>\r\n <Input\r\n placeholder="请输入内容"\r\n prefixIcon={\r\n <svg viewBox="0 0 1024 1024" width="14" height="14">\r\n <path\r\n fill="currentColor"\r\n d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm23.744 191.488c-52.096 0-92.928 14.784-123.2 44.352-30.976 29.568-45.76 70.4-45.76 122.496h80.256c0-29.568 5.632-52.8 17.6-68.992 13.376-19.712 35.2-28.864 66.176-28.864 23.936 0 42.944 6.336 56.32 19.712 12.672 13.376 19.712 31.68 19.712 54.912 0 17.6-6.336 34.496-19.008 49.984l-11.776 14.08-30.272 34.496c-52.8 59.136-75.328 102.4-75.328 133.376v20.224h80.96V608c0-22.528 1.408-36.608 4.928-47.68 2.816-12.672 15.488-28.864 37.376-48.576l23.232-27.392c12.672-14.08 24.64-28.16 35.2-43.648 23.936-35.904 35.2-71.104 35.2-107.712 0-52.096-17.6-93.632-51.904-123.904-32.896-30.272-78.08-45.056-133.376-45.056zM512 704a48 48 0 1 0 0 96 48 48 0 0 0 0-96z"\r\n />\r\n </svg>\r\n }\r\n style={{ width: \'300px\' }}\r\n />\r\n <Input\r\n placeholder="请输入内容"\r\n suffixIcon={\r\n <svg viewBox="0 0 1024 1024" width="14" height="14">\r\n <path\r\n fill="currentColor"\r\n d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336L512 457.664z"\r\n />\r\n </svg>\r\n }\r\n style={{ width: \'300px\' }}\r\n />\r\n </div>\r\n )\r\n}\n'})}),(0,r.jsx)(o,{})]}),"\n",(0,r.jsxs)(n.h2,{id:"api",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#api",children:"#"}),"API"]}),"\n",(0,r.jsxs)(n.h3,{id:"props",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#props",children:"#"}),"Props"]}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"属性"}),(0,r.jsx)(n.th,{children:"说明"}),(0,r.jsx)(n.th,{children:"类型"}),(0,r.jsx)(n.th,{children:"默认值"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"type"}),(0,r.jsx)(n.td,{children:"输入框类型"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"text"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"size"}),(0,r.jsx)(n.td,{children:"输入框尺寸"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'large' | 'default' | 'small'"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"default"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"disabled"}),(0,r.jsx)(n.td,{children:"是否禁用"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"readOnly"}),(0,r.jsx)(n.td,{children:"是否只读"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"clearable"}),(0,r.jsx)(n.td,{children:"是否可清空"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"showPassword"}),(0,r.jsx)(n.td,{children:"是否显示密码切换按钮"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"false"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"prefixIcon"}),(0,r.jsx)(n.td,{children:"前置图标"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"React.ReactNode"})}),(0,r.jsx)(n.td,{children:"-"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"suffixIcon"}),(0,r.jsx)(n.td,{children:"后置图标"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"React.ReactNode"})}),(0,r.jsx)(n.td,{children:"-"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"placeholder"}),(0,r.jsx)(n.td,{children:"输入框占位文本"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:"-"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"value"}),(0,r.jsx)(n.td,{children:"输入框值(受控)"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:"-"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"defaultValue"}),(0,r.jsx)(n.td,{children:"默认值(非受控)"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:"-"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"className"}),(0,r.jsx)(n.td,{children:"自定义类名"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:"-"})]})]})]}),"\n",(0,r.jsxs)(n.h3,{id:"events",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#events",children:"#"}),"Events"]}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"事件名"}),(0,r.jsx)(n.th,{children:"说明"}),(0,r.jsx)(n.th,{children:"类型"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"onInput"}),(0,r.jsx)(n.td,{children:"输入时触发"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"(value: string) => void"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"onChange"}),(0,r.jsx)(n.td,{children:"值改变时触发"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"(e: React.ChangeEvent) => void"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"onClear"}),(0,r.jsx)(n.td,{children:"点击清空按钮时触发"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"() => void"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"onFocus"}),(0,r.jsx)(n.td,{children:"获得焦点时触发"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"(e: React.FocusEvent) => void"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"onBlur"}),(0,r.jsx)(n.td,{children:"失去焦点时触发"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"(e: React.FocusEvent) => void"})})]})]})]})]})}function u(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,s.ah)(),e.components);return n?(0,r.jsx)(n,Object.assign({},e,{children:(0,r.jsx)(p,e)})):p(e)}let f=u;u.__RSPRESS_PAGE_META={},u.__RSPRESS_PAGE_META["components%2Finput.mdx"]={toc:[{id:"基础用法",text:"基础用法",depth:2},{id:"禁用状态",text:"禁用状态",depth:2},{id:"可清空",text:"可清空",depth:2},{id:"密码输入框",text:"密码输入框",depth:2},{id:"不同尺寸",text:"不同尺寸",depth:2},{id:"带图标的输入框",text:"带图标的输入框",depth:2},{id:"api",text:"API",depth:2},{id:"props",text:"Props",depth:3},{id:"events",text:"Events",depth:3}],title:"Input 输入框",headingTitle:"Input 输入框",frontmatter:{}}}}]);
@@ -0,0 +1 @@
1
+ "use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["416"],{7399:function(e,d,n){n.r(d),n.d(d,{default:()=>u});var c=n(503),s=n(6971),r=n(3732),h=n(3321);function t(){let[e,d]=r.useState(!1);return(0,c.jsxs)("div",{children:[(0,c.jsx)(h.rs,{checked:e,onChange:d}),(0,c.jsxs)("p",{style:{marginTop:"12px",color:"#606266"},children:["当前状态:",e?"开启":"关闭"]})]})}function i(){return(0,c.jsxs)("div",{style:{display:"flex",gap:"12px",alignItems:"center"},children:[(0,c.jsx)(h.rs,{disabled:!0}),(0,c.jsx)(h.rs,{disabled:!0,defaultChecked:!0})]})}function l(){let[e,d]=r.useState(!1),[n,s]=r.useState(!1);return(0,c.jsxs)("div",{children:[(0,c.jsx)(h.rs,{loading:e,checked:n,onChange:e=>{d(!0),setTimeout(()=>{s(e),d(!1)},1e3)}}),(0,c.jsx)("p",{style:{marginTop:"12px",color:"#606266"},children:e?"加载中...":n?"已开启":"已关闭"})]})}function a(){let[e,d]=r.useState(!0),[n,s]=r.useState(!1),[t,i]=r.useState(!0);return(0,c.jsxs)("div",{style:{display:"flex",gap:"20px",alignItems:"center"},children:[(0,c.jsx)(h.rs,{checkedNode:"开",unCheckedNode:"关",checked:e,onChange:d}),(0,c.jsx)(h.rs,{checkedNode:"1",unCheckedNode:"0",checked:n,onChange:s}),(0,c.jsx)(h.rs,{checkedNode:"✓",unCheckedNode:"✗",checked:t,onChange:i})]})}function x(){let[e,d]=r.useState(!1);return(0,c.jsx)("div",{style:{display:"flex",gap:"20px",alignItems:"center"},children:(0,c.jsx)(h.rs,{checkedColor:"green",unCheckedColor:"red",checked:e,onChange:d})})}n(9916);var o=n(8169);function j(e){let d=Object.assign({h1:"h1",a:"a",p:"p",h2:"h2",code:"code",pre:"pre",h3:"h3",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td"},(0,s.ah)(),e.components);return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(d.h1,{id:"switch-开关",children:[(0,c.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#switch-开关",children:"#"}),"Switch 开关"]}),"\n",(0,c.jsx)(d.p,{children:"表示两种相互对立的状态间的切换,多用于触发「开/关」。"}),"\n",(0,c.jsxs)(d.h2,{id:"基础用法",children:[(0,c.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#基础用法",children:"#"}),"基础用法"]}),"\n",(0,c.jsxs)(d.p,{children:["绑定 ",(0,c.jsx)(d.code,{children:"checked"})," 到一个布尔类型的变量。"]}),"\n",(0,c.jsxs)(o.Z,{isMobile:"false",demoId:"_components_switch_1",children:[(0,c.jsx)(d.pre,{children:(0,c.jsx)(d.code,{className:"language-tsx",meta:"preview",children:"export default function BasicSwitch() {\r\n const [checked, setChecked] = React.useState(false)\r\n\r\n return (\r\n <div>\r\n <Switch checked={checked} onChange={setChecked} />\r\n <p style={{ marginTop: '12px', color: '#606266' }}>\r\n 当前状态:{checked ? '开启' : '关闭'}\r\n </p>\r\n </div>\r\n )\r\n}\n"})}),(0,c.jsx)(t,{})]}),"\n",(0,c.jsxs)(d.h2,{id:"禁用状态",children:[(0,c.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#禁用状态",children:"#"}),"禁用状态"]}),"\n",(0,c.jsxs)(d.p,{children:["设置 ",(0,c.jsx)(d.code,{children:"disabled"})," 属性,接受一个布尔值,设置为 ",(0,c.jsx)(d.code,{children:"true"})," 即可禁用。"]}),"\n",(0,c.jsxs)(o.Z,{isMobile:"false",demoId:"_components_switch_2",children:[(0,c.jsx)(d.pre,{children:(0,c.jsx)(d.code,{className:"language-tsx",meta:"preview",children:"export default function Demo() {\r\n return (\r\n <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>\r\n <Switch disabled />\r\n <Switch disabled defaultChecked />\r\n </div>\r\n )\r\n}\n"})}),(0,c.jsx)(i,{})]}),"\n",(0,c.jsxs)(d.h2,{id:"加载状态",children:[(0,c.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#加载状态",children:"#"}),"加载状态"]}),"\n",(0,c.jsxs)(d.p,{children:["设置 ",(0,c.jsx)(d.code,{children:"loading"})," 属性,表示正在加载中的状态。"]}),"\n",(0,c.jsxs)(o.Z,{isMobile:"false",demoId:"_components_switch_3",children:[(0,c.jsx)(d.pre,{children:(0,c.jsx)(d.code,{className:"language-tsx",meta:"preview",children:"export default function LoadingSwitch() {\r\n const [loading, setLoading] = React.useState(false)\r\n const [checked, setChecked] = React.useState(false)\r\n\r\n const handleChange = (checked) => {\r\n setLoading(true)\r\n setTimeout(() => {\r\n setChecked(checked)\r\n setLoading(false)\r\n }, 1000)\r\n }\r\n\r\n return (\r\n <div>\r\n <Switch loading={loading} checked={checked} onChange={handleChange} />\r\n <p style={{ marginTop: '12px', color: '#606266' }}>\r\n {loading ? '加载中...' : checked ? '已开启' : '已关闭'}\r\n </p>\r\n </div>\r\n )\r\n}\n"})}),(0,c.jsx)(l,{})]}),"\n",(0,c.jsxs)(d.h2,{id:"自定义开关内容",children:[(0,c.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#自定义开关内容",children:"#"}),"自定义开关内容"]}),"\n",(0,c.jsxs)(d.p,{children:["通过 ",(0,c.jsx)(d.code,{children:"checkedNode"})," 设置选中状态的内容,通过 ",(0,c.jsx)(d.code,{children:"unCheckedNode"})," 设置未选中状态的内容,可以设置:图标、文字等。选中状态的内容显示在开关右侧,未选中状态的内容显示在开关左侧。"]}),"\n",(0,c.jsxs)(o.Z,{isMobile:"false",demoId:"_components_switch_4",children:[(0,c.jsx)(d.pre,{children:(0,c.jsx)(d.code,{className:"language-tsx",meta:"preview",children:"export default function CustomContentSwitch() {\r\n const [checked1, setChecked1] = React.useState(true)\r\n const [checked2, setChecked2] = React.useState(false)\r\n const [checked3, setChecked3] = React.useState(true)\r\n\r\n return (\r\n <div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>\r\n <Switch checkedNode='开' unCheckedNode='关' checked={checked1} onChange={setChecked1} />\r\n <Switch checkedNode='1' unCheckedNode='0' checked={checked2} onChange={setChecked2} />\r\n <Switch checkedNode='✓' unCheckedNode='✗' checked={checked3} onChange={setChecked3} />\r\n </div>\r\n )\r\n}\n"})}),(0,c.jsx)(a,{})]}),"\n",(0,c.jsxs)(d.h2,{id:"自定义背景色",children:[(0,c.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#自定义背景色",children:"#"}),"自定义背景色"]}),"\n",(0,c.jsxs)(d.p,{children:["通过 ",(0,c.jsx)(d.code,{children:"checkedColor"})," 设置选中状态的背景色,通过 ",(0,c.jsx)(d.code,{children:"unCheckedColor"})," 设置未选中状态的背景色。"]}),"\n",(0,c.jsxs)(o.Z,{isMobile:"false",demoId:"_components_switch_5",children:[(0,c.jsx)(d.pre,{children:(0,c.jsx)(d.code,{className:"language-tsx",meta:"preview",children:"export default function CustomColorSwitch() {\r\n const [checked, setChecked] = React.useState(false)\r\n\r\n return (\r\n <div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>\r\n <Switch checkedColor='green' unCheckedColor='red' checked={checked} onChange={setChecked} />\r\n </div>\r\n )\r\n}\n"})}),(0,c.jsx)(x,{})]}),"\n",(0,c.jsxs)(d.h2,{id:"api",children:[(0,c.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#api",children:"#"}),"API"]}),"\n",(0,c.jsxs)(d.h3,{id:"props",children:[(0,c.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#props",children:"#"}),"Props"]}),"\n",(0,c.jsxs)(d.table,{children:[(0,c.jsx)(d.thead,{children:(0,c.jsxs)(d.tr,{children:[(0,c.jsx)(d.th,{children:"属性"}),(0,c.jsx)(d.th,{children:"说明"}),(0,c.jsx)(d.th,{children:"类型"}),(0,c.jsx)(d.th,{children:"默认值"})]})}),(0,c.jsxs)(d.tbody,{children:[(0,c.jsxs)(d.tr,{children:[(0,c.jsx)(d.td,{children:"checked"}),(0,c.jsx)(d.td,{children:"是否选中(受控)"}),(0,c.jsx)(d.td,{children:(0,c.jsx)(d.code,{children:"boolean"})}),(0,c.jsx)(d.td,{children:"-"})]}),(0,c.jsxs)(d.tr,{children:[(0,c.jsx)(d.td,{children:"defaultChecked"}),(0,c.jsx)(d.td,{children:"默认是否选中"}),(0,c.jsx)(d.td,{children:(0,c.jsx)(d.code,{children:"boolean"})}),(0,c.jsx)(d.td,{children:(0,c.jsx)(d.code,{children:"false"})})]}),(0,c.jsxs)(d.tr,{children:[(0,c.jsx)(d.td,{children:"disabled"}),(0,c.jsx)(d.td,{children:"是否禁用"}),(0,c.jsx)(d.td,{children:(0,c.jsx)(d.code,{children:"boolean"})}),(0,c.jsx)(d.td,{children:(0,c.jsx)(d.code,{children:"false"})})]}),(0,c.jsxs)(d.tr,{children:[(0,c.jsx)(d.td,{children:"loading"}),(0,c.jsx)(d.td,{children:"是否加载中"}),(0,c.jsx)(d.td,{children:(0,c.jsx)(d.code,{children:"boolean"})}),(0,c.jsx)(d.td,{children:(0,c.jsx)(d.code,{children:"false"})})]}),(0,c.jsxs)(d.tr,{children:[(0,c.jsx)(d.td,{children:"checkedNode"}),(0,c.jsx)(d.td,{children:"选中状态显示的内容"}),(0,c.jsx)(d.td,{children:(0,c.jsx)(d.code,{children:"React.ReactNode"})}),(0,c.jsx)(d.td,{children:"-"})]}),(0,c.jsxs)(d.tr,{children:[(0,c.jsx)(d.td,{children:"unCheckedNode"}),(0,c.jsx)(d.td,{children:"未选中状态显示的内容"}),(0,c.jsx)(d.td,{children:(0,c.jsx)(d.code,{children:"React.ReactNode"})}),(0,c.jsx)(d.td,{children:"-"})]}),(0,c.jsxs)(d.tr,{children:[(0,c.jsx)(d.td,{children:"checkedColor"}),(0,c.jsx)(d.td,{children:"选中状态的背景色"}),(0,c.jsx)(d.td,{children:(0,c.jsx)(d.code,{children:"string"})}),(0,c.jsx)(d.td,{children:"-"})]}),(0,c.jsxs)(d.tr,{children:[(0,c.jsx)(d.td,{children:"unCheckedColor"}),(0,c.jsx)(d.td,{children:"未选中状态的背景色"}),(0,c.jsx)(d.td,{children:(0,c.jsx)(d.code,{children:"string"})}),(0,c.jsx)(d.td,{children:"-"})]}),(0,c.jsxs)(d.tr,{children:[(0,c.jsx)(d.td,{children:"name"}),(0,c.jsx)(d.td,{children:"原生 input 的 name"}),(0,c.jsx)(d.td,{children:(0,c.jsx)(d.code,{children:"string"})}),(0,c.jsx)(d.td,{children:"-"})]}),(0,c.jsxs)(d.tr,{children:[(0,c.jsx)(d.td,{children:"id"}),(0,c.jsx)(d.td,{children:"原生 input 的 id"}),(0,c.jsx)(d.td,{children:(0,c.jsx)(d.code,{children:"string"})}),(0,c.jsx)(d.td,{children:"-"})]}),(0,c.jsxs)(d.tr,{children:[(0,c.jsx)(d.td,{children:"className"}),(0,c.jsx)(d.td,{children:"自定义类名"}),(0,c.jsx)(d.td,{children:(0,c.jsx)(d.code,{children:"string"})}),(0,c.jsx)(d.td,{children:"-"})]})]})]}),"\n",(0,c.jsxs)(d.h3,{id:"events",children:[(0,c.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#events",children:"#"}),"Events"]}),"\n",(0,c.jsxs)(d.table,{children:[(0,c.jsx)(d.thead,{children:(0,c.jsxs)(d.tr,{children:[(0,c.jsx)(d.th,{children:"事件名"}),(0,c.jsx)(d.th,{children:"说明"}),(0,c.jsx)(d.th,{children:"类型"})]})}),(0,c.jsx)(d.tbody,{children:(0,c.jsxs)(d.tr,{children:[(0,c.jsx)(d.td,{children:"onChange"}),(0,c.jsx)(d.td,{children:"状态改变时触发"}),(0,c.jsx)(d.td,{children:(0,c.jsx)(d.code,{children:"(checked: boolean) => void"})})]})})]}),"\n",(0,c.jsxs)(d.h3,{id:"键盘操作",children:[(0,c.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#键盘操作",children:"#"}),"键盘操作"]}),"\n",(0,c.jsxs)(d.table,{children:[(0,c.jsx)(d.thead,{children:(0,c.jsxs)(d.tr,{children:[(0,c.jsx)(d.th,{children:"按键"}),(0,c.jsx)(d.th,{children:"说明"})]})}),(0,c.jsx)(d.tbody,{children:(0,c.jsxs)(d.tr,{children:[(0,c.jsx)(d.td,{children:"Enter / Space"}),(0,c.jsx)(d.td,{children:"切换开关"})]})})]})]})}function p(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:d}=Object.assign({},(0,s.ah)(),e.components);return d?(0,c.jsx)(d,Object.assign({},e,{children:(0,c.jsx)(j,e)})):j(e)}let u=p;p.__RSPRESS_PAGE_META={},p.__RSPRESS_PAGE_META["components%2Fswitch.mdx"]={toc:[{id:"基础用法",text:"基础用法",depth:2},{id:"禁用状态",text:"禁用状态",depth:2},{id:"加载状态",text:"加载状态",depth:2},{id:"自定义开关内容",text:"自定义开关内容",depth:2},{id:"自定义背景色",text:"自定义背景色",depth:2},{id:"api",text:"API",depth:2},{id:"props",text:"Props",depth:3},{id:"events",text:"Events",depth:3},{id:"键盘操作",text:"键盘操作",depth:3}],title:"Switch 开关",headingTitle:"Switch 开关",frontmatter:{}}}}]);
@@ -0,0 +1 @@
1
+ "use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["509"],{2162:function(e,n,i){i.r(n),i.d(n,{default:()=>d});var r=i(503),s=i(6971);function t(e){let n=Object.assign({h2:"h2",a:"a",p:"p",pre:"pre",code:"code",h3:"h3",ul:"ul",li:"li"},(0,s.ah)(),e.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.h2,{id:"安装",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#安装",children:"#"}),"安装"]}),"\n",(0,r.jsx)(n.p,{children:"::: code-group"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",meta:"[npm]",children:"npm install seven-design-ui\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",meta:"[pnpm]",children:"pnpm add seven-design-ui\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",meta:"[yarn]",children:"yarn add seven-design-ui\n"})}),"\n",(0,r.jsx)(n.p,{children:":::"}),"\n",(0,r.jsxs)(n.h2,{id:"快速开始",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#快速开始",children:"#"}),"快速开始"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import { Button } from 'seven-design-ui'\nimport 'seven-design-ui/dist/style.css'\n\nfunction App() {\n return <Button type=\"primary\">点击我</Button>\n}\n"})}),"\n",(0,r.jsxs)(n.h2,{id:"特性",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#特性",children:"#"}),"特性"]}),"\n",(0,r.jsxs)(n.h3,{id:"企业级设计",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#企业级设计",children:"#"}),"企业级设计"]}),"\n",(0,r.jsx)(n.p,{children:"SevenDesign 采用现代化的设计语言,参考了 Element Plus 的设计理念,为企业级应用提供统一、专业的视觉体验。"}),"\n",(0,r.jsxs)(n.h3,{id:"typescript-支持",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#typescript-支持",children:"#"}),"TypeScript 支持"]}),"\n",(0,r.jsx)(n.p,{children:"所有组件都使用 TypeScript 编写,提供完整的类型定义,让你在开发时获得更好的代码提示和类型检查。"}),"\n",(0,r.jsxs)(n.h3,{id:"主题定制",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#主题定制",children:"#"}),"主题定制"]}),"\n",(0,r.jsx)(n.p,{children:"基于 CSS Variables 的主题系统,你可以轻松定制组件的颜色、尺寸等样式,打造符合你品牌风格的 UI。"}),"\n",(0,r.jsxs)(n.h3,{id:"按需引入",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#按需引入",children:"#"}),"按需引入"]}),"\n",(0,r.jsx)(n.p,{children:"支持 Tree-shaking,只打包你实际使用的组件,有效减小项目的打包体积。"}),"\n",(0,r.jsxs)(n.h2,{id:"社区",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#社区",children:"#"}),"社区"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"https://github.com/7777even/sevenDesign.git",rel:"noopener noreferrer",target:"_blank",children:"GitHub"})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"https://www.npmjs.com/package/@seven-design-ui/theme",rel:"noopener noreferrer",target:"_blank",children:"NPM"})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"https://github.com/7777even/sevenDesign.git/issues",rel:"noopener noreferrer",target:"_blank",children:"问题反馈"})}),"\n"]})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,s.ah)(),e.components);return n?(0,r.jsx)(n,Object.assign({},e,{children:(0,r.jsx)(t,e)})):t(e)}let d=a;a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["index.md"]={toc:[{id:"安装",text:"安装",depth:2},{id:"快速开始",text:"快速开始",depth:2},{id:"特性",text:"特性",depth:2},{id:"企业级设计",text:"企业级设计",depth:3},{id:"typescript-支持",text:"TypeScript 支持",depth:3},{id:"主题定制",text:"主题定制",depth:3},{id:"按需引入",text:"按需引入",depth:3},{id:"社区",text:"社区",depth:2}],title:"",headingTitle:"",frontmatter:{pageType:"home",hero:{name:"SevenDesign",text:"企业级 React UI 组件库",tagline:"现代化、可定制、TypeScript 驱动的组件库",actions:[{theme:"brand",text:"快速开始",link:"/guide/quick-start"},{theme:"alt",text:"组件示例",link:"/components/button"}],image:{src:"/logo.svg",alt:"SevenDesign Logo"}},features:[{title:"\uD83C\uDFA8 精美设计",details:"现代化的设计风格,参考 Element Plus,提供优雅的用户体验"},{title:"\uD83D\uDCE6 开箱即用",details:"丰富的组件库,满足企业级应用的各种需求"},{title:"\uD83D\uDD27 TypeScript",details:"完整的类型定义,提供更好的开发体验和代码提示"},{title:"\uD83C\uDFAD 主题定制",details:"基于 CSS Variables 的主题系统,轻松定制你的品牌风格"},{title:"⚡ 按需加载",details:"支持 Tree-shaking,只打包你使用的组件,减小打包体积"},{title:"\uD83D\uDCDA 完善文档",details:"详细的组件文档和示例代码,帮助你快速上手"}]}}}}]);
@@ -0,0 +1 @@
1
+ "use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["512"],{4020:function(e,d,s){s.r(d),s.d(d,{default:()=>h});var r=s(503),n=s(6971);function c(e){let d=Object.assign({h1:"h1",a:"a",p:"p",h2:"h2",h3:"h3",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",ol:"ol",li:"li",strong:"strong"},(0,n.ah)(),e.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(d.h1,{id:"主题定制",children:[(0,r.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#主题定制",children:"#"}),"主题定制"]}),"\n",(0,r.jsx)(d.p,{children:"SevenDesign 使用 CSS Variables 实现主题定制,你可以轻松地修改组件的样式。"}),"\n",(0,r.jsxs)(d.h2,{id:"css-variables",children:[(0,r.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#css-variables",children:"#"}),"CSS Variables"]}),"\n",(0,r.jsx)(d.p,{children:"所有的设计 token 都以 CSS Variables 的形式暴露出来,你可以通过覆盖这些变量来自定义主题。"}),"\n",(0,r.jsxs)(d.h3,{id:"品牌色",children:[(0,r.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#品牌色",children:"#"}),"品牌色"]}),"\n",(0,r.jsx)(d.pre,{children:(0,r.jsx)(d.code,{className:"language-css",children:":root {\n --sd-color-primary: #409eff;\n --sd-color-success: #67c23a;\n --sd-color-warning: #e6a23c;\n --sd-color-danger: #f56c6c;\n --sd-color-info: #909399;\n}\n"})}),"\n",(0,r.jsxs)(d.h3,{id:"文本颜色",children:[(0,r.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#文本颜色",children:"#"}),"文本颜色"]}),"\n",(0,r.jsx)(d.pre,{children:(0,r.jsx)(d.code,{className:"language-css",children:":root {\n --sd-text-color-primary: #303133;\n --sd-text-color-regular: #606266;\n --sd-text-color-secondary: #909399;\n --sd-text-color-placeholder: #a8abb2;\n --sd-text-color-disabled: #c0c4cc;\n}\n"})}),"\n",(0,r.jsxs)(d.h3,{id:"边框颜色",children:[(0,r.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#边框颜色",children:"#"}),"边框颜色"]}),"\n",(0,r.jsx)(d.pre,{children:(0,r.jsx)(d.code,{className:"language-css",children:":root {\n --sd-border-color: #dcdfe6;\n --sd-border-color-light: #e4e7ed;\n --sd-border-color-lighter: #ebeef5;\n --sd-border-color-extra-light: #f2f6fc;\n}\n"})}),"\n",(0,r.jsxs)(d.h3,{id:"背景色",children:[(0,r.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#背景色",children:"#"}),"背景色"]}),"\n",(0,r.jsx)(d.pre,{children:(0,r.jsx)(d.code,{className:"language-css",children:":root {\n --sd-bg-color: #ffffff;\n --sd-bg-color-page: #f2f3f5;\n --sd-bg-color-overlay: #ffffff;\n}\n"})}),"\n",(0,r.jsxs)(d.h2,{id:"自定义主题",children:[(0,r.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#自定义主题",children:"#"}),"自定义主题"]}),"\n",(0,r.jsxs)(d.h3,{id:"方式一覆盖-css-variables",children:[(0,r.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#方式一覆盖-css-variables",children:"#"}),"方式一:覆盖 CSS Variables"]}),"\n",(0,r.jsx)(d.p,{children:"在你的项目中创建一个样式文件,覆盖默认的 CSS Variables:"}),"\n",(0,r.jsx)(d.pre,{children:(0,r.jsx)(d.code,{className:"language-css",children:"/* custom-theme.css */\n:root {\n /* 修改主色调 */\n --sd-color-primary: #1890ff;\n \n /* 修改圆角 */\n --sd-border-radius-base: 8px;\n \n /* 修改字体大小 */\n --sd-font-size-base: 16px;\n}\n"})}),"\n",(0,r.jsx)(d.p,{children:"然后在你的应用入口引入:"}),"\n",(0,r.jsx)(d.pre,{children:(0,r.jsx)(d.code,{className:"language-tsx",children:"import 'seven-design-ui/dist/style.css'\nimport './custom-theme.css'\n"})}),"\n",(0,r.jsxs)(d.h3,{id:"方式二使用内联样式",children:[(0,r.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#方式二使用内联样式",children:"#"}),"方式二:使用内联样式"]}),"\n",(0,r.jsx)(d.p,{children:"你也可以直接在 HTML 中修改 CSS Variables:"}),"\n",(0,r.jsx)(d.pre,{children:(0,r.jsx)(d.code,{className:"language-tsx",children:"function App() {\n return (\n <div\n style={{\n '--sd-color-primary': '#1890ff',\n '--sd-border-radius-base': '8px',\n } as React.CSSProperties}\n >\n <Button type=\"primary\">自定义主题按钮</Button>\n </div>\n )\n}\n"})}),"\n",(0,r.jsxs)(d.h2,{id:"暗色主题",children:[(0,r.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#暗色主题",children:"#"}),"暗色主题"]}),"\n",(0,r.jsxs)(d.p,{children:["SevenDesign 内置了暗色主题支持,只需在根元素添加 ",(0,r.jsx)(d.code,{children:".sd-dark"})," 类名:"]}),"\n",(0,r.jsx)(d.pre,{children:(0,r.jsx)(d.code,{className:"language-tsx",children:"function App() {\n const [dark, setDark] = React.useState(false)\n\n return (\n <div className={dark ? 'sd-dark' : ''}>\n <button onClick={() => setDark(!dark)}>切换主题</button>\n <Button type=\"primary\">按钮</Button>\n </div>\n )\n}\n"})}),"\n",(0,r.jsxs)(d.h3,{id:"自定义暗色主题",children:[(0,r.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#自定义暗色主题",children:"#"}),"自定义暗色主题"]}),"\n",(0,r.jsx)(d.p,{children:"你也可以覆盖暗色主题的 CSS Variables:"}),"\n",(0,r.jsx)(d.pre,{children:(0,r.jsx)(d.code,{className:"language-css",children:"/* custom-dark-theme.css */\n.sd-dark {\n --sd-color-primary: #177ddc;\n --sd-bg-color: #1f1f1f;\n --sd-text-color-primary: #e5e5e5;\n}\n"})}),"\n",(0,r.jsxs)(d.h2,{id:"完整的-css-variables-列表",children:[(0,r.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#完整的-css-variables-列表",children:"#"}),"完整的 CSS Variables 列表"]}),"\n",(0,r.jsxs)(d.h3,{id:"颜色",children:[(0,r.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#颜色",children:"#"}),"颜色"]}),"\n",(0,r.jsxs)(d.table,{children:[(0,r.jsx)(d.thead,{children:(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.th,{children:"变量名"}),(0,r.jsx)(d.th,{children:"说明"}),(0,r.jsx)(d.th,{children:"默认值"})]})}),(0,r.jsxs)(d.tbody,{children:[(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-color-primary"})}),(0,r.jsx)(d.td,{children:"主色"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"#409eff"})})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-color-success"})}),(0,r.jsx)(d.td,{children:"成功色"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"#67c23a"})})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-color-warning"})}),(0,r.jsx)(d.td,{children:"警告色"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"#e6a23c"})})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-color-danger"})}),(0,r.jsx)(d.td,{children:"危险色"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"#f56c6c"})})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-color-info"})}),(0,r.jsx)(d.td,{children:"信息色"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"#909399"})})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-color-white"})}),(0,r.jsx)(d.td,{children:"白色"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"#ffffff"})})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-color-black"})}),(0,r.jsx)(d.td,{children:"黑色"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"#000000"})})]})]})]}),"\n",(0,r.jsxs)(d.h3,{id:"文本颜色-1",children:[(0,r.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#文本颜色-1",children:"#"}),"文本颜色"]}),"\n",(0,r.jsxs)(d.table,{children:[(0,r.jsx)(d.thead,{children:(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.th,{children:"变量名"}),(0,r.jsx)(d.th,{children:"说明"}),(0,r.jsx)(d.th,{children:"默认值"})]})}),(0,r.jsxs)(d.tbody,{children:[(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-text-color-primary"})}),(0,r.jsx)(d.td,{children:"主要文本"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"#303133"})})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-text-color-regular"})}),(0,r.jsx)(d.td,{children:"常规文本"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"#606266"})})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-text-color-secondary"})}),(0,r.jsx)(d.td,{children:"次要文本"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"#909399"})})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-text-color-placeholder"})}),(0,r.jsx)(d.td,{children:"占位文本"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"#a8abb2"})})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-text-color-disabled"})}),(0,r.jsx)(d.td,{children:"禁用文本"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"#c0c4cc"})})]})]})]}),"\n",(0,r.jsxs)(d.h3,{id:"边框",children:[(0,r.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#边框",children:"#"}),"边框"]}),"\n",(0,r.jsxs)(d.table,{children:[(0,r.jsx)(d.thead,{children:(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.th,{children:"变量名"}),(0,r.jsx)(d.th,{children:"说明"}),(0,r.jsx)(d.th,{children:"默认值"})]})}),(0,r.jsxs)(d.tbody,{children:[(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-border-color"})}),(0,r.jsx)(d.td,{children:"边框颜色"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"#dcdfe6"})})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-border-color-light"})}),(0,r.jsx)(d.td,{children:"浅边框"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"#e4e7ed"})})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-border-color-lighter"})}),(0,r.jsx)(d.td,{children:"更浅边框"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"#ebeef5"})})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-border-color-extra-light"})}),(0,r.jsx)(d.td,{children:"极浅边框"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"#f2f6fc"})})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-border-radius-base"})}),(0,r.jsx)(d.td,{children:"基础圆角"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"4px"})})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-border-radius-small"})}),(0,r.jsx)(d.td,{children:"小圆角"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"2px"})})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-border-radius-round"})}),(0,r.jsx)(d.td,{children:"圆形"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"20px"})})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-border-radius-circle"})}),(0,r.jsx)(d.td,{children:"圆"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"100%"})})]})]})]}),"\n",(0,r.jsxs)(d.h3,{id:"字体",children:[(0,r.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#字体",children:"#"}),"字体"]}),"\n",(0,r.jsxs)(d.table,{children:[(0,r.jsx)(d.thead,{children:(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.th,{children:"变量名"}),(0,r.jsx)(d.th,{children:"说明"}),(0,r.jsx)(d.th,{children:"默认值"})]})}),(0,r.jsxs)(d.tbody,{children:[(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-font-size-extra-large"})}),(0,r.jsx)(d.td,{children:"超大字号"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"20px"})})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-font-size-large"})}),(0,r.jsx)(d.td,{children:"大字号"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"18px"})})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-font-size-medium"})}),(0,r.jsx)(d.td,{children:"中等字号"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"16px"})})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-font-size-base"})}),(0,r.jsx)(d.td,{children:"基础字号"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"14px"})})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-font-size-small"})}),(0,r.jsx)(d.td,{children:"小字号"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"13px"})})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-font-size-extra-small"})}),(0,r.jsx)(d.td,{children:"超小字号"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"12px"})})]})]})]}),"\n",(0,r.jsxs)(d.h3,{id:"组件尺寸",children:[(0,r.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#组件尺寸",children:"#"}),"组件尺寸"]}),"\n",(0,r.jsxs)(d.table,{children:[(0,r.jsx)(d.thead,{children:(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.th,{children:"变量名"}),(0,r.jsx)(d.th,{children:"说明"}),(0,r.jsx)(d.th,{children:"默认值"})]})}),(0,r.jsxs)(d.tbody,{children:[(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-component-size-large"})}),(0,r.jsx)(d.td,{children:"大尺寸"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"40px"})})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-component-size-default"})}),(0,r.jsx)(d.td,{children:"默认尺寸"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"32px"})})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-component-size-small"})}),(0,r.jsx)(d.td,{children:"小尺寸"}),(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"24px"})})]})]})]}),"\n",(0,r.jsxs)(d.h3,{id:"阴影",children:[(0,r.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#阴影",children:"#"}),"阴影"]}),"\n",(0,r.jsxs)(d.table,{children:[(0,r.jsx)(d.thead,{children:(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.th,{children:"变量名"}),(0,r.jsx)(d.th,{children:"说明"})]})}),(0,r.jsxs)(d.tbody,{children:[(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-box-shadow-base"})}),(0,r.jsx)(d.td,{children:"基础阴影"})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-box-shadow-light"})}),(0,r.jsx)(d.td,{children:"浅阴影"})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-box-shadow-lighter"})}),(0,r.jsx)(d.td,{children:"更浅阴影"})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"--sd-box-shadow-dark"})}),(0,r.jsx)(d.td,{children:"深阴影"})]})]})]}),"\n",(0,r.jsxs)(d.h2,{id:"示例",children:[(0,r.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#示例",children:"#"}),"示例"]}),"\n",(0,r.jsxs)(d.h3,{id:"创建绿色主题",children:[(0,r.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#创建绿色主题",children:"#"}),"创建绿色主题"]}),"\n",(0,r.jsx)(d.pre,{children:(0,r.jsx)(d.code,{className:"language-css",children:"/* green-theme.css */\n:root {\n --sd-color-primary: #52c41a;\n --sd-color-primary-light-3: #7ed321;\n --sd-color-primary-light-5: #95de64;\n --sd-color-primary-light-7: #b7eb8f;\n --sd-color-primary-light-8: #d9f7be;\n --sd-color-primary-light-9: #f6ffed;\n --sd-color-primary-dark-2: #389e0d;\n}\n"})}),"\n",(0,r.jsxs)(d.h3,{id:"创建紧凑主题",children:[(0,r.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#创建紧凑主题",children:"#"}),"创建紧凑主题"]}),"\n",(0,r.jsx)(d.pre,{children:(0,r.jsx)(d.code,{className:"language-css",children:"/* compact-theme.css */\n:root {\n --sd-component-size-large: 36px;\n --sd-component-size-default: 28px;\n --sd-component-size-small: 20px;\n --sd-font-size-base: 12px;\n --sd-border-radius-base: 2px;\n}\n"})}),"\n",(0,r.jsxs)(d.h2,{id:"最佳实践",children:[(0,r.jsx)(d.a,{className:"header-anchor","aria-hidden":"true",href:"#最佳实践",children:"#"}),"最佳实践"]}),"\n",(0,r.jsxs)(d.ol,{children:["\n",(0,r.jsxs)(d.li,{children:[(0,r.jsx)(d.strong,{children:"保持一致性"}),":确保主题颜色在整个应用中保持一致"]}),"\n",(0,r.jsxs)(d.li,{children:[(0,r.jsx)(d.strong,{children:"考虑可访问性"}),":确保文本和背景色有足够的对比度"]}),"\n",(0,r.jsxs)(d.li,{children:[(0,r.jsx)(d.strong,{children:"测试暗色模式"}),":如果支持暗色模式,确保在两种模式下都测试过"]}),"\n",(0,r.jsxs)(d.li,{children:[(0,r.jsx)(d.strong,{children:"使用设计系统"}),":建议基于设计系统来定制主题,而不是随意修改"]}),"\n"]})]})}function i(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:d}=Object.assign({},(0,n.ah)(),e.components);return d?(0,r.jsx)(d,Object.assign({},e,{children:(0,r.jsx)(c,e)})):c(e)}let h=i;i.__RSPRESS_PAGE_META={},i.__RSPRESS_PAGE_META["guide%2Ftheme.md"]={toc:[{id:"css-variables",text:"CSS Variables",depth:2},{id:"品牌色",text:"品牌色",depth:3},{id:"文本颜色",text:"文本颜色",depth:3},{id:"边框颜色",text:"边框颜色",depth:3},{id:"背景色",text:"背景色",depth:3},{id:"自定义主题",text:"自定义主题",depth:2},{id:"方式一覆盖-css-variables",text:"方式一:覆盖 CSS Variables",depth:3},{id:"方式二使用内联样式",text:"方式二:使用内联样式",depth:3},{id:"暗色主题",text:"暗色主题",depth:2},{id:"自定义暗色主题",text:"自定义暗色主题",depth:3},{id:"完整的-css-variables-列表",text:"完整的 CSS Variables 列表",depth:2},{id:"颜色",text:"颜色",depth:3},{id:"文本颜色-1",text:"文本颜色",depth:3},{id:"边框",text:"边框",depth:3},{id:"字体",text:"字体",depth:3},{id:"组件尺寸",text:"组件尺寸",depth:3},{id:"阴影",text:"阴影",depth:3},{id:"示例",text:"示例",depth:2},{id:"创建绿色主题",text:"创建绿色主题",depth:3},{id:"创建紧凑主题",text:"创建紧凑主题",depth:3},{id:"最佳实践",text:"最佳实践",depth:2}],title:"主题定制",headingTitle:"主题定制",frontmatter:{}}}}]);
@@ -0,0 +1 @@
1
+ "use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["531"],{3297:function(e,n,i){i.r(n),i.d(n,{default:()=>g});var d=i(503),r=i(6971),s=i(3732),t=i(3321);function l(){let[e,n]=s.useState(1),[i,r]=s.useState(10);return(0,d.jsxs)("div",{children:[(0,d.jsx)(t.tl,{total:100,defaultCurrent:1,defaultPageSize:10,onChange:(e,i)=>{n(e),r(i)}}),(0,d.jsxs)("p",{style:{marginTop:"12px",fontSize:"14px",color:"#666"},children:["当前页码: ",e,", 每页容量: ",i]})]})}function c(){return(0,d.jsxs)("div",{style:{display:"flex",flexDirection:"column",gap:"20px"},children:[(0,d.jsxs)("div",{children:[(0,d.jsx)("div",{style:{marginBottom:"8px",fontSize:"14px",color:"#666"},children:"小尺寸 (s)"}),(0,d.jsx)(t.tl,{total:50,size:"s"})]}),(0,d.jsxs)("div",{children:[(0,d.jsx)("div",{style:{marginBottom:"8px",fontSize:"14px",color:"#666"},children:"中等尺寸 (m)"}),(0,d.jsx)(t.tl,{total:50,size:"m"})]})]})}function a(){return(0,d.jsxs)("div",{children:[(0,d.jsx)(t.tl,{total:200,pagerCount:5,defaultCurrent:10}),(0,d.jsx)("p",{style:{marginTop:"12px",fontSize:"14px",color:"#666"},children:"最大显示5个页码按钮,总共20页数据"})]})}function h(){return(0,d.jsxs)("div",{children:[(0,d.jsx)(t.tl,{total:500,pageSizeOptions:[5,10,20,50],defaultPageSize:5}),(0,d.jsx)("p",{style:{marginTop:"12px",fontSize:"14px",color:"#666"},children:"每页容量选项: 5, 10, 20, 50"})]})}function o(){return(0,d.jsxs)("div",{children:[(0,d.jsx)(t.tl,{total:100,showQuickJumper:!0,defaultCurrent:5}),(0,d.jsx)("p",{style:{marginTop:"12px",fontSize:"14px",color:"#666"},children:"可以通过输入框直接跳转到指定页码"})]})}function x(){let[e,n]=s.useState(3),[i,r]=s.useState(20);return(0,d.jsxs)("div",{children:[(0,d.jsx)(t.tl,{total:500,current:e,pageSize:i,pageSizeOptions:[10,20,50,100],showQuickJumper:!0,onChange:(e,i)=>{n(e),r(i),console.log(`\u{9875}\u{7801}: ${e}, \u{6BCF}\u{9875}\u{5BB9}\u{91CF}: ${i}`)},onPageSizeChange:e=>{console.log(`\u{6BCF}\u{9875}\u{5BB9}\u{91CF}\u{6539}\u{53D8}: ${e}`)}}),(0,d.jsxs)("div",{style:{marginTop:"16px",padding:"12px",backgroundColor:"#f5f5f5",borderRadius:"4px"},children:[(0,d.jsxs)("p",{style:{margin:"0",fontSize:"14px",color:"#333"},children:[(0,d.jsx)("strong",{children:"当前状态:"}),"第 ",e," 页,每页 ",i," 条,共 ",500," 条数据"]}),(0,d.jsxs)("p",{style:{margin:"8px 0 0 0",fontSize:"12px",color:"#666"},children:["总页数: ",Math.ceil(500/i)," 页"]})]})]})}i(9916);var j=i(8169);function p(e){let n=Object.assign({h1:"h1",a:"a",p:"p",h2:"h2",code:"code",pre:"pre",h3:"h3",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td"},(0,r.ah)(),e.components);return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)(n.h1,{id:"pagination-分页器",children:[(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#pagination-分页器",children:"#"}),"Pagination 分页器"]}),"\n",(0,d.jsx)(n.p,{children:"当数据量过多时,使用分页器进行数据展示。"}),"\n",(0,d.jsxs)(n.h2,{id:"基础用法",children:[(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#基础用法",children:"#"}),"基础用法"]}),"\n",(0,d.jsxs)(n.p,{children:["基础的分页器用法,设置 ",(0,d.jsx)(n.code,{children:"total"}),"、",(0,d.jsx)(n.code,{children:"defaultCurrent"})," 和 ",(0,d.jsx)(n.code,{children:"defaultPageSize"})," 来控制分页器的基本行为。"]}),"\n",(0,d.jsxs)(j.Z,{isMobile:"false",demoId:"_components_pagination_1",children:[(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-tsx",meta:"preview",children:"export default function Demo() {\n const [current, setCurrent] = React.useState(1)\n const [pageSize, setPageSize] = React.useState(10)\n\n const handleChange = (page, size) => {\n setCurrent(page)\n setPageSize(size)\n }\n\n return (\n <div>\n <Pagination\n total={100}\n defaultCurrent={1}\n defaultPageSize={10}\n onChange={handleChange}\n />\n <p style={{ marginTop: '12px', fontSize: '14px', color: '#666' }}>\n 当前页码: {current}, 每页容量: {pageSize}\n </p>\n </div>\n )\n}\n"})}),(0,d.jsx)(l,{})]}),"\n",(0,d.jsxs)(n.h2,{id:"不同大小",children:[(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#不同大小",children:"#"}),"不同大小"]}),"\n",(0,d.jsxs)(n.p,{children:["分页器支持两种尺寸:",(0,d.jsx)(n.code,{children:"s"}),"(小)和 ",(0,d.jsx)(n.code,{children:"m"}),"(中),默认为 ",(0,d.jsx)(n.code,{children:"m"}),"。"]}),"\n",(0,d.jsxs)(j.Z,{isMobile:"false",demoId:"_components_pagination_2",children:[(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-tsx",meta:"preview",children:"export default function Demo() {\n return (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>\n <div>\n <div style={{ marginBottom: '8px', fontSize: '14px', color: '#666' }}>小尺寸 (s)</div>\n <Pagination total={50} size=\"s\" />\n </div>\n <div>\n <div style={{ marginBottom: '8px', fontSize: '14px', color: '#666' }}>中等尺寸 (m)</div>\n <Pagination total={50} size=\"m\" />\n </div>\n </div>\n )\n}\n"})}),(0,d.jsx)(c,{})]}),"\n",(0,d.jsxs)(n.h2,{id:"自定义最大页码按钮数",children:[(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#自定义最大页码按钮数",children:"#"}),"自定义最大页码按钮数"]}),"\n",(0,d.jsxs)(n.p,{children:["通过 ",(0,d.jsx)(n.code,{children:"pagerCount"})," 属性可以设置最大页码按钮数,默认为7。当总页数超过设置值时,会自动折叠多余的页码按钮。"]}),"\n",(0,d.jsxs)(j.Z,{isMobile:"false",demoId:"_components_pagination_3",children:[(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-tsx",meta:"preview",children:"export default function Demo() {\n return (\n <div>\n <Pagination total={200} pagerCount={5} defaultCurrent={10} />\n <p style={{ marginTop: '12px', fontSize: '14px', color: '#666' }}>\n 最大显示5个页码按钮,总共20页数据\n </p>\n </div>\n )\n}\n"})}),(0,d.jsx)(a,{})]}),"\n",(0,d.jsxs)(n.h2,{id:"自定义每页容量选项",children:[(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#自定义每页容量选项",children:"#"}),"自定义每页容量选项"]}),"\n",(0,d.jsxs)(n.p,{children:["通过 ",(0,d.jsx)(n.code,{children:"pageSizeOptions"})," 属性可以设置每页容量的选择项,默认为 ",(0,d.jsx)(n.code,{children:"[10, 20, 50, 100]"}),"。"]}),"\n",(0,d.jsxs)(j.Z,{isMobile:"false",demoId:"_components_pagination_4",children:[(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-tsx",meta:"preview",children:"export default function Demo() {\n return (\n <div>\n <Pagination\n total={500}\n pageSizeOptions={[5, 10, 20, 50]}\n defaultPageSize={5}\n />\n <p style={{ marginTop: '12px', fontSize: '14px', color: '#666' }}>\n 每页容量选项: 5, 10, 20, 50\n </p>\n </div>\n )\n}\n"})}),(0,d.jsx)(h,{})]}),"\n",(0,d.jsxs)(n.h2,{id:"跳转功能",children:[(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#跳转功能",children:"#"}),"跳转功能"]}),"\n",(0,d.jsxs)(n.p,{children:["通过设置 ",(0,d.jsx)(n.code,{children:"showQuickJumper"})," 为 ",(0,d.jsx)(n.code,{children:"true"})," 来启用跳转功能,用户可以直接输入页码进行跳转。"]}),"\n",(0,d.jsxs)(j.Z,{isMobile:"false",demoId:"_components_pagination_5",children:[(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-tsx",meta:"preview",children:"export default function Demo() {\n return (\n <div>\n <Pagination\n total={100}\n showQuickJumper={true}\n defaultCurrent={5}\n />\n <p style={{ marginTop: '12px', fontSize: '14px', color: '#666' }}>\n 可以通过输入框直接跳转到指定页码\n </p>\n </div>\n )\n}\n"})}),(0,d.jsx)(o,{})]}),"\n",(0,d.jsxs)(n.h2,{id:"完整功能演示",children:[(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#完整功能演示",children:"#"}),"完整功能演示"]}),"\n",(0,d.jsx)(n.p,{children:"展示分页器的所有功能,包括页码切换、每页容量控制和跳转功能。"}),"\n",(0,d.jsxs)(j.Z,{isMobile:"false",demoId:"_components_pagination_6",children:[(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-tsx",meta:"preview",children:"export default function Demo() {\n const [current, setCurrent] = React.useState(3)\n const [pageSize, setPageSize] = React.useState(20)\n\n const handleChange = (page, size) => {\n setCurrent(page)\n setPageSize(size)\n console.log(`页码: ${page}, 每页容量: ${size}`)\n }\n\n const handlePageSizeChange = (size) => {\n console.log(`每页容量改变: ${size}`)\n }\n\n return (\n <div>\n <Pagination\n total={500}\n current={current}\n pageSize={pageSize}\n pageSizeOptions={[10, 20, 50, 100]}\n showQuickJumper={true}\n onChange={handleChange}\n onPageSizeChange={handlePageSizeChange}\n />\n <div style={{ marginTop: '16px', padding: '12px', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>\n <p style={{ margin: '0', fontSize: '14px', color: '#333' }}>\n <strong>当前状态:</strong>第 {current} 页,每页 {pageSize} 条,共 {500} 条数据\n </p>\n <p style={{ margin: '8px 0 0 0', fontSize: '12px', color: '#666' }}>\n 总页数: {Math.ceil(500 / pageSize)} 页\n </p>\n </div>\n </div>\n )\n}\n"})}),(0,d.jsx)(x,{})]}),"\n",(0,d.jsxs)(n.h2,{id:"api",children:[(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#api",children:"#"}),"API"]}),"\n",(0,d.jsxs)(n.h3,{id:"props",children:[(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#props",children:"#"}),"Props"]}),"\n",(0,d.jsxs)(n.table,{children:[(0,d.jsx)(n.thead,{children:(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.th,{children:"属性"}),(0,d.jsx)(n.th,{children:"说明"}),(0,d.jsx)(n.th,{children:"类型"}),(0,d.jsx)(n.th,{children:"默认值"})]})}),(0,d.jsxs)(n.tbody,{children:[(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"total"}),(0,d.jsx)(n.td,{children:"总数量"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"number"})}),(0,d.jsx)(n.td,{children:"-"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"defaultCurrent"}),(0,d.jsx)(n.td,{children:"默认页码"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"number"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"1"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"defaultPageSize"}),(0,d.jsx)(n.td,{children:"默认每页容量"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"number"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"10"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"current"}),(0,d.jsx)(n.td,{children:"当前页码(受控模式)"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"number"})}),(0,d.jsx)(n.td,{children:"-"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"pageSize"}),(0,d.jsx)(n.td,{children:"每页容量(受控模式)"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"number"})}),(0,d.jsx)(n.td,{children:"-"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"onChange"}),(0,d.jsx)(n.td,{children:"页码改变回调"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"(page: number, pageSize: number) => void"})}),(0,d.jsx)(n.td,{children:"-"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"onPageSizeChange"}),(0,d.jsx)(n.td,{children:"每页容量改变回调"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"(pageSize: number) => void"})}),(0,d.jsx)(n.td,{children:"-"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"pagerCount"}),(0,d.jsx)(n.td,{children:"最大页码按钮数"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"number"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"7"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"size"}),(0,d.jsx)(n.td,{children:"分页器大小"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"'s' | 'm'"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"'m'"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"pageSizeOptions"}),(0,d.jsx)(n.td,{children:"每页容量选项"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"number[]"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"[10, 20, 50, 100]"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"showSizeChanger"}),(0,d.jsx)(n.td,{children:"是否显示每页容量选择器"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"boolean"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"true"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"showQuickJumper"}),(0,d.jsx)(n.td,{children:"是否显示跳转输入框"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"boolean"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"false"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"className"}),(0,d.jsx)(n.td,{children:"自定义类名"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"string"})}),(0,d.jsx)(n.td,{children:"-"})]})]})]}),"\n",(0,d.jsxs)(n.h3,{id:"events",children:[(0,d.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#events",children:"#"}),"Events"]}),"\n",(0,d.jsxs)(n.table,{children:[(0,d.jsx)(n.thead,{children:(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.th,{children:"事件名"}),(0,d.jsx)(n.th,{children:"说明"}),(0,d.jsx)(n.th,{children:"类型"})]})}),(0,d.jsxs)(n.tbody,{children:[(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"onChange"}),(0,d.jsx)(n.td,{children:"页码或每页容量改变时触发"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"(page: number, pageSize: number) => void"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"onPageSizeChange"}),(0,d.jsx)(n.td,{children:"每页容量改变时触发"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"(pageSize: number) => void"})})]})]})]})]})}function u(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,r.ah)(),e.components);return n?(0,d.jsx)(n,Object.assign({},e,{children:(0,d.jsx)(p,e)})):p(e)}let g=u;u.__RSPRESS_PAGE_META={},u.__RSPRESS_PAGE_META["components%2Fpagination.mdx"]={toc:[{id:"基础用法",text:"基础用法",depth:2},{id:"不同大小",text:"不同大小",depth:2},{id:"自定义最大页码按钮数",text:"自定义最大页码按钮数",depth:2},{id:"自定义每页容量选项",text:"自定义每页容量选项",depth:2},{id:"跳转功能",text:"跳转功能",depth:2},{id:"完整功能演示",text:"完整功能演示",depth:2},{id:"api",text:"API",depth:2},{id:"props",text:"Props",depth:3},{id:"events",text:"Events",depth:3}],title:"Pagination 分页器",headingTitle:"Pagination 分页器",frontmatter:{}}}}]);
@@ -0,0 +1,2 @@
1
+ /*! For license information please see 562.b402b94f.js.LICENSE.txt */
2
+ "use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["562"],{8169:function(e,t,r){r.d(t,{Z:()=>x});var s,i=r(503),n=r(9058),o=r(3732),l=Object.defineProperty,a=Object.getOwnPropertySymbols,h=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable,d=(e,t,r)=>t in e?l(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,c=(e,t)=>{for(var r in t||(t={}))h.call(t,r)&&d(e,r,t[r]);if(a)for(var r of a(t))u.call(t,r)&&d(e,r,t[r]);return e},f=(e,t)=>{var r={};for(var s in e)h.call(e,s)&&0>t.indexOf(s)&&(r[s]=e[s]);if(null!=e&&a)for(var s of a(e))0>t.indexOf(s)&&u.call(e,s)&&(r[s]=e[s]);return r};(e=>{let t=class{constructor(e,r,s,n){if(this.version=e,this.errorCorrectionLevel=r,this.modules=[],this.isFunction=[],e<t.MIN_VERSION||e>t.MAX_VERSION)throw RangeError("Version value out of range");if(n<-1||n>7)throw RangeError("Mask value out of range");this.size=4*e+17;let o=[];for(let e=0;e<this.size;e++)o.push(!1);for(let e=0;e<this.size;e++)this.modules.push(o.slice()),this.isFunction.push(o.slice());this.drawFunctionPatterns();let l=this.addEccAndInterleave(s);if(this.drawCodewords(l),-1==n){let e=1e9;for(let t=0;t<8;t++){this.applyMask(t),this.drawFormatBits(t);let r=this.getPenaltyScore();r<e&&(n=t,e=r),this.applyMask(t)}}i(0<=n&&n<=7),this.mask=n,this.applyMask(n),this.drawFormatBits(n),this.isFunction=[]}static encodeText(r,s){let i=e.QrSegment.makeSegments(r);return t.encodeSegments(i,s)}static encodeBinary(r,s){let i=e.QrSegment.makeBytes(r);return t.encodeSegments([i],s)}static encodeSegments(e,s,n=1,l=40,a=-1,h=!0){let u,d;if(!(t.MIN_VERSION<=n&&n<=l&&l<=t.MAX_VERSION)||a<-1||a>7)throw RangeError("Invalid value");for(u=n;;u++){let r=8*t.getNumDataCodewords(u,s),i=o.getTotalBits(e,u);if(i<=r){d=i;break}if(u>=l)throw RangeError("Data too long")}for(let e of[t.Ecc.MEDIUM,t.Ecc.QUARTILE,t.Ecc.HIGH])h&&d<=8*t.getNumDataCodewords(u,e)&&(s=e);let c=[];for(let t of e)for(let e of(r(t.mode.modeBits,4,c),r(t.numChars,t.mode.numCharCountBits(u),c),t.getData()))c.push(e);i(c.length==d);let f=8*t.getNumDataCodewords(u,s);i(c.length<=f),r(0,Math.min(4,f-c.length),c),r(0,(8-c.length%8)%8,c),i(c.length%8==0);for(let e=236;c.length<f;e^=253)r(e,8,c);let m=[];for(;8*m.length<c.length;)m.push(0);return c.forEach((e,t)=>m[t>>>3]|=e<<7-(7&t)),new t(u,s,m,a)}getModule(e,t){return 0<=e&&e<this.size&&0<=t&&t<this.size&&this.modules[t][e]}getModules(){return this.modules}drawFunctionPatterns(){for(let e=0;e<this.size;e++)this.setFunctionModule(6,e,e%2==0),this.setFunctionModule(e,6,e%2==0);this.drawFinderPattern(3,3),this.drawFinderPattern(this.size-4,3),this.drawFinderPattern(3,this.size-4);let e=this.getAlignmentPatternPositions(),t=e.length;for(let r=0;r<t;r++)for(let s=0;s<t;s++)(0!=r||0!=s)&&(0!=r||s!=t-1)&&(r!=t-1||0!=s)&&this.drawAlignmentPattern(e[r],e[s]);this.drawFormatBits(0),this.drawVersion()}drawFormatBits(e){let t=this.errorCorrectionLevel.formatBits<<3|e,r=t;for(let e=0;e<10;e++)r=r<<1^(r>>>9)*1335;let n=(t<<10|r)^21522;i(n>>>15==0);for(let e=0;e<=5;e++)this.setFunctionModule(8,e,s(n,e));this.setFunctionModule(8,7,s(n,6)),this.setFunctionModule(8,8,s(n,7)),this.setFunctionModule(7,8,s(n,8));for(let e=9;e<15;e++)this.setFunctionModule(14-e,8,s(n,e));for(let e=0;e<8;e++)this.setFunctionModule(this.size-1-e,8,s(n,e));for(let e=8;e<15;e++)this.setFunctionModule(8,this.size-15+e,s(n,e));this.setFunctionModule(8,this.size-8,!0)}drawVersion(){if(this.version<7)return;let e=this.version;for(let t=0;t<12;t++)e=e<<1^(e>>>11)*7973;let t=this.version<<12|e;i(t>>>18==0);for(let e=0;e<18;e++){let r=s(t,e),i=this.size-11+e%3,n=Math.floor(e/3);this.setFunctionModule(i,n,r),this.setFunctionModule(n,i,r)}}drawFinderPattern(e,t){for(let r=-4;r<=4;r++)for(let s=-4;s<=4;s++){let i=Math.max(Math.abs(s),Math.abs(r)),n=e+s,o=t+r;0<=n&&n<this.size&&0<=o&&o<this.size&&this.setFunctionModule(n,o,2!=i&&4!=i)}}drawAlignmentPattern(e,t){for(let r=-2;r<=2;r++)for(let s=-2;s<=2;s++)this.setFunctionModule(e+s,t+r,1!=Math.max(Math.abs(s),Math.abs(r)))}setFunctionModule(e,t,r){this.modules[t][e]=r,this.isFunction[t][e]=!0}addEccAndInterleave(e){let r=this.version,s=this.errorCorrectionLevel;if(e.length!=t.getNumDataCodewords(r,s))throw RangeError("Invalid argument");let n=t.NUM_ERROR_CORRECTION_BLOCKS[s.ordinal][r],o=t.ECC_CODEWORDS_PER_BLOCK[s.ordinal][r],l=Math.floor(t.getNumRawDataModules(r)/8),a=n-l%n,h=Math.floor(l/n),u=[],d=t.reedSolomonComputeDivisor(o);for(let r=0,s=0;r<n;r++){let i=e.slice(s,s+h-o+(r<a?0:1));s+=i.length;let n=t.reedSolomonComputeRemainder(i,d);r<a&&i.push(0),u.push(i.concat(n))}let c=[];for(let e=0;e<u[0].length;e++)u.forEach((t,r)=>{(e!=h-o||r>=a)&&c.push(t[e])});return i(c.length==l),c}drawCodewords(e){if(e.length!=Math.floor(t.getNumRawDataModules(this.version)/8))throw RangeError("Invalid argument");let r=0;for(let t=this.size-1;t>=1;t-=2){6==t&&(t=5);for(let i=0;i<this.size;i++)for(let n=0;n<2;n++){let o=t-n,l=(t+1&2)==0?this.size-1-i:i;!this.isFunction[l][o]&&r<8*e.length&&(this.modules[l][o]=s(e[r>>>3],7-(7&r)),r++)}}i(r==8*e.length)}applyMask(e){if(e<0||e>7)throw RangeError("Mask value out of range");for(let t=0;t<this.size;t++)for(let r=0;r<this.size;r++){let s;switch(e){case 0:s=(r+t)%2==0;break;case 1:s=t%2==0;break;case 2:s=r%3==0;break;case 3:s=(r+t)%3==0;break;case 4:s=(Math.floor(r/3)+Math.floor(t/2))%2==0;break;case 5:s=r*t%2+r*t%3==0;break;case 6:s=(r*t%2+r*t%3)%2==0;break;case 7:s=((r+t)%2+r*t%3)%2==0;break;default:throw Error("Unreachable")}!this.isFunction[t][r]&&s&&(this.modules[t][r]=!this.modules[t][r])}}getPenaltyScore(){let e=0;for(let r=0;r<this.size;r++){let s=!1,i=0,n=[0,0,0,0,0,0,0];for(let o=0;o<this.size;o++)this.modules[r][o]==s?5==++i?e+=t.PENALTY_N1:i>5&&e++:(this.finderPenaltyAddHistory(i,n),s||(e+=this.finderPenaltyCountPatterns(n)*t.PENALTY_N3),s=this.modules[r][o],i=1);e+=this.finderPenaltyTerminateAndCount(s,i,n)*t.PENALTY_N3}for(let r=0;r<this.size;r++){let s=!1,i=0,n=[0,0,0,0,0,0,0];for(let o=0;o<this.size;o++)this.modules[o][r]==s?5==++i?e+=t.PENALTY_N1:i>5&&e++:(this.finderPenaltyAddHistory(i,n),s||(e+=this.finderPenaltyCountPatterns(n)*t.PENALTY_N3),s=this.modules[o][r],i=1);e+=this.finderPenaltyTerminateAndCount(s,i,n)*t.PENALTY_N3}for(let r=0;r<this.size-1;r++)for(let s=0;s<this.size-1;s++){let i=this.modules[r][s];i==this.modules[r][s+1]&&i==this.modules[r+1][s]&&i==this.modules[r+1][s+1]&&(e+=t.PENALTY_N2)}let r=0;for(let e of this.modules)r=e.reduce((e,t)=>e+ +!!t,r);let s=this.size*this.size,n=Math.ceil(Math.abs(20*r-10*s)/s)-1;return i(0<=n&&n<=9),i(0<=(e+=n*t.PENALTY_N4)&&e<=2568888),e}getAlignmentPatternPositions(){if(1==this.version)return[];{let e=Math.floor(this.version/7)+2,t=32==this.version?26:2*Math.ceil((4*this.version+4)/(2*e-2)),r=[6];for(let s=this.size-7;r.length<e;s-=t)r.splice(1,0,s);return r}}static getNumRawDataModules(e){if(e<t.MIN_VERSION||e>t.MAX_VERSION)throw RangeError("Version number out of range");let r=(16*e+128)*e+64;if(e>=2){let t=Math.floor(e/7)+2;r-=(25*t-10)*t-55,e>=7&&(r-=36)}return i(208<=r&&r<=29648),r}static getNumDataCodewords(e,r){return Math.floor(t.getNumRawDataModules(e)/8)-t.ECC_CODEWORDS_PER_BLOCK[r.ordinal][e]*t.NUM_ERROR_CORRECTION_BLOCKS[r.ordinal][e]}static reedSolomonComputeDivisor(e){if(e<1||e>255)throw RangeError("Degree out of range");let r=[];for(let t=0;t<e-1;t++)r.push(0);r.push(1);let s=1;for(let i=0;i<e;i++){for(let e=0;e<r.length;e++)r[e]=t.reedSolomonMultiply(r[e],s),e+1<r.length&&(r[e]^=r[e+1]);s=t.reedSolomonMultiply(s,2)}return r}static reedSolomonComputeRemainder(e,r){let s=r.map(e=>0);for(let i of e){let e=i^s.shift();s.push(0),r.forEach((r,i)=>s[i]^=t.reedSolomonMultiply(r,e))}return s}static reedSolomonMultiply(e,t){if(e>>>8!=0||t>>>8!=0)throw RangeError("Byte out of range");let r=0;for(let s=7;s>=0;s--)r=r<<1^(r>>>7)*285^(t>>>s&1)*e;return i(r>>>8==0),r}finderPenaltyCountPatterns(e){let t=e[1];i(t<=3*this.size);let r=t>0&&e[2]==t&&e[3]==3*t&&e[4]==t&&e[5]==t;return(r&&e[0]>=4*t&&e[6]>=t?1:0)+(r&&e[6]>=4*t&&e[0]>=t?1:0)}finderPenaltyTerminateAndCount(e,t,r){return e&&(this.finderPenaltyAddHistory(t,r),t=0),t+=this.size,this.finderPenaltyAddHistory(t,r),this.finderPenaltyCountPatterns(r)}finderPenaltyAddHistory(e,t){0==t[0]&&(e+=this.size),t.pop(),t.unshift(e)}};function r(e,t,r){if(t<0||t>31||e>>>t!=0)throw RangeError("Value out of range");for(let s=t-1;s>=0;s--)r.push(e>>>s&1)}function s(e,t){return(e>>>t&1)!=0}function i(e){if(!e)throw Error("Assertion error")}t.MIN_VERSION=1,t.MAX_VERSION=40,t.PENALTY_N1=3,t.PENALTY_N2=3,t.PENALTY_N3=40,t.PENALTY_N4=10,t.ECC_CODEWORDS_PER_BLOCK=[[-1,7,10,15,20,26,18,20,24,30,18,20,24,26,30,22,24,28,30,28,28,28,28,30,30,26,28,30,30,30,30,30,30,30,30,30,30,30,30,30,30],[-1,10,16,26,18,24,16,18,22,22,26,30,22,22,24,24,28,28,26,26,26,26,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28],[-1,13,22,18,26,18,24,18,22,20,24,28,26,24,20,30,24,28,28,26,30,28,30,30,30,30,28,30,30,30,30,30,30,30,30,30,30,30,30,30,30],[-1,17,28,22,16,22,28,26,26,24,28,24,28,22,24,24,30,28,28,26,28,30,24,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30]],t.NUM_ERROR_CORRECTION_BLOCKS=[[-1,1,1,1,1,1,2,2,2,2,4,4,4,4,4,6,6,6,6,7,8,8,9,9,10,12,12,12,13,14,15,16,17,18,19,19,20,21,22,24,25],[-1,1,1,1,2,2,4,4,4,5,5,5,8,9,9,10,10,11,13,14,16,17,17,18,20,21,23,25,26,28,29,31,33,35,37,38,40,43,45,47,49],[-1,1,1,2,2,4,4,6,6,8,8,8,10,12,16,12,17,16,18,21,20,23,23,25,27,29,34,34,35,38,40,43,45,48,51,53,56,59,62,65,68],[-1,1,1,2,4,4,4,5,6,8,8,11,11,16,16,18,16,19,21,25,25,25,34,30,32,35,37,40,42,45,48,51,54,57,60,63,66,70,74,77,81]],e.QrCode=t;let n=class{constructor(e,t,r){if(this.mode=e,this.numChars=t,this.bitData=r,t<0)throw RangeError("Invalid argument");this.bitData=r.slice()}static makeBytes(e){let t=[];for(let s of e)r(s,8,t);return new n(n.Mode.BYTE,e.length,t)}static makeNumeric(e){if(!n.isNumeric(e))throw RangeError("String contains non-numeric characters");let t=[];for(let s=0;s<e.length;){let i=Math.min(e.length-s,3);r(parseInt(e.substr(s,i),10),3*i+1,t),s+=i}return new n(n.Mode.NUMERIC,e.length,t)}static makeAlphanumeric(e){let t;if(!n.isAlphanumeric(e))throw RangeError("String contains unencodable characters in alphanumeric mode");let s=[];for(t=0;t+2<=e.length;t+=2){let i=45*n.ALPHANUMERIC_CHARSET.indexOf(e.charAt(t));r(i+=n.ALPHANUMERIC_CHARSET.indexOf(e.charAt(t+1)),11,s)}return t<e.length&&r(n.ALPHANUMERIC_CHARSET.indexOf(e.charAt(t)),6,s),new n(n.Mode.ALPHANUMERIC,e.length,s)}static makeSegments(e){return""==e?[]:n.isNumeric(e)?[n.makeNumeric(e)]:n.isAlphanumeric(e)?[n.makeAlphanumeric(e)]:[n.makeBytes(n.toUtf8ByteArray(e))]}static makeEci(e){let t=[];if(e<0)throw RangeError("ECI assignment value out of range");if(e<128)r(e,8,t);else if(e<16384)r(2,2,t),r(e,14,t);else if(e<1e6)r(6,3,t),r(e,21,t);else throw RangeError("ECI assignment value out of range");return new n(n.Mode.ECI,0,t)}static isNumeric(e){return n.NUMERIC_REGEX.test(e)}static isAlphanumeric(e){return n.ALPHANUMERIC_REGEX.test(e)}getData(){return this.bitData.slice()}static getTotalBits(e,t){let r=0;for(let s of e){let e=s.mode.numCharCountBits(t);if(s.numChars>=1<<e)return 1/0;r+=4+e+s.bitData.length}return r}static toUtf8ByteArray(e){e=encodeURI(e);let t=[];for(let r=0;r<e.length;r++)"%"!=e.charAt(r)?t.push(e.charCodeAt(r)):(t.push(parseInt(e.substr(r+1,2),16)),r+=2);return t}},o=n;o.NUMERIC_REGEX=/^[0-9]*$/,o.ALPHANUMERIC_REGEX=/^[A-Z0-9 $%*+.\/:-]*$/,o.ALPHANUMERIC_CHARSET="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:",e.QrSegment=o})(s||(s={})),(e=>{var t=e.QrCode||(e.QrCode={});let r=class{constructor(e,t){this.ordinal=e,this.formatBits=t}};r.LOW=new r(0,1),r.MEDIUM=new r(1,0),r.QUARTILE=new r(2,3),r.HIGH=new r(3,2),t.Ecc=r})(s||(s={})),(e=>{var t=e.QrSegment||(e.QrSegment={});let r=class{constructor(e,t){this.modeBits=e,this.numBitsCharCount=t}numCharCountBits(e){return this.numBitsCharCount[Math.floor((e+7)/17)]}};r.NUMERIC=new r(1,[10,12,14]),r.ALPHANUMERIC=new r(2,[9,11,13]),r.BYTE=new r(4,[8,16,16]),r.KANJI=new r(8,[8,10,12]),r.ECI=new r(7,[0,0,0]),t.Mode=r})(s||(s={}));var m=s,g={L:m.QrCode.Ecc.LOW,M:m.QrCode.Ecc.MEDIUM,Q:m.QrCode.Ecc.QUARTILE,H:m.QrCode.Ecc.HIGH};function p(e){let{value:t,size:r=128,level:s="L",bgColor:i="#FFFFFF",fgColor:n="#000000",includeMargin:l=!1,imageSettings:a}=e,h=f(e,["value","size","level","bgColor","fgColor","includeMargin","imageSettings"]),u=m.QrCode.encodeText(t,g[s]).getModules(),d=4*!!l,p=u.length+2*d,w=function(e,t,r,s){if(null==s)return null;let i=e.length+4*!!r*2,n=Math.floor(.1*t),o=i/t,l=(s.width||n)*o,a=(s.height||n)*o,h=null==s.x?e.length/2-l/2:s.x*o,u=null==s.y?e.length/2-a/2:s.y*o,d=null;if(s.excavate){let e=Math.floor(h),t=Math.floor(u),r=Math.ceil(l+h-e),s=Math.ceil(a+u-t);d={x:e,y:t,w:r,h:s}}return{x:h,y:u,h:a,w:l,excavation:d}}(u,r,l,a),M=null;if(null!=a&&null!=w){var E,C;null!=w.excavation&&(E=u,C=w.excavation,u=E.slice().map((e,t)=>t<C.y||t>=C.y+C.h?e:e.map((e,t)=>(t<C.x||t>=C.x+C.w)&&e))),M=o.createElement("image",{xlinkHref:a.src,height:w.h,width:w.w,x:w.x+d,y:w.y+d,preserveAspectRatio:"none"})}let v=function(e,t=0){let r=[];return e.forEach(function(e,s){let i=null;e.forEach(function(n,o){if(!n&&null!==i){r.push(`M${i+t} ${s+t}h${o-i}v1H${i+t}z`),i=null;return}if(o===e.length-1){if(!n)return;null===i?r.push(`M${o+t},${s+t} h1v1H${o+t}z`):r.push(`M${i+t},${s+t} h${o+1-i}v1H${i+t}z`);return}n&&null===i&&(i=o)})}),r.join("")}(u,d);return o.createElement("svg",c({height:r,width:r,viewBox:`0 0 ${p} ${p}`},h),o.createElement("path",{fill:i,d:`M0,0 h${p}v${p}H0z`,shapeRendering:"crispEdges"}),o.createElement("path",{fill:n,d:v,shapeRendering:"crispEdges"}),M)}!function(){try{new Path2D().addPath(new Path2D)}catch(e){return!1}}();let w=e=>{let{color:t="currentColor",...r}=e;return(0,i.jsxs)("svg",{width:"1em",height:"1em",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",stroke:t,strokeWidth:"4",...r,children:[(0,i.jsx)("path",{d:"M12.9998 8L6 14L12.9998 21",stroke:"#333","stroke-width":"4","stroke-linecap":"round","stroke-linejoin":"round"}),(0,i.jsx)("path",{d:"M6 14H28.9938C35.8768 14 41.7221 19.6204 41.9904 26.5C42.2739 33.7696 36.2671 40 28.9938 40H11.9984",stroke:"#333","stroke-width":"4","stroke-linecap":"round","stroke-linejoin":"round"})]})},M=e=>{let{color:t="currentColor",...r}=e;return(0,i.jsxs)("svg",{width:"1em",height:"1em",viewBox:"0 0 48 48",fill:"none",stroke:t,strokeWidth:"4",xmlns:"http://www.w3.org/2000/svg",...r,children:[(0,i.jsx)("path",{d:"M41 25.9998V39.9998C41 40.552 40.5523 40.9998 40 40.9998H8C7.44772 40.9998 7 40.552 7 39.9998V7.99976C7 7.44747 7.44772 6.99976 8 6.99976H22"}),(0,i.jsx)("path",{d:"M19.822 28.1776L39.899 8.09961"}),(0,i.jsx)("path",{d:"M40.9998 20L41.0002 7H28.0008"})]})},E=e=>{let{color:t="currentColor",...r}=e;return(0,i.jsx)("svg",{width:"1em",height:"1em",viewBox:"0 0 48 48",fill:"none",stroke:t,strokeWidth:"4",xmlns:"http://www.w3.org/2000/svg",...r,children:(0,i.jsx)("path",{d:"M24 30V34M24 37V43M43 24H37M34 24H30M7 7H24V24H7V7ZM7 32H16V41H7V32ZM32 32H41V41H32V32ZM32 7H41V16H32V7ZM14 14H17V17H14V14Z",strokeLinecap:"butt"})})},C=e=>{let{color:t="currentColor",...r}=e;return(0,i.jsx)("svg",{width:"1em",height:"1em",viewBox:"0 0 48 48",fill:"none",stroke:t,strokeWidth:"4",xmlns:"http://www.w3.org/2000/svg",...r,children:(0,i.jsx)("path",{d:"M38.837 18C36.4634 12.1363 30.7148 8 24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C31.4554 40 37.7198 34.9009 39.4959 28M40 8V18H30",strokeLinecap:"butt"})})};r(4949);let v={zh:{refresh:"刷新页面",goBack:"返回",open:"在新页面打开"},en:{refresh:"Refresh",goBack:"Go back",open:"Open in new page"}},N=e=>{let{url:t,className:r="",refresh:s,goBack:l}=e,[a,h]=(0,o.useState)(!1),u=(0,n.Jr)(),d=(0,o.useRef)(null),c="zh"===u?v.zh:v.en,f=function(e,t){if(!e)return!1;if(e.contains)return e.contains(t);let r=t;for(;r;){if(r===e)return!0;r=r.parentNode}return!1},m=(0,o.useCallback)(e=>{f(d.current,e.target)||h(!1)},[d]);return(0,o.useEffect)(()=>{a?document.addEventListener("mousedown",m,!1):document.removeEventListener("mousedown",m,!1)},[a]),(0,i.jsxs)("div",{className:`rspress-preview-operations mobile ${r}`,children:[l&&(0,i.jsx)("button",{onClick:l,"aria-label":c.goBack,className:"rspress-preview-operations-back",children:(0,i.jsx)(w,{})}),s&&(0,i.jsx)("button",{onClick:s,"aria-label":c.refresh,className:"rspress-preview-operations-refresh",children:(0,i.jsx)(C,{})}),(0,i.jsxs)("div",{className:"relative",ref:d,children:[a&&(0,i.jsx)("div",{className:"rspress-preview-qrcode",children:(0,i.jsx)(p,{value:t,size:96})}),(0,i.jsx)("button",{onClick:e=>{a||e.currentTarget.blur(),h(!a)},className:"rspress-preview-operations-qrcode",children:(0,i.jsx)(E,{})})]}),(0,i.jsx)("button",{onClick:()=>{window.open(t)},"aria-label":c.open,className:"rspress-preview-operations-open",children:(0,i.jsx)(M,{})})]})},R=e=>{let{color:t="currentColor",...r}=e;return(0,i.jsx)("svg",{width:"1em",height:"1em",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",stroke:t,strokeWidth:"4",...r,children:(0,i.jsx)("path",{d:"M16.7336 12.6863L5.41992 24L16.7336 35.3137M31.2551 12.6863L42.5688 24L31.2551 35.3137M27.1999 6.28003L20.9486 41.7331",strokeLinecap:"butt"})})},x=e=>{let{children:t,isMobile:r,demoId:s}=e,{page:l}=(0,n.Vi)(),[a,h]=(0,o.useState)(!1),u=(0,n.Jr)(),d=`/~demo/${s}`,c=()=>(null==l?void 0:l.devPort)?`http://localhost:${l.devPort}/${s}`:"undefined"!=typeof window?`${window.location.origin}${(0,n.pJ)(d)}`:"",f=(0,o.useCallback)(e=>{a||e.currentTarget.blur(),h(!a)},[a]),[m,g]=(0,o.useState)(0),p=(0,o.useCallback)(()=>{g(Math.random())},[]);return(0,i.jsx)(n.ri,{children:(0,i.jsx)("div",{className:"rspress-preview rp-not-doc",children:"true"===r?(0,i.jsxs)("div",{className:"rspress-preview-wrapper",children:[(0,i.jsx)("div",{className:"rspress-preview-code",children:null==t?void 0:t[0]}),(0,i.jsxs)("div",{className:"rspress-preview-device",children:[(0,i.jsx)("iframe",{src:c()},m),(0,i.jsx)(N,{url:c(),refresh:p})]})]}):(0,i.jsxs)("div",{children:[(0,i.jsxs)("div",{className:"rspress-preview-card",children:[(0,i.jsx)("div",{style:{overflow:"auto",flex:"auto"},children:null==t?void 0:t[1]}),(0,i.jsx)("div",{className:"rspress-preview-operations web",children:(0,i.jsx)("button",{onClick:f,"aria-label":"zh"===u?"收起代码":"Collapse Code",className:a?"button-expanded":"",children:(0,i.jsx)(R,{})})})]}),(0,i.jsx)("div",{className:`${a?"rspress-preview-code-show":"rspress-preview-code-hide"}`,children:null==t?void 0:t[0]})]})})})}}}]);
@@ -0,0 +1,11 @@
1
+ /**
2
+ * @license QR Code generator library (TypeScript)
3
+ * Copyright (c) Project Nayuki.
4
+ * SPDX-License-Identifier: MIT
5
+ */
6
+
7
+ /**
8
+ * @license qrcode.react
9
+ * Copyright (c) Paul O'Shannessy
10
+ * SPDX-License-Identifier: ISC
11
+ */
@@ -0,0 +1 @@
1
+ "use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["637"],{7892:function(e,n,i){i.r(n),i.d(n,{default:()=>l});var r=i(503),h=i(6971);function d(e){let n=Object.assign({h1:"h1",a:"a",p:"p",h2:"h2",h3:"h3",ul:"ul",li:"li"},(0,h.ah)(),e.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.h1,{id:"介绍",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#介绍",children:"#"}),"介绍"]}),"\n",(0,r.jsx)(n.p,{children:"SevenDesign 是一个企业级的 React UI 组件库,采用 TypeScript 开发,提供现代化、可定制的组件集合。"}),"\n",(0,r.jsxs)(n.h2,{id:"特性",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#特性",children:"#"}),"特性"]}),"\n",(0,r.jsxs)(n.h3,{id:"-精美设计",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#-精美设计",children:"#"}),"\uD83C\uDFA8 精美设计"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"现代化的设计风格"}),"\n",(0,r.jsx)(n.li,{children:"参考 Element Plus 的设计理念"}),"\n",(0,r.jsx)(n.li,{children:"提供优雅的用户体验"}),"\n"]}),"\n",(0,r.jsxs)(n.h3,{id:"-丰富组件",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#-丰富组件",children:"#"}),"\uD83D\uDCE6 丰富组件"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"基础组件:Button、Icon、Typography 等"}),"\n",(0,r.jsx)(n.li,{children:"表单组件:Input、Switch、Select、Form 等"}),"\n",(0,r.jsx)(n.li,{children:"布局组件:Flex、Space、Divider 等"}),"\n",(0,r.jsx)(n.li,{children:"反馈组件:Message、Modal 等"}),"\n"]}),"\n",(0,r.jsxs)(n.h3,{id:"-typescript",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#-typescript",children:"#"}),"\uD83D\uDD27 TypeScript"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"完整的类型定义"}),"\n",(0,r.jsx)(n.li,{children:"更好的开发体验"}),"\n",(0,r.jsx)(n.li,{children:"智能代码提示"}),"\n"]}),"\n",(0,r.jsxs)(n.h3,{id:"-主题定制",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#-主题定制",children:"#"}),"\uD83C\uDFAD 主题定制"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"基于 CSS Variables"}),"\n",(0,r.jsx)(n.li,{children:"轻松定制主题"}),"\n",(0,r.jsx)(n.li,{children:"支持暗色模式"}),"\n"]}),"\n",(0,r.jsxs)(n.h3,{id:"-高性能",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#-高性能",children:"#"}),"⚡ 高性能"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"按需加载"}),"\n",(0,r.jsx)(n.li,{children:"Tree-shaking 支持"}),"\n",(0,r.jsx)(n.li,{children:"优化的打包体积"}),"\n"]}),"\n",(0,r.jsxs)(n.h2,{id:"兼容性",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#兼容性",children:"#"}),"兼容性"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"React >= 18.0.0"}),"\n",(0,r.jsx)(n.li,{children:"Modern Browsers (Chrome, Firefox, Safari, Edge)"}),"\n",(0,r.jsx)(n.li,{children:"支持服务端渲染 (SSR)"}),"\n"]}),"\n",(0,r.jsxs)(n.h2,{id:"版本",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#版本",children:"#"}),"版本"]}),"\n",(0,r.jsx)(n.p,{children:"当前版本:v0.1.0"}),"\n",(0,r.jsxs)(n.h2,{id:"开源协议",children:[(0,r.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#开源协议",children:"#"}),"开源协议"]}),"\n",(0,r.jsxs)(n.p,{children:["SevenDesign 使用 ",(0,r.jsx)(n.a,{href:"https://opensource.org/licenses/MIT",rel:"noopener noreferrer",target:"_blank",children:"MIT"})," 开源协议。"]})]})}function s(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,h.ah)(),e.components);return n?(0,r.jsx)(n,Object.assign({},e,{children:(0,r.jsx)(d,e)})):d(e)}let l=s;s.__RSPRESS_PAGE_META={},s.__RSPRESS_PAGE_META["guide%2Fintroduction.md"]={toc:[{id:"特性",text:"特性",depth:2},{id:"-精美设计",text:"\uD83C\uDFA8 精美设计",depth:3},{id:"-丰富组件",text:"\uD83D\uDCE6 丰富组件",depth:3},{id:"-typescript",text:"\uD83D\uDD27 TypeScript",depth:3},{id:"-主题定制",text:"\uD83C\uDFAD 主题定制",depth:3},{id:"-高性能",text:"⚡ 高性能",depth:3},{id:"兼容性",text:"兼容性",depth:2},{id:"版本",text:"版本",depth:2},{id:"开源协议",text:"开源协议",depth:2}],title:"介绍",headingTitle:"介绍",frontmatter:{}}}}]);
@@ -0,0 +1 @@
1
+ "use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["712"],{4979:function(e,n,r){r.r(n),r.d(n,{default:()=>a});var t=r(503),s=r(6971);function i(e){let n=Object.assign({h1:"h1",a:"a",p:"p",h2:"h2",h3:"h3",pre:"pre",code:"code"},(0,s.ah)(),e.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.h1,{id:"快速开始",children:[(0,t.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#快速开始",children:"#"}),"快速开始"]}),"\n",(0,t.jsx)(n.p,{children:"本节将介绍如何在项目中使用 SevenDesign。"}),"\n",(0,t.jsxs)(n.h2,{id:"安装",children:[(0,t.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#安装",children:"#"}),"安装"]}),"\n",(0,t.jsxs)(n.h3,{id:"使用包管理器",children:[(0,t.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#使用包管理器",children:"#"}),"使用包管理器"]}),"\n",(0,t.jsx)(n.p,{children:"::: code-group"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",meta:"[npm]",children:"npm install seven-design-ui\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",meta:"[pnpm]",children:"pnpm add seven-design-ui\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",meta:"[yarn]",children:"yarn add seven-design-ui\n"})}),"\n",(0,t.jsx)(n.p,{children:":::"}),"\n",(0,t.jsxs)(n.h2,{id:"完整引入",children:[(0,t.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#完整引入",children:"#"}),"完整引入"]}),"\n",(0,t.jsx)(n.p,{children:"在 main.ts 中写入以下内容:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { createRoot } from 'react-dom/client'\nimport App from './App'\n// 引入样式\nimport 'seven-design-ui/dist/style.css'\n\nconst root = document.getElementById('root')\nif (root) {\n createRoot(root).render(<App />)\n}\n"})}),"\n",(0,t.jsx)(n.p,{children:"然后就可以在组件中使用了:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { Button } from 'seven-design-ui'\n\nfunction App() {\n return <Button type=\"primary\">Hello SevenDesign</Button>\n}\n\nexport default App\n"})}),"\n",(0,t.jsxs)(n.h2,{id:"按需引入",children:[(0,t.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#按需引入",children:"#"}),"按需引入"]}),"\n",(0,t.jsx)(n.p,{children:"SevenDesign 支持基于 ES modules 的 tree shaking,直接引入即可按需加载:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { Button, Input, Switch } from 'seven-design-ui'\nimport 'seven-design-ui/dist/style.css'\n\nfunction App() {\n return (\n <>\n <Button type=\"primary\">按钮</Button>\n <Input placeholder=\"请输入\" />\n <Switch />\n </>\n )\n}\n"})}),"\n",(0,t.jsxs)(n.h2,{id:"全局配置",children:[(0,t.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#全局配置",children:"#"}),"全局配置"]}),"\n",(0,t.jsx)(n.p,{children:"某些组件如 Button 等,可以通过全局配置来设置默认属性。"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { ConfigProvider, Button } from 'seven-design-ui'\n\nfunction App() {\n return (\n <ConfigProvider size=\"large\">\n <Button>大尺寸按钮</Button>\n </ConfigProvider>\n )\n}\n"})}),"\n",(0,t.jsxs)(n.h2,{id:"vite-项目",children:[(0,t.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#vite-项目",children:"#"}),"Vite 项目"]}),"\n",(0,t.jsx)(n.p,{children:"如果你使用 Vite 创建项目,可以直接使用 SevenDesign:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\nexport default defineConfig({\n plugins: [react()],\n})\n"})}),"\n",(0,t.jsxs)(n.h2,{id:"nextjs-项目",children:[(0,t.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#nextjs-项目",children:"#"}),"Next.js 项目"]}),"\n",(0,t.jsx)(n.p,{children:"在 Next.js 项目中使用 SevenDesign:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"// app/layout.tsx\nimport 'seven-design-ui/dist/style.css'\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n return (\n <html lang=\"zh-CN\">\n <body>{children}</body>\n </html>\n )\n}\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"// app/page.tsx\n'use client'\n\nimport { Button } from 'seven-design-ui'\n\nexport default function Home() {\n return <Button type=\"primary\">Hello</Button>\n}\n"})}),"\n",(0,t.jsxs)(n.h2,{id:"开始使用",children:[(0,t.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#开始使用",children:"#"}),"开始使用"]}),"\n",(0,t.jsxs)(n.p,{children:["现在你可以开始使用 SevenDesign 了!访问 ",(0,t.jsx)(n.a,{href:"/components/button.html",children:"组件文档"})," 查看所有可用组件。"]})]})}function d(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,s.ah)(),e.components);return n?(0,t.jsx)(n,Object.assign({},e,{children:(0,t.jsx)(i,e)})):i(e)}let a=d;d.__RSPRESS_PAGE_META={},d.__RSPRESS_PAGE_META["guide%2Fquick-start.md"]={toc:[{id:"安装",text:"安装",depth:2},{id:"使用包管理器",text:"使用包管理器",depth:3},{id:"完整引入",text:"完整引入",depth:2},{id:"按需引入",text:"按需引入",depth:2},{id:"全局配置",text:"全局配置",depth:2},{id:"vite-项目",text:"Vite 项目",depth:2},{id:"nextjs-项目",text:"Next.js 项目",depth:2},{id:"开始使用",text:"开始使用",depth:2}],title:"快速开始",headingTitle:"快速开始",frontmatter:{}}}}]);
@@ -0,0 +1 @@
1
+ (()=>{"use strict";var e={1096:function(){}},r={};function t(o){var n=r[o];if(void 0!==n)return n.exports;var i=r[o]={exports:{}};return e[o].call(i.exports,i,i.exports,t),i.exports}t.m=e,t.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return t.d(r,{a:r}),r},(()=>{var e,r=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__;t.t=function(o,n){if(1&n&&(o=this(o)),8&n||"object"==typeof o&&o&&(4&n&&o.__esModule||16&n&&"function"==typeof o.then))return o;var i=Object.create(null);t.r(i);var a={};e=e||[null,r({}),r([]),r(r)];for(var u=2&n&&o;"object"==typeof u&&!~e.indexOf(u);u=r(u))Object.getOwnPropertyNames(u).forEach(e=>{a[e]=()=>o[e]});return a.default=()=>o,t.d(i,a),i}})(),t.d=(e,r)=>{for(var o in r)t.o(r,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},t.f={},t.e=e=>Promise.all(Object.keys(t.f).reduce((r,o)=>(t.f[o](e,r),r),[])),t.u=e=>"static/js/async/"+e+"."+({166:"f43be01a",218:"cd780e24",232:"11414fd7",416:"b217df75",509:"97958e51",512:"9047d21e",531:"131f5963",562:"b402b94f",637:"cb5d76c9",712:"558b85be"})[e]+".js",t.miniCssF=e=>""+e+".css",t.h=()=>"f79a59b5aedee887",t.g=(()=>{if("object"==typeof globalThis)return globalThis;try{return this||Function("return this")()}catch(e){if("object"==typeof window)return window}})(),t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),(()=>{var e={},r="docs:";t.l=function(o,n,i,a){if(e[o])return void e[o].push(n);if(void 0!==i)for(var u,c,f=document.getElementsByTagName("script"),d=0;d<f.length;d++){var l=f[d];if(l.getAttribute("src")==o||l.getAttribute("data-webpack")==r+i){u=l;break}}u||(c=!0,(u=document.createElement("script")).charset="utf-8",u.timeout=120,t.nc&&u.setAttribute("nonce",t.nc),u.setAttribute("data-webpack",r+i),u.src=o),e[o]=[n];var s=function(r,t){u.onerror=u.onload=null,clearTimeout(p);var n=e[o];if(delete e[o],u.parentNode&&u.parentNode.removeChild(u),n&&n.forEach(function(e){return e(t)}),r)return r(t)},p=setTimeout(s.bind(null,void 0,{type:"timeout",target:u}),12e4);u.onerror=s.bind(null,u.onerror),u.onload=s.bind(null,u.onload),c&&document.head.appendChild(u)}})(),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e=[];t.O=(r,o,n,i)=>{if(o){i=i||0;for(var a=e.length;a>0&&e[a-1][2]>i;a--)e[a]=e[a-1];e[a]=[o,n,i];return}for(var u=1/0,a=0;a<e.length;a++){for(var[o,n,i]=e[a],c=!0,f=0;f<o.length;f++)(!1&i||u>=i)&&Object.keys(t.O).every(e=>t.O[e](o[f]))?o.splice(f--,1):(c=!1,i<u&&(u=i));if(c){e.splice(a--,1);var d=n();void 0!==d&&(r=d)}}return r}})(),t.p="/sevenDesign/",t.rv=()=>"1.3.12",(()=>{var e={980:0};t.f.j=function(r,o){var n=t.o(e,r)?e[r]:void 0;if(0!==n)if(n)o.push(n[2]);else{var i=new Promise((t,o)=>n=e[r]=[t,o]);o.push(n[2]=i);var a=t.p+t.u(r),u=Error();t.l(a,function(o){if(t.o(e,r)&&(0!==(n=e[r])&&(e[r]=void 0),n)){var i=o&&("load"===o.type?"missing":o.type),a=o&&o.target&&o.target.src;u.message="Loading chunk "+r+" failed.\n("+i+": "+a+")",u.name="ChunkLoadError",u.type=i,u.request=a,n[1](u)}},"chunk-"+r,r)}},t.O.j=r=>0===e[r];var r=(r,o)=>{var n,i,[a,u,c]=o,f=0;if(a.some(r=>0!==e[r])){for(n in u)t.o(u,n)&&(t.m[n]=u[n]);if(c)var d=c(t)}for(r&&r(o);f<a.length;f++)i=a[f],t.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return t.O(d)},o=self.webpackChunkdocs=self.webpackChunkdocs||[];o.forEach(r.bind(null,0)),o.push=r.bind(null,o.push.bind(o))})(),t.ruid="bundler=rspack@1.3.12",t.O(void 0,["212","361","118","414"],function(){return t(7611)}),t.O(void 0,["212","361","118","414"],function(){return t(1661)}),t.O(void 0,["212","361","118","414"],function(){return t(3052)});var o=t.O(void 0,["212","361","118","414"],function(){return t(209)});o=t.O(o)})();