seven-design-ui 0.0.1 → 0.0.2

package/docs/doc_build/static/js/async/166.656253c5.js

@@ -0,0 +1,2 @@
+/*! For license information please see 166.656253c5.js.LICENSE.txt */
+"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["166"],{3321:function(e,a,s){s.d(a,{vT:()=>p,tl:()=>h,zx:()=>d,II:()=>o,rs:()=>u});var l,n=s(3732);function t(...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=t(...s);e&&a.push(e)}else if("object"==typeof s)for(let e in s)s[e]&&a.push(e)}return a.join(" ")}var r={exports:{}},i={};r.exports=function(){if(l)return i;l=1;var e=Symbol.for("react.transitional.element");function a(a,s,l){var n=null;if(void 0!==l&&(n=""+l),void 0!==s.key&&(n=""+s.key),"key"in s)for(var t in l={},s)"key"!==t&&(l[t]=s[t]);else l=s;return{$$typeof:e,type:a,key:n,ref:void 0!==(s=l.ref)?s:null,props:l}}return i.Fragment=Symbol.for("react.fragment"),i.jsx=a,i.jsxs=a,i}();var c=r.exports;let d=(0,n.forwardRef)((e,a)=>{let{type:s="default",size:l="default",plain:n=!1,round:r=!1,circle:i=!1,loading:d=!1,disabled:o=!1,nativeType:u="button",icon:h,className:p,children:m,...f}=e,v=t("sd-button",`sd-button--${s}`,`sd-button--${l}`,{"sd-button--plain":n,"sd-button--round":r,"sd-button--circle":i,"sd-button--loading":d,"is-disabled":o||d},p);return c.jsxs("button",{ref:a,type:u,className:v,disabled:o||d,...f,children:[d&&c.jsx("span",{className:"sd-button__loading-icon",children:c.jsx("svg",{viewBox:"0 0 1024 1024",className:"sd-button__spinner",children:c.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"})})}),h&&!d&&c.jsx("span",{className:"sd-button__icon",children:h}),m&&c.jsx("span",{className:"sd-button__text",children:m})]})});d.displayName="Button";let o=(0,n.forwardRef)((e,a)=>{let{type:s="text",size:l="default",disabled:r=!1,readOnly:i=!1,clearable:d=!1,showPassword:o=!1,prefixIcon:u,suffixIcon:h,className:p,value:m,defaultValue:f,onInput:v,onChange:_,onClear:x,onFocus:g,...b}=e,[j,N]=(0,n.useState)(!1),[k,C]=(0,n.useState)(f||""),y=(0,n.useRef)(null);(0,n.useImperativeHandle)(a,()=>y.current,[]);let w=o?j?"text":"password":s,z=void 0!==m?m:k,S=d&&z&&!r&&!i,M=t("sd-input",`sd-input--${l}`,{"is-disabled":r,"sd-input--prefix":!!u,"sd-input--suffix":!!(h||S||o)},p);return c.jsxs("div",{className:M,children:[u&&c.jsx("span",{className:"sd-input__prefix",children:u}),c.jsx("input",{ref:y,type:w,className:"sd-input__inner",disabled:r,readOnly:i,value:z,onChange:e=>{let a=e.target.value;void 0===m&&C(a),null==_||_(e),null==v||v(a)},onFocus:e=>{let a=e.target;void 0!==m?(null==v||v(""),_&&_({target:{...a,value:""},currentTarget:a})):(C(""),_&&_({target:{...a,value:""},currentTarget:a}),null==v||v("")),null==g||g(e)},...b}),c.jsxs("span",{className:"sd-input__suffix",children:[S&&c.jsx("span",{className:"sd-input__clear",onClick:e=>{e.preventDefault(),e.stopPropagation(),null==v||v(""),void 0===m&&C("");let a=y.current;a&&_&&_({target:{...a,value:""},currentTarget:a}),null==x||x()},onMouseDown:e=>{e.preventDefault()},children:c.jsx("svg",{viewBox:"0 0 1024 1024",width:"14",height:"14",style:{pointerEvents:"none"},children:c.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"})})}),o&&c.jsx("span",{className:"sd-input__password",onClick:()=>N(!j),children:j?c.jsx("svg",{viewBox:"0 0 1024 1024",width:"14",height:"14",children:c.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"})}):c.jsxs("svg",{viewBox:"0 0 1024 1024",width:"14",height:"14",children:[c.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"}),c.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"})]})}),h&&!S&&c.jsx("span",{className:"sd-input__suffix-icon",children:h})]})]})});o.displayName="Input";let u=(0,n.forwardRef)((e,a)=>{let{checked:s,defaultChecked:l=!1,disabled:r=!1,loading:i=!1,checkedNode:d,unCheckedNode:o,checkedColor:u,unCheckedColor:h,className:p,onChange:m,name:f,id:v}=e,[_,x]=n.useState(l),g=void 0!==s,b=g?s:_,j=()=>{if(r||i)return;let e=!b;g||x(e),m&&m(e)},N=t("sd-switch",{"is-checked":b,"is-disabled":r||i,"is-loading":i},p),k={};return b&&u?k.backgroundColor=u:!b&&h&&(k.backgroundColor=h),c.jsxs("div",{className:N,role:"switch","aria-checked":b,"aria-disabled":r||i,tabIndex:r||i?-1:0,onClick:j,onKeyDown:e=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),j())},children:[c.jsx("input",{ref:a,type:"checkbox",className:"sd-switch__input",checked:b,disabled:r||i,onChange:j,name:f,id:v,"aria-hidden":"true"}),c.jsxs("span",{className:"sd-switch__core",style:k,children:[i&&c.jsx("span",{className:"sd-switch__loading",children:c.jsx("svg",{viewBox:"0 0 1024 1024",className:"sd-switch__spinner",children:c.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"})})}),c.jsx("span",{className:"sd-switch__action"}),(b?d:o)&&c.jsx("span",{className:"sd-switch__content",children:b?d:o})]})]})});u.displayName="Switch";let h=(0,n.forwardRef)((e,a)=>{let{total:s,defaultCurrent:l=1,defaultPageSize:r=10,current:i,pageSize:d,onChange:o,onPageSizeChange:u,pagerCount:h=7,size:p="m",pageSizeOptions:m=[10,20,50,100],showSizeChanger:f=!0,showQuickJumper:v=!1,className:_,...x}=e,[g,b]=(0,n.useState)(l),j=i??g,[N,k]=(0,n.useState)(r),C=d??N,y=(0,n.useMemo)(()=>Math.ceil(s/C),[s,C]),w=(0,n.useCallback)(e=>{if(e<1||e>y||e===j)return;let a=Math.max(1,Math.min(e,y));void 0===i&&b(a),null==o||o(a,C)},[j,y,C,o,i]),z=(0,n.useCallback)(e=>{void 0===d&&k(e),null==u||u(e),void 0===i&&b(1),null==o||o(1,e)},[u,o,i,d]),S=(0,n.useMemo)(()=>{let e=[];if(y<=h)for(let a=1;a<=y;a++)e.push(a);else{let a=Math.floor((h-2)/2),s=h-2-a;if(e.push(1),j<=a+2){for(let a=2;a<=Math.min(h-2,y-1);a++)e.push(a);y>h-1&&e.push("next-more")}else if(j>=y-s-1){y>h-1&&e.push("prev-more");for(let a=Math.max(2,y-(h-3));a<=y-1;a++)e.push(a)}else{e.push("prev-more");for(let l=j-a;l<=j+s;l++)e.push(l);e.push("next-more")}y>1&&e.push(y)}return e},[y,h,j]),[M,L]=(0,n.useState)(""),D=(0,n.useCallback)(()=>{let e=parseInt(M,10);isNaN(e)||(w(e),L(""))},[M,w]);if(0===s)return null;let A=t("sd-pagination",`sd-pagination--${p}`,_);return c.jsxs("div",{ref:a,className:A,...x,children:[c.jsx("button",{type:"button",className:t("sd-pagination__item","sd-pagination__prev",{"is-disabled":1===j}),disabled:1===j,onClick:()=>w(j-1),"aria-label":"上一页",children:"‹"}),S.map((e,a)=>"prev-more"===e?c.jsx("span",{className:"sd-pagination__more sd-pagination__more--prev",children:"..."},`more-${a}`):"next-more"===e?c.jsx("span",{className:"sd-pagination__more sd-pagination__more--next",children:"..."},`more-${a}`):c.jsx("button",{type:"button",className:t("sd-pagination__item","sd-pagination__page",{"is-active":e===j}),onClick:()=>w(e),children:e},e)),c.jsx("button",{type:"button",className:t("sd-pagination__item","sd-pagination__next",{"is-disabled":j===y}),disabled:j===y,onClick:()=>w(j+1),"aria-label":"下一页",children:"›"}),f&&c.jsx("div",{className:"sd-pagination__size-changer",children:c.jsx("select",{value:C,onChange:e=>z(Number(e.target.value)),className:"sd-pagination__size-select",children:m.map(e=>c.jsxs("option",{value:e,children:[e," 条/页"]},e))})}),v&&c.jsxs("div",{className:"sd-pagination__jumper",children:[c.jsx("span",{className:"sd-pagination__jumper-text",children:"跳至"}),c.jsx("input",{type:"number",min:"1",max:y,value:M,onChange:e=>L(e.target.value),onKeyPress:e=>"Enter"===e.key&&D(),className:"sd-pagination__jumper-input",placeholder:j.toString()}),c.jsx("span",{className:"sd-pagination__jumper-text",children:"页"})]}),c.jsxs("div",{className:"sd-pagination__total",children:["共 ",s," 条"]})]})});h.displayName="Pagination";let p=(0,n.forwardRef)((e,a)=>{let{options:s,expandTrigger:l="click",clearable:r=!1,disabled:i=!1,defaultValue:d,value:o,onChange:u,showAllLevels:h=!0,multiple:p=!1,showSearch:m=!1,filterOption:f,placeholder:v="请选择",searchPlaceholder:_="搜索选项",className:x,style:g,...b}=e,[j,N]=(0,n.useState)(d),[k,C]=(0,n.useState)(!1),[y,w]=(0,n.useState)([]),[z,S]=(0,n.useState)([]),[M,L]=(0,n.useState)(-1),[D,A]=(0,n.useState)(0),[E,P]=(0,n.useState)(""),I=(0,n.useRef)(null),R=(0,n.useRef)(null),B=void 0!==o?o:j,$=(0,n.useMemo)(()=>p?Array.isArray(B)?B:B?[B]:[]:B?Array.isArray(B)?[B[0]]:[B]:[],[B,p]),T=(0,n.useMemo)(()=>(e=>{let a=[],l=(e,a,s=[])=>{for(let n of e){let e=[...s,n];if(n.value===a)return e;if(n.children){let s=l(n.children,a,e);if(s)return s}}return null};for(let n of e){let e=l(s,n);if(e){let s=e[e.length-1];a.push({value:n,label:s.label,path:e})}}return a})($),[$,s]),V=(0,n.useMemo)(()=>{if(0===T.length)return"";if(p)return T.map(e=>e.label).join(", ");{let e=T[0];return h?e.path.map(e=>e.label).join(" / "):e.label}},[T,p,h]),F=(0,n.useCallback)((e,a)=>{if(!e.disabled)if(p){let l,n=$.includes(e.value);l=n?$.filter(a=>a!==e.value):[...$,e.value];let t=p?l:l[0];void 0===o&&N(t);let r=l.map(e=>{let a=s=>{for(let l of s){if(l.value===e)return l;if(l.children){let e=a(l.children);if(e)return e}}return null};return a(s)}).filter(Boolean);null==u||u(t,r.length>0?r:p?[]:void 0),e.children&&!n&&w(a)}else if(e.children)w(a);else{let a=e.value;void 0===o&&N(a),null==u||u(a,e),C(!1),w([])}},[p,$,o,u,s]),H=(0,n.useCallback)((e,a)=>{"hover"===l&&e.children&&S(a)},[l]),Z=(0,n.useMemo)(()=>"hover"===l?z:y,[l,z,y]),O=(0,n.useCallback)(()=>{i||C(!k)},[i,k]),K=(0,n.useCallback)(e=>{e.stopPropagation();let a=p?[]:void 0;void 0===o&&N(a),null==u||u(a,p?[]:void 0),C(!1),w([])},[p,o,u]),J=(0,n.useCallback)((e,a)=>{a.stopPropagation();let s=$.filter(a=>a!==e),l=p?s:s[0]||void 0;void 0===o&&N(l);let n=T.filter(e=>s.includes(e.value)).map(e=>e.path[e.path.length-1]);null==u||u(l,n.length>0?n:p?[]:void 0)},[$,p,o,u,T]),Q=(0,n.useCallback)((e,a)=>a.label.toLowerCase().includes(e.toLowerCase()),[]),U=(0,n.useCallback)((e,a)=>{if(!a)return e;let s=f||Q,l=e=>e.map(e=>{let n=s(a,e),t=[];return e.children&&(t=l(e.children)),n||t.length>0?{...e,children:t.length>0?t:e.children}:null}).filter(Boolean);return l(e)},[f,Q]),q=(0,n.useCallback)(e=>{var a;let l=s;return E&&(l=U(s,E)),0===e?l:Z.length>=e&&(null==(a=Z[e-1])?void 0:a.children)||[]},[s,Z,E,U]),G=(0,n.useCallback)(e=>{var a;if(!k)return;let s=q(D);switch(e.key){case"Escape":C(!1),w([]),S([]),L(-1),A(0),P("");break;case"ArrowDown":if(e.preventDefault(),s.length>0){let e=M<s.length-1?M+1:0;L(e);let a=s[e];a&&"hover"===l&&S(0===D?[a]:[...Z.slice(0,D),a])}break;case"ArrowUp":if(e.preventDefault(),s.length>0){let e=M>0?M-1:s.length-1;L(e);let a=s[e];a&&"hover"===l&&S(0===D?[a]:[...Z.slice(0,D),a])}break;case"ArrowRight":if(e.preventDefault(),M>=0&&null!=(a=s[M])&&a.children){let e=s[M];w(0===D?[e]:[...Z.slice(0,D),e]),A(D+1),L(0)}break;case"ArrowLeft":e.preventDefault(),D>0&&(w(Z.slice(0,D-1)),A(D-1),L(-1));break;case"Enter":if(e.preventDefault(),M>=0&&s[M]){let e=s[M];F(e,[...0===D?[]:Z.slice(0,D),e])}}},[k,M,D,q,l,Z,F,L,A,w,C,S,P]);(0,n.useEffect)(()=>{let e=e=>{I.current&&!I.current.contains(e.target)&&(C(!1),w([]),S([]),L(-1),A(0),P(""))};if(k)return document.addEventListener("mousedown",e),document.addEventListener("keydown",G),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",G)}},[k,G]);let W=(0,n.useCallback)((e,a,s,l)=>{let n=$.includes(e.value),r=e.children&&e.children.length>0,i=y.some(a=>a.value===e.value),d=D===s&&M===l,o=t("sd-cascader__menu-item",{"is-active":n,"is-disabled":e.disabled,"in-active-path":i,"is-focused":d});return c.jsxs("li",{className:o,onClick:s=>{s.stopPropagation(),F(e,[...a,e])},onMouseEnter:()=>{H(e,[...a,e]),L(-1)},children:[p&&c.jsx("div",{className:"sd-cascader__menu-item-prefix",children:c.jsx("div",{className:t("sd-cascader__menu-item-checkbox",{"is-checked":n,"is-disabled":e.disableCheckbox||e.disabled}),children:n&&c.jsx("span",{})})}),c.jsx("span",{className:"sd-cascader__menu-item-label",children:e.label}),r&&c.jsx("div",{className:"sd-cascader__menu-item-postfix",children:c.jsx("span",{className:"sd-cascader__menu-item-arrow",children:"›"})})]},e.value)},[$,y,p,D,M,F,H]),X=(0,n.useCallback)((e,a=[],s=0)=>e&&0!==e.length?c.jsx("div",{className:"sd-cascader__menu",children:c.jsx("ul",{className:"sd-cascader__menu-list",children:e.map((e,l)=>W(e,a,s,l))})}):c.jsx("div",{className:"sd-cascader__empty",children:"无数据"}),[W]),Y=t("sd-cascader",x),ee=t("sd-cascader__input",{"is-disabled":i,"is-expanded":k}),ea=(0,n.useCallback)(e=>{I.current=e,"function"==typeof a?a(e):a&&(a.current=e)},[a]);return c.jsxs("div",{ref:ea,className:Y,style:g,...b,children:[c.jsxs("div",{ref:R,className:ee,onClick:O,children:[p?c.jsxs(c.Fragment,{children:[T.map(e=>c.jsxs("span",{className:"sd-cascader__tag",children:[c.jsx("span",{className:"sd-cascader__tag-content",children:e.label}),c.jsx("span",{className:"sd-cascader__tag-close",onClick:a=>J(e.value,a),children:"\xd7"})]},e.value)),0===T.length&&c.jsx("span",{className:"sd-cascader__placeholder",children:v})]}):V?c.jsx("span",{className:"sd-cascader__selected-text",children:V}):c.jsx("span",{className:"sd-cascader__placeholder",children:v}),c.jsxs("div",{className:"sd-cascader__suffix",children:[r&&$.length>0&&!i&&c.jsx("span",{className:"sd-cascader__clear",onClick:K,children:"\xd7"}),c.jsx("span",{className:t("sd-cascader__arrow",{"is-expanded":k}),children:"⌄"})]})]}),k&&c.jsxs("div",{className:t("sd-cascader__panel","is-visible"),style:{position:"absolute",top:"100%",left:0,right:0,zIndex:9999},children:[m&&c.jsx("div",{className:"sd-cascader__search",children:c.jsx("input",{type:"text",className:"sd-cascader__search-input",placeholder:_,value:E,onChange:e=>{P(e.target.value),w([]),L(-1),A(0)},onKeyDown:e=>{e.stopPropagation()}})}),E?c.jsx("div",{className:"sd-cascader__menu",children:X(q(0),[],0)}):c.jsxs(c.Fragment,{children:[c.jsx("div",{className:"sd-cascader__menu",children:X(s,[],0)}),Z.map((e,a)=>{let s=e.children||[],l=Z.slice(0,a+1);return 0===s.length?null:c.jsx("div",{className:"sd-cascader__menu",children:X(s,l,a+1)},a+1)})]})]})]})});p.displayName="Cascader"}}]);

package/docs/doc_build/static/js/async/252.c7b023ea.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["252"],{4895:function(e,n,l){l.r(n),l.d(n,{default:()=>g});var a=l(503),d=l(6971),s=l(3732),i=l(3321);function r(){let[e,n]=s.useState(),l=[{value:"zhejiang",label:"浙江",children:[{value:"hangzhou",label:"杭州",children:[{value:"xihu",label:"西湖"},{value:"xiasha",label:"萧山"}]}]},{value:"jiangsu",label:"江苏",children:[{value:"nanjing",label:"南京",children:[{value:"zhonghuamen",label:"中华门"},{value:"meiyuanxincun",label:"梅园新村"}]}]}];return(0,a.jsxs)("div",{children:[(0,a.jsx)(i.vT,{options:l,value:e,onChange:n,placeholder:"请选择城市"}),(0,a.jsxs)("p",{style:{marginTop:"12px",color:"#606266"},children:["选中值：",e||"无"]})]})}function c(){let[e,n]=s.useState(),l=[{value:"zhejiang",label:"浙江",children:[{value:"hangzhou",label:"杭州",disabled:!0,children:[{value:"xihu",label:"西湖"}]},{value:"ningbo",label:"宁波",children:[{value:"jiangbei",label:"江北"}]}]}];return(0,a.jsx)(i.vT,{options:l,value:e,onChange:n,placeholder:"请选择城市"})}function h(){let[e,n]=s.useState("zhejiang/hangzhou/xihu"),l=[{value:"zhejiang",label:"浙江",children:[{value:"hangzhou",label:"杭州",children:[{value:"xihu",label:"西湖"},{value:"xiasha",label:"萧山"}]}]}];return(0,a.jsx)(i.vT,{options:l,value:e,onChange:n,clearable:!0,placeholder:"请选择城市"})}function t(){let e=[{value:"zhejiang",label:"浙江",children:[{value:"hangzhou",label:"杭州",children:[{value:"xihu",label:"西湖"},{value:"xiasha",label:"萧山"}]}]}];return(0,a.jsx)(i.vT,{options:e,defaultValue:["zhejiang","hangzhou","xihu"],placeholder:"请选择城市"})}function o(){let[e,n]=s.useState(),l=[{value:"zhejiang",label:"浙江",children:[{value:"hangzhou",label:"杭州",children:[{value:"xihu",label:"西湖"},{value:"xiasha",label:"萧山"}]}]}];return(0,a.jsxs)("div",{children:[(0,a.jsx)(i.vT,{options:l,value:e,onChange:n,showAllLevels:!1,placeholder:"请选择城市"}),(0,a.jsxs)("p",{style:{marginTop:"12px",color:"#606266"},children:["选中值：",e||"无"]})]})}function x(){let[e,n]=s.useState([]),l=[{value:"zhejiang",label:"浙江",children:[{value:"hangzhou",label:"杭州",children:[{value:"xihu",label:"西湖"},{value:"xiasha",label:"萧山"}]},{value:"ningbo",label:"宁波",disableCheckbox:!0,children:[{value:"jiangbei",label:"江北"}]}]},{value:"jiangsu",label:"江苏",children:[{value:"nanjing",label:"南京",children:[{value:"zhonghuamen",label:"中华门"}]}]}];return(0,a.jsxs)("div",{children:[(0,a.jsx)(i.vT,{options:l,value:e,onChange:n,multiple:!0,placeholder:"请选择城市"}),(0,a.jsxs)("p",{style:{marginTop:"12px",color:"#606266"},children:["选中值：",e.join(", ")||"无"]})]})}function u(){let[e,n]=s.useState(),l=[{value:"zhejiang",label:"浙江",children:[{value:"hangzhou",label:"杭州",children:[{value:"xihu",label:"西湖"},{value:"xiasha",label:"萧山"}]},{value:"ningbo",label:"宁波",children:[{value:"jiangbei",label:"江北"},{value:"yinzhou",label:"鄞州"}]}]},{value:"jiangsu",label:"江苏",children:[{value:"nanjing",label:"南京",children:[{value:"zhonghuamen",label:"中华门"},{value:"meiyuanxincun",label:"梅园新村"}]}]}];return(0,a.jsxs)("div",{children:[(0,a.jsx)(i.vT,{options:l,value:e,onChange:n,showSearch:!0,searchPlaceholder:"搜索城市",placeholder:"请选择城市"}),(0,a.jsxs)("p",{style:{marginTop:"12px",color:"#606266"},children:["选中值：",e||"无"]})]})}function j(){let[e,n]=s.useState(),l=[{value:"zhejiang",label:"浙江",children:[{value:"hangzhou",label:"杭州",children:[{value:"xihu",label:"西湖"},{value:"xiasha",label:"萧山"}]}]}];return(0,a.jsx)(i.vT,{options:l,value:e,onChange:n,expandTrigger:"hover",placeholder:"请选择城市"})}l(9916);var p=l(8169);function v(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,d.ah)(),e.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(n.h1,{id:"cascader-级联选择器",children:[(0,a.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#cascader-级联选择器",children:"#"}),"Cascader 级联选择器"]}),"\n",(0,a.jsx)(n.p,{children:"级联选择器适用于有清晰层级结构的数据选择，比如省市区、行业分类等。"}),"\n",(0,a.jsxs)(n.h2,{id:"基础用法",children:[(0,a.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#基础用法",children:"#"}),"基础用法"]}),"\n",(0,a.jsxs)(n.p,{children:["只需为 Cascader 的 ",(0,a.jsx)(n.code,{children:"options"})," 属性指定选项数组即可渲染出一个级联选择器。通过 ",(0,a.jsx)(n.code,{children:"expandTrigger"})," 属性控制子节点的展开方式，默认 ",(0,a.jsx)(n.code,{children:"clicked"})," 可选 ",(0,a.jsx)(n.code,{children:"hover"}),"。"]}),"\n",(0,a.jsxs)(p.Z,{isMobile:"false",demoId:"_components_cascader_1",children:[(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",meta:"preview",children:"export default function BasicCascader() {\n  const [value, setValue] = React.useState()\n\n  const options = [\n    {\n      value: 'zhejiang',\n      label: '浙江',\n      children: [\n        {\n          value: 'hangzhou',\n          label: '杭州',\n          children: [\n            { value: 'xihu', label: '西湖' },\n            { value: 'xiasha', label: '萧山' },\n          ],\n        },\n      ],\n    },\n    {\n      value: 'jiangsu',\n      label: '江苏',\n      children: [\n        {\n          value: 'nanjing',\n          label: '南京',\n          children: [\n            { value: 'zhonghuamen', label: '中华门' },\n            { value: 'meiyuanxincun', label: '梅园新村' },\n          ],\n        },\n      ],\n    },\n  ]\n\n  return (\n    <div>\n      <Cascader\n        options={options}\n        value={value}\n        onChange={setValue}\n        placeholder=\"请选择城市\"\n      />\n      <p style={{ marginTop: '12px', color: '#606266' }}>\n        选中值：{value || '无'}\n      </p>\n    </div>\n  )\n}\n"})}),(0,a.jsx)(r,{})]}),"\n",(0,a.jsxs)(n.h2,{id:"禁用选项",children:[(0,a.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#禁用选项",children:"#"}),"禁用选项"]}),"\n",(0,a.jsxs)(n.p,{children:["通过在数据源中设置 ",(0,a.jsx)(n.code,{children:"disabled"})," 字段来声明该选项是禁用的。默认情况下，Cascader 会检查数据中每一项的 ",(0,a.jsx)(n.code,{children:"disabled"})," 字段是否为 ",(0,a.jsx)(n.code,{children:"true"}),"。"]}),"\n",(0,a.jsxs)(p.Z,{isMobile:"false",demoId:"_components_cascader_2",children:[(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",meta:"preview",children:"export default function DisabledCascader() {\n  const [value, setValue] = React.useState()\n\n  const options = [\n    {\n      value: 'zhejiang',\n      label: '浙江',\n      children: [\n        {\n          value: 'hangzhou',\n          label: '杭州',\n          disabled: true,\n          children: [\n            { value: 'xihu', label: '西湖' },\n          ],\n        },\n        {\n          value: 'ningbo',\n          label: '宁波',\n          children: [\n            { value: 'jiangbei', label: '江北' },\n          ],\n        },\n      ],\n    },\n  ]\n\n  return (\n    <Cascader\n      options={options}\n      value={value}\n      onChange={setValue}\n      placeholder=\"请选择城市\"\n    />\n  )\n}\n"})}),(0,a.jsx)(c,{})]}),"\n",(0,a.jsxs)(n.h2,{id:"清空",children:[(0,a.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#清空",children:"#"}),"清空"]}),"\n",(0,a.jsxs)(n.p,{children:["通过 ",(0,a.jsx)(n.code,{children:"clearable"})," 设置输入框可清空。"]}),"\n",(0,a.jsxs)(p.Z,{isMobile:"false",demoId:"_components_cascader_3",children:[(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",meta:"preview",children:"export default function ClearableCascader() {\n  const [value, setValue] = React.useState('zhejiang/hangzhou/xihu')\n\n  const options = [\n    {\n      value: 'zhejiang',\n      label: '浙江',\n      children: [\n        {\n          value: 'hangzhou',\n          label: '杭州',\n          children: [\n            { value: 'xihu', label: '西湖' },\n            { value: 'xiasha', label: '萧山' },\n          ],\n        },\n      ],\n    },\n  ]\n\n  return (\n    <Cascader\n      options={options}\n      value={value}\n      onChange={setValue}\n      clearable\n      placeholder=\"请选择城市\"\n    />\n  )\n}\n"})}),(0,a.jsx)(h,{})]}),"\n",(0,a.jsxs)(n.h2,{id:"默认值",children:[(0,a.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#默认值",children:"#"}),"默认值"]}),"\n",(0,a.jsxs)(n.p,{children:["通过 ",(0,a.jsx)(n.code,{children:"defaultValue"})," 设置默认值。"]}),"\n",(0,a.jsxs)(p.Z,{isMobile:"false",demoId:"_components_cascader_4",children:[(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",meta:"preview",children:"export default function DefaultValueCascader() {\n  const options = [\n    {\n      value: 'zhejiang',\n      label: '浙江',\n      children: [\n        {\n          value: 'hangzhou',\n          label: '杭州',\n          children: [\n            { value: 'xihu', label: '西湖' },\n            { value: 'xiasha', label: '萧山' },\n          ],\n        },\n      ],\n    },\n  ]\n\n  return (\n    <Cascader\n      options={options}\n      defaultValue={['zhejiang', 'hangzhou', 'xihu']}\n      placeholder=\"请选择城市\"\n    />\n  )\n}\n"})}),(0,a.jsx)(t,{})]}),"\n",(0,a.jsxs)(n.h2,{id:"仅显示最后一级",children:[(0,a.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#仅显示最后一级",children:"#"}),"仅显示最后一级"]}),"\n",(0,a.jsxs)(n.p,{children:["可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。",(0,a.jsx)(n.code,{children:"showAllLevels"})," 定义了是否显示完整的路径，将其赋值为 ",(0,a.jsx)(n.code,{children:"false"})," 则仅显示最后一级。"]}),"\n",(0,a.jsxs)(p.Z,{isMobile:"false",demoId:"_components_cascader_5",children:[(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",meta:"preview",children:"export default function ShowLastLevelCascader() {\n  const [value, setValue] = React.useState()\n\n  const options = [\n    {\n      value: 'zhejiang',\n      label: '浙江',\n      children: [\n        {\n          value: 'hangzhou',\n          label: '杭州',\n          children: [\n            { value: 'xihu', label: '西湖' },\n            { value: 'xiasha', label: '萧山' },\n          ],\n        },\n      ],\n    },\n  ]\n\n  return (\n    <div>\n      <Cascader\n        options={options}\n        value={value}\n        onChange={setValue}\n        showAllLevels={false}\n        placeholder=\"请选择城市\"\n      />\n      <p style={{ marginTop: '12px', color: '#606266' }}>\n        选中值：{value || '无'}\n      </p>\n    </div>\n  )\n}\n"})}),(0,a.jsx)(o,{})]}),"\n",(0,a.jsxs)(n.h2,{id:"多选",children:[(0,a.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#多选",children:"#"}),"多选"]}),"\n",(0,a.jsxs)(n.p,{children:["一次性选择多个选项。通过设置 ",(0,a.jsx)(n.code,{children:"multiple"})," 开启。通过添加 ",(0,a.jsx)(n.code,{children:"disableCheckbox"})," 属性，可选择具体某一个 checkbox 禁用。"]}),"\n",(0,a.jsxs)(p.Z,{isMobile:"false",demoId:"_components_cascader_6",children:[(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",meta:"preview",children:"export default function MultipleCascader() {\n  const [value, setValue] = React.useState([])\n\n  const options = [\n    {\n      value: 'zhejiang',\n      label: '浙江',\n      children: [\n        {\n          value: 'hangzhou',\n          label: '杭州',\n          children: [\n            { value: 'xihu', label: '西湖' },\n            { value: 'xiasha', label: '萧山' },\n          ],\n        },\n        {\n          value: 'ningbo',\n          label: '宁波',\n          disableCheckbox: true,\n          children: [\n            { value: 'jiangbei', label: '江北' },\n          ],\n        },\n      ],\n    },\n    {\n      value: 'jiangsu',\n      label: '江苏',\n      children: [\n        {\n          value: 'nanjing',\n          label: '南京',\n          children: [\n            { value: 'zhonghuamen', label: '中华门' },\n          ],\n        },\n      ],\n    },\n  ]\n\n  return (\n    <div>\n      <Cascader\n        options={options}\n        value={value}\n        onChange={setValue}\n        multiple\n        placeholder=\"请选择城市\"\n      />\n      <p style={{ marginTop: '12px', color: '#606266' }}>\n        选中值：{value.join(', ') || '无'}\n      </p>\n    </div>\n  )\n}\n"})}),(0,a.jsx)(x,{})]}),"\n",(0,a.jsxs)(n.h2,{id:"搜索",children:[(0,a.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#搜索",children:"#"}),"搜索"]}),"\n",(0,a.jsxs)(n.p,{children:["通过 ",(0,a.jsx)(n.code,{children:"showSearch"})," 开启搜索功能，支持在所有层级中搜索选项。"]}),"\n",(0,a.jsxs)(p.Z,{isMobile:"false",demoId:"_components_cascader_7",children:[(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",meta:"preview",children:"export default function SearchCascader() {\n  const [value, setValue] = React.useState()\n\n  const options = [\n    {\n      value: 'zhejiang',\n      label: '浙江',\n      children: [\n        {\n          value: 'hangzhou',\n          label: '杭州',\n          children: [\n            { value: 'xihu', label: '西湖' },\n            { value: 'xiasha', label: '萧山' },\n          ],\n        },\n        {\n          value: 'ningbo',\n          label: '宁波',\n          children: [\n            { value: 'jiangbei', label: '江北' },\n            { value: 'yinzhou', label: '鄞州' },\n          ],\n        },\n      ],\n    },\n    {\n      value: 'jiangsu',\n      label: '江苏',\n      children: [\n        {\n          value: 'nanjing',\n          label: '南京',\n          children: [\n            { value: 'zhonghuamen', label: '中华门' },\n            { value: 'meiyuanxincun', label: '梅园新村' },\n          ],\n        },\n      ],\n    },\n  ]\n\n  return (\n    <div>\n      <Cascader\n        options={options}\n        value={value}\n        onChange={setValue}\n        showSearch\n        searchPlaceholder=\"搜索城市\"\n        placeholder=\"请选择城市\"\n      />\n      <p style={{ marginTop: '12px', color: '#606266' }}>\n        选中值：{value || '无'}\n      </p>\n    </div>\n  )\n}\n"})}),(0,a.jsx)(u,{})]}),"\n",(0,a.jsxs)(n.h2,{id:"悬停展开",children:[(0,a.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#悬停展开",children:"#"}),"悬停展开"]}),"\n",(0,a.jsxs)(n.p,{children:["通过 ",(0,a.jsx)(n.code,{children:"expandTrigger"})," 设置为 ",(0,a.jsx)(n.code,{children:"hover"})," 来让选项在鼠标悬停时展开子菜单。"]}),"\n",(0,a.jsxs)(p.Z,{isMobile:"false",demoId:"_components_cascader_8",children:[(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",meta:"preview",children:"export default function HoverTriggerCascader() {\n  const [value, setValue] = React.useState()\n\n  const options = [\n    {\n      value: 'zhejiang',\n      label: '浙江',\n      children: [\n        {\n          value: 'hangzhou',\n          label: '杭州',\n          children: [\n            { value: 'xihu', label: '西湖' },\n            { value: 'xiasha', label: '萧山' },\n          ],\n        },\n      ],\n    },\n  ]\n\n  return (\n    <Cascader\n      options={options}\n      value={value}\n      onChange={setValue}\n      expandTrigger=\"hover\"\n      placeholder=\"请选择城市\"\n    />\n  )\n}\n"})}),(0,a.jsx)(j,{})]}),"\n",(0,a.jsxs)(n.h2,{id:"api",children:[(0,a.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#api",children:"#"}),"API"]}),"\n",(0,a.jsxs)(n.h3,{id:"cascader-props",children:[(0,a.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#cascader-props",children:"#"}),"Cascader Props"]}),"\n",(0,a.jsxs)(n.table,{children:[(0,a.jsx)(n.thead,{children:(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.th,{children:"参数"}),(0,a.jsx)(n.th,{children:"说明"}),(0,a.jsx)(n.th,{children:"类型"}),(0,a.jsx)(n.th,{children:"默认值"})]})}),(0,a.jsxs)(n.tbody,{children:[(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"options"}),(0,a.jsx)(n.td,{children:"可选项数据源"}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"CascaderOption[]"})}),(0,a.jsx)(n.td,{children:"-"})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"value"}),(0,a.jsx)(n.td,{children:"当前选中值（受控）"}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"string | number | Array<string | number>"})}),(0,a.jsx)(n.td,{children:"-"})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"defaultValue"}),(0,a.jsx)(n.td,{children:"默认选中值"}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"string | number | Array<string | number>"})}),(0,a.jsx)(n.td,{children:"-"})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"onChange"}),(0,a.jsx)(n.td,{children:"选中值改变时的回调"}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"(value, selectedOptions) => void"})}),(0,a.jsx)(n.td,{children:"-"})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"expandTrigger"}),(0,a.jsx)(n.td,{children:"次级菜单的展开方式"}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"'click' | 'hover'"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"'click'"})})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"clearable"}),(0,a.jsx)(n.td,{children:"是否可清空"}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"boolean"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"false"})})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"disabled"}),(0,a.jsx)(n.td,{children:"是否禁用"}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"boolean"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"false"})})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"showAllLevels"}),(0,a.jsx)(n.td,{children:"是否显示完整路径"}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"boolean"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"true"})})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"multiple"}),(0,a.jsx)(n.td,{children:"是否支持多选"}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"boolean"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"false"})})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"showSearch"}),(0,a.jsx)(n.td,{children:"是否支持搜索"}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"boolean"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"false"})})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"filterOption"}),(0,a.jsx)(n.td,{children:"自定义搜索函数"}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"(inputValue: string, option: CascaderOption) => boolean"})}),(0,a.jsx)(n.td,{children:"-"})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"searchPlaceholder"}),(0,a.jsx)(n.td,{children:"搜索占位符"}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"string"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"'搜索选项'"})})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"placeholder"}),(0,a.jsx)(n.td,{children:"占位符"}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"string"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"'请选择'"})})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"className"}),(0,a.jsx)(n.td,{children:"自定义类名"}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"string"})}),(0,a.jsx)(n.td,{children:"-"})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"style"}),(0,a.jsx)(n.td,{children:"自定义样式"}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"React.CSSProperties"})}),(0,a.jsx)(n.td,{children:"-"})]})]})]}),"\n",(0,a.jsxs)(n.h3,{id:"cascaderoption",children:[(0,a.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#cascaderoption",children:"#"}),"CascaderOption"]}),"\n",(0,a.jsxs)(n.table,{children:[(0,a.jsx)(n.thead,{children:(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.th,{children:"参数"}),(0,a.jsx)(n.th,{children:"说明"}),(0,a.jsx)(n.th,{children:"类型"}),(0,a.jsx)(n.th,{children:"默认值"})]})}),(0,a.jsxs)(n.tbody,{children:[(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"value"}),(0,a.jsx)(n.td,{children:"选项的值"}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"string | number"})}),(0,a.jsx)(n.td,{children:"-"})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"label"}),(0,a.jsx)(n.td,{children:"选项的显示文本"}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"string"})}),(0,a.jsx)(n.td,{children:"-"})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"children"}),(0,a.jsx)(n.td,{children:"子选项"}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"CascaderOption[]"})}),(0,a.jsx)(n.td,{children:"-"})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"disabled"}),(0,a.jsx)(n.td,{children:"是否禁用"}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"boolean"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"false"})})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"disableCheckbox"}),(0,a.jsx)(n.td,{children:"是否禁用复选框（多选模式下）"}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"boolean"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"false"})})]})]})]})]})}function b(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,d.ah)(),e.components);return n?(0,a.jsx)(n,Object.assign({},e,{children:(0,a.jsx)(v,e)})):v(e)}let g=b;b.__RSPRESS_PAGE_META={},b.__RSPRESS_PAGE_META["components%2Fcascader.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:"搜索",text:"搜索",depth:2},{id:"悬停展开",text:"悬停展开",depth:2},{id:"api",text:"API",depth:2},{id:"cascader-props",text:"Cascader Props",depth:3},{id:"cascaderoption",text:"CascaderOption",depth:3}],title:"Cascader 级联选择器",headingTitle:"Cascader 级联选择器",frontmatter:{}}}}]);

package/docs/doc_build/static/js/async/{637.cb5d76c9.js → 637.9d5c88dd.js}

@@ -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:{}}}}]);
+"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.0.1"}),"\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:{}}}}]);

package/docs/doc_build/static/js/index.366ff9c0.js

@@ -0,0 +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:"656253c5",218:"cd780e24",232:"11414fd7",252:"c7b023ea",416:"b217df75",509:"97958e51",512:"9047d21e",531:"131f5963",562:"b402b94f",637:"9d5c88dd",712:"558b85be"})[e]+".js",t.miniCssF=e=>""+e+".css",t.h=()=>"6db41f1cd7e106f4",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)})();

package/docs/doc_build/static/search_index.69d54449.json

@@ -0,0 +1 @@
+[{"id":0,"title":"Button 按钮","content":"#\n\n常用的操作按钮。\n\n\n基础用法#\n\n使用 type、plain、round 和 circle 来定义按钮的样式。\n\n\n\n\n朴素按钮#\n\n使用 plain 属性来创建朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。\n\n\n\n\n圆角按钮#\n\n使用 round 属性来创建圆角按钮。\n\n\n\n\n不同尺寸#\n\nButton 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。\n\n\n\n\n禁用状态#\n\n你可以使用 disabled 属性来定义按钮是否被禁用。\n\n\n\n\n加载状态#\n\n通过设置 loading 属性为 true 来显示加载中状态。\n\n\n\n\nAPI#\n\n\nProps#\n\n属性           说明           类型                                                           默认值\ntype         按钮类型         'default' | 'primary' | 'success' | 'warning' | 'danger' |   default\n                          'info'\nsize         按钮尺寸         'large' | 'default' | 'small'                                default\nplain        是否为朴素按钮      boolean                                                      false\nround        是否为圆角按钮      boolean                                                      false\ncircle       是否为圆形按钮      boolean                                                      false\nloading      是否为加载中状态     boolean                                                      false\ndisabled     是否禁用         boolean                                                      false\nnativeType   原生 type 属性   'button' | 'submit' | 'reset'                                button\nicon         图标组件         React.ReactNode                                              -\nclassName    自定义类名        string                                                       -\nonClick      点击事件回调       (e: React.MouseEvent) => void                                -\n\n\nEvents#\n\n事件名       说明        类型\nonClick   点击按钮时触发   (e: React.MouseEvent) => void","routePath":"/sevenDesign/components/button","lang":"","toc":[{"text":"基础用法","id":"基础用法","depth":2,"charIndex":13},{"text":"朴素按钮","id":"朴素按钮","depth":2,"charIndex":63},{"text":"圆角按钮","id":"圆角按钮","depth":2,"charIndex":113},{"text":"不同尺寸","id":"不同尺寸","depth":2,"charIndex":144},{"text":"禁用状态","id":"禁用状态","depth":2,"charIndex":198},{"text":"加载状态","id":"加载状态","depth":2,"charIndex":238},{"text":"API","id":"api","depth":2,"charIndex":281},{"text":"Props","id":"props","depth":3,"charIndex":288},{"text":"Events","id":"events","depth":3,"charIndex":1438}],"domain":"","frontmatter":{},"version":""},{"id":1,"title":"Cascader 级联选择器","content":"#\n\n级联选择器适用于有清晰层级结构的数据选择，比如省市区、行业分类等。\n\n\n基础用法#\n\n只需为 Cascader 的 options 属性指定选项数组即可渲染出一个级联选择器。通过 expandTrigger 属性控制子节点的展开方式，默认\nclicked 可选 hover。\n\n\n\n\n禁用选项#\n\n通过在数据源中设置 disabled 字段来声明该选项是禁用的。默认情况下，Cascader 会检查数据中每一项的 disabled 字段是否为 true。\n\n\n\n\n清空#\n\n通过 clearable 设置输入框可清空。\n\n\n\n\n默认值#\n\n通过 defaultValue 设置默认值。\n\n\n\n\n仅显示最后一级#\n\n可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。showAllLevels 定义了是否显示完整的路径，将其赋值为 false\n则仅显示最后一级。\n\n\n\n\n多选#\n\n一次性选择多个选项。通过设置 multiple 开启。通过添加 disableCheckbox 属性，可选择具体某一个 checkbox 禁用。\n\n\n\n\n搜索#\n\n通过 showSearch 开启搜索功能，支持在所有层级中搜索选项。\n\n\n\n\n悬停展开#\n\n通过 expandTrigger 设置为 hover 来让选项在鼠标悬停时展开子菜单。\n\n\n\n\nAPI#\n\n\nCascader Props#\n\n参数                  说明          类型                                                        默认值\noptions             可选项数据源      CascaderOption[]                                          -\nvalue               当前选中值（受控）   string | number | Array<string | number>                  -\ndefaultValue        默认选中值       string | number | Array<string | number>                  -\nonChange            选中值改变时的回调   (value, selectedOptions) => void                          -\nexpandTrigger       次级菜单的展开方式   'click' | 'hover'                                         'click'\nclearable           是否可清空       boolean                                                   false\ndisabled            是否禁用        boolean                                                   false\nshowAllLevels       是否显示完整路径    boolean                                                   true\nmultiple            是否支持多选      boolean                                                   false\nshowSearch          是否支持搜索      boolean                                                   false\nfilterOption        自定义搜索函数     (inputValue: string, option: CascaderOption) => boolean   -\nsearchPlaceholder   搜索占位符       string                                                    '搜索选项'\nplaceholder         占位符         string                                                    '请选择'\nclassName           自定义类名       string                                                    -\nstyle               自定义样式       React.CSSProperties                                       -\n\n\nCascaderOption#\n\n参数                说明               类型                 默认值\nvalue             选项的值             string | number    -\nlabel             选项的显示文本          string             -\nchildren          子选项              CascaderOption[]   -\ndisabled          是否禁用             boolean            false\ndisableCheckbox   是否禁用复选框（多选模式下）   boolean            false","routePath":"/sevenDesign/components/cascader","lang":"","toc":[{"text":"基础用法","id":"基础用法","depth":2,"charIndex":38},{"text":"禁用选项","id":"禁用选项","depth":2,"charIndex":144},{"text":"清空","id":"清空","depth":2,"charIndex":234},{"text":"默认值","id":"默认值","depth":2,"charIndex":266},{"text":"仅显示最后一级","id":"仅显示最后一级","depth":2,"charIndex":299},{"text":"多选","id":"多选","depth":2,"charIndex":397},{"text":"搜索","id":"搜索","depth":2,"charIndex":479},{"text":"悬停展开","id":"悬停展开","depth":2,"charIndex":523},{"text":"API","id":"api","depth":2,"charIndex":578},{"text":"Cascader Props","id":"cascader-props","depth":3,"charIndex":585},{"text":"CascaderOption","id":"cascaderoption","depth":3,"charIndex":2112}],"domain":"","frontmatter":{},"version":""},{"id":2,"title":"Input 输入框","content":"#\n\n通过鼠标或键盘输入内容，是最基础的表单域的包装。\n\n\n基础用法#\n\n基本的输入框用法。\n\n\n\n\n禁用状态#\n\n通过 disabled 属性指定是否禁用 input 组件。\n\n\n\n\n可清空#\n\n使用 clearable 属性即可得到一个可清空的输入框。\n\n\n\n\n密码输入框#\n\n使用 showPassword 属性即可得到一个可切换显示隐藏的密码框。\n\n\n\n\n不同尺寸#\n\n使用 size 属性改变输入框大小。除了默认大小外，还有另外两个选项：large、small。\n\n\n\n\n带图标的输入框#\n\n使用 prefixIcon 和 suffixIcon 属性在 input 组件首部和尾部增加显示图标。\n\n\n\n\nAPI#\n\n\nProps#\n\n属性             说明           类型                              默认值\ntype           输入框类型        string                          text\nsize           输入框尺寸        'large' | 'default' | 'small'   default\ndisabled       是否禁用         boolean                         false\nreadOnly       是否只读         boolean                         false\nclearable      是否可清空        boolean                         false\nshowPassword   是否显示密码切换按钮   boolean                         false\nprefixIcon     前置图标         React.ReactNode                 -\nsuffixIcon     后置图标         React.ReactNode                 -\nplaceholder    输入框占位文本      string                          -\nvalue          输入框值（受控）     string                          -\ndefaultValue   默认值（非受控）     string                          -\nclassName      自定义类名        string                          -\n\n\nEvents#\n\n事件名        说明          类型\nonInput    输入时触发       (value: string) => void\nonChange   值改变时触发      (e: React.ChangeEvent) => void\nonClear    点击清空按钮时触发   () => void\nonFocus    获得焦点时触发     (e: React.FocusEvent) => void\nonBlur     失去焦点时触发     (e: React.FocusEvent) => void","routePath":"/sevenDesign/components/input","lang":"","toc":[{"text":"基础用法","id":"基础用法","depth":2,"charIndex":29},{"text":"禁用状态","id":"禁用状态","depth":2,"charIndex":50},{"text":"可清空","id":"可清空","depth":2,"charIndex":92},{"text":"密码输入框","id":"密码输入框","depth":2,"charIndex":132},{"text":"不同尺寸","id":"不同尺寸","depth":2,"charIndex":181},{"text":"带图标的输入框","id":"带图标的输入框","depth":2,"charIndex":240},{"text":"API","id":"api","depth":2,"charIndex":306},{"text":"Props","id":"props","depth":3,"charIndex":313},{"text":"Events","id":"events","depth":3,"charIndex":1156}],"domain":"","frontmatter":{},"version":""},{"id":3,"title":"Pagination 分页器","content":"#\n\n当数据量过多时，使用分页器进行数据展示。\n\n\n基础用法#\n\n基础的分页器用法，设置 total、defaultCurrent 和 defaultPageSize 来控制分页器的基本行为。\n\n\n\n\n不同大小#\n\n分页器支持两种尺寸：s（小）和 m（中），默认为 m。\n\n\n\n\n自定义最大页码按钮数#\n\n通过 pagerCount 属性可以设置最大页码按钮数，默认为7。当总页数超过设置值时，会自动折叠多余的页码按钮。\n\n\n\n\n自定义每页容量选项#\n\n通过 pageSizeOptions 属性可以设置每页容量的选择项，默认为 [10, 20, 50, 100]。\n\n\n\n\n跳转功能#\n\n通过设置 showQuickJumper 为 true 来启用跳转功能，用户可以直接输入页码进行跳转。\n\n\n\n\n完整功能演示#\n\n展示分页器的所有功能，包括页码切换、每页容量控制和跳转功能。\n\n\n\n\nAPI#\n\n\nProps#\n\n属性                 说明            类型                                         默认值\ntotal              总数量           number                                     -\ndefaultCurrent     默认页码          number                                     1\ndefaultPageSize    默认每页容量        number                                     10\ncurrent            当前页码（受控模式）    number                                     -\npageSize           每页容量（受控模式）    number                                     -\nonChange           页码改变回调        (page: number, pageSize: number) => void   -\nonPageSizeChange   每页容量改变回调      (pageSize: number) => void                 -\npagerCount         最大页码按钮数       number                                     7\nsize               分页器大小         's' | 'm'                                  'm'\npageSizeOptions    每页容量选项        number[]                                   [10, 20, 50, 100]\nshowSizeChanger    是否显示每页容量选择器   boolean                                    true\nshowQuickJumper    是否显示跳转输入框     boolean                                    false\nclassName          自定义类名         string                                     -\n\n\nEvents#\n\n事件名                说明             类型\nonChange           页码或每页容量改变时触发   (page: number, pageSize: number) => void\nonPageSizeChange   每页容量改变时触发      (pageSize: number) => void","routePath":"/sevenDesign/components/pagination","lang":"","toc":[{"text":"基础用法","id":"基础用法","depth":2,"charIndex":25},{"text":"不同大小","id":"不同大小","depth":2,"charIndex":100},{"text":"自定义最大页码按钮数","id":"自定义最大页码按钮数","depth":2,"charIndex":139},{"text":"自定义每页容量选项","id":"自定义每页容量选项","depth":2,"charIndex":214},{"text":"跳转功能","id":"跳转功能","depth":2,"charIndex":287},{"text":"完整功能演示","id":"完整功能演示","depth":2,"charIndex":350},{"text":"API","id":"api","depth":2,"charIndex":394},{"text":"Props","id":"props","depth":3,"charIndex":401},{"text":"Events","id":"events","depth":3,"charIndex":1531}],"domain":"","frontmatter":{},"version":""},{"id":4,"title":"Switch 开关","content":"#\n\n表示两种相互对立的状态间的切换，多用于触发「开/关」。\n\n\n基础用法#\n\n绑定 checked 到一个布尔类型的变量。\n\n\n\n\n禁用状态#\n\n设置 disabled 属性，接受一个布尔值，设置为 true 即可禁用。\n\n\n\n\n加载状态#\n\n设置 loading 属性，表示正在加载中的状态。\n\n\n\n\n自定义开关内容#\n\n通过 checkedNode 设置选中状态的内容，通过 unCheckedNode\n设置未选中状态的内容，可以设置：图标、文字等。选中状态的内容显示在开关右侧，未选中状态的内容显示在开关左侧。\n\n\n\n\n自定义背景色#\n\n通过 checkedColor 设置选中状态的背景色，通过 unCheckedColor 设置未选中状态的背景色。\n\n\n\n\nAPI#\n\n\nProps#\n\n属性               说明                类型                默认值\nchecked          是否选中（受控）          boolean           -\ndefaultChecked   默认是否选中            boolean           false\ndisabled         是否禁用              boolean           false\nloading          是否加载中             boolean           false\ncheckedNode      选中状态显示的内容         React.ReactNode   -\nunCheckedNode    未选中状态显示的内容        React.ReactNode   -\ncheckedColor     选中状态的背景色          string            -\nunCheckedColor   未选中状态的背景色         string            -\nname             原生 input 的 name   string            -\nid               原生 input 的 id     string            -\nclassName        自定义类名             string            -\n\n\nEvents#\n\n事件名        说明        类型\nonChange   状态改变时触发   (checked: boolean) => void\n\n\n键盘操作#\n\n按键              说明\nEnter / Space   切换开关","routePath":"/sevenDesign/components/switch","lang":"","toc":[{"text":"基础用法","id":"基础用法","depth":2,"charIndex":32},{"text":"禁用状态","id":"禁用状态","depth":2,"charIndex":66},{"text":"加载状态","id":"加载状态","depth":2,"charIndex":115},{"text":"自定义开关内容","id":"自定义开关内容","depth":2,"charIndex":152},{"text":"自定义背景色","id":"自定义背景色","depth":2,"charIndex":263},{"text":"API","id":"api","depth":2,"charIndex":334},{"text":"Props","id":"props","depth":3,"charIndex":341},{"text":"Events","id":"events","depth":3,"charIndex":1025},{"text":"键盘操作","id":"键盘操作","depth":3,"charIndex":1108}],"domain":"","frontmatter":{},"version":""},{"id":5,"title":"介绍","content":"#\n\nSevenDesign 是一个企业级的 React UI 组件库，采用 TypeScript 开发，提供现代化、可定制的组件集合。\n\n\n特性#\n\n\n🎨 精美设计#\n\n * 现代化的设计风格\n * 参考 Element Plus 的设计理念\n * 提供优雅的用户体验\n\n\n📦 丰富组件#\n\n * 基础组件：Button、Icon、Typography 等\n * 表单组件：Input、Switch、Select、Form 等\n * 布局组件：Flex、Space、Divider 等\n * 反馈组件：Message、Modal 等\n\n\n🔧 TypeScript#\n\n * 完整的类型定义\n * 更好的开发体验\n * 智能代码提示\n\n\n🎭 主题定制#\n\n * 基于 CSS Variables\n * 轻松定制主题\n * 支持暗色模式\n\n\n⚡ 高性能#\n\n * 按需加载\n * Tree-shaking 支持\n * 优化的打包体积\n\n\n兼容性#\n\n * React >= 18.0.0\n * Modern Browsers (Chrome, Firefox, Safari, Edge)\n * 支持服务端渲染 (SSR)\n\n\n版本#\n\n当前版本：v0.0.1\n\n\n开源协议#\n\nSevenDesign 使用 MIT 开源协议。","routePath":"/sevenDesign/guide/introduction","lang":"","toc":[{"text":"特性","id":"特性","depth":2,"charIndex":70},{"text":"🎨 精美设计","id":"-精美设计","depth":3,"charIndex":76},{"text":"📦 丰富组件","id":"-丰富组件","depth":3,"charIndex":138},{"text":"🔧 TypeScript","id":"-typescript","depth":3,"charIndex":271},{"text":"🎭 主题定制","id":"-主题定制","depth":3,"charIndex":321},{"text":"⚡ 高性能","id":"-高性能","depth":3,"charIndex":373},{"text":"兼容性","id":"兼容性","depth":2,"charIndex":421},{"text":"版本","id":"版本","depth":2,"charIndex":516},{"text":"开源协议","id":"开源协议","depth":2,"charIndex":535}],"domain":"","frontmatter":{},"version":""},{"id":6,"title":"快速开始","content":"#\n\n本节将介绍如何在项目中使用 SevenDesign。\n\n\n安装#\n\n\n使用包管理器#\n\n::: code-group\n\n\n\n\n\n\n\n:::\n\n\n完整引入#\n\n在 main.ts 中写入以下内容：\n\n\n\n然后就可以在组件中使用了：\n\n\n\n\n按需引入#\n\nSevenDesign 支持基于 ES modules 的 tree shaking，直接引入即可按需加载：\n\n\n\n\n全局配置#\n\n某些组件如 Button 等，可以通过全局配置来设置默认属性。\n\n\n\n\nVite 项目#\n\n如果你使用 Vite 创建项目，可以直接使用 SevenDesign：\n\n\n\n\nNext.js 项目#\n\n在 Next.js 项目中使用 SevenDesign：\n\n\n\n\n\n\n开始使用#\n\n现在你可以开始使用 SevenDesign 了！访问 组件文档 查看所有可用组件。","routePath":"/sevenDesign/guide/quick-start","lang":"","toc":[{"text":"安装","id":"安装","depth":2,"charIndex":31},{"text":"使用包管理器","id":"使用包管理器","depth":3,"charIndex":37},{"text":"完整引入","id":"完整引入","depth":2,"charIndex":74},{"text":"按需引入","id":"按需引入","depth":2,"charIndex":121},{"text":"全局配置","id":"全局配置","depth":2,"charIndex":187},{"text":"Vite 项目","id":"vite-项目","depth":2,"charIndex":230},{"text":"Next.js 项目","id":"nextjs-项目","depth":2,"charIndex":280},{"text":"开始使用","id":"开始使用","depth":2,"charIndex":328}],"domain":"","frontmatter":{},"version":""},{"id":7,"title":"主题定制","content":"#\n\nSevenDesign 使用 CSS Variables 实现主题定制，你可以轻松地修改组件的样式。\n\n\nCSS Variables#\n\n所有的设计 token 都以 CSS Variables 的形式暴露出来，你可以通过覆盖这些变量来自定义主题。\n\n\n品牌色#\n\n\n\n\n文本颜色#\n\n\n\n\n边框颜色#\n\n\n\n\n背景色#\n\n\n\n\n自定义主题#\n\n\n方式一：覆盖 CSS Variables#\n\n在你的项目中创建一个样式文件，覆盖默认的 CSS Variables：\n\n\n\n然后在你的应用入口引入：\n\n\n\n\n方式二：使用内联样式#\n\n你也可以直接在 HTML 中修改 CSS Variables：\n\n\n\n\n暗色主题#\n\nSevenDesign 内置了暗色主题支持，只需在根元素添加 .sd-dark 类名：\n\n\n\n\n自定义暗色主题#\n\n你也可以覆盖暗色主题的 CSS Variables：\n\n\n\n\n完整的 CSS Variables 列表#\n\n\n颜色#\n\n变量名                  说明    默认值\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--sd-color-white     白色    #ffffff\n--sd-color-black     黑色    #000000\n\n\n文本颜色#\n\n变量名                           说明     默认值\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边框#\n\n变量名                             说明     默认值\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--sd-border-radius-base         基础圆角   4px\n--sd-border-radius-small        小圆角    2px\n--sd-border-radius-round        圆形     20px\n--sd-border-radius-circle       圆      100%\n\n\n字体#\n\n变量名                          说明     默认值\n--sd-font-size-extra-large   超大字号   20px\n--sd-font-size-large         大字号    18px\n--sd-font-size-medium        中等字号   16px\n--sd-font-size-base          基础字号   14px\n--sd-font-size-small         小字号    13px\n--sd-font-size-extra-small   超小字号   12px\n\n\n组件尺寸#\n\n变量名                           说明     默认值\n--sd-component-size-large     大尺寸    40px\n--sd-component-size-default   默认尺寸   32px\n--sd-component-size-small     小尺寸    24px\n\n\n阴影#\n\n变量名                       说明\n--sd-box-shadow-base      基础阴影\n--sd-box-shadow-light     浅阴影\n--sd-box-shadow-lighter   更浅阴影\n--sd-box-shadow-dark      深阴影\n\n\n示例#\n\n\n创建绿色主题#\n\n\n\n\n创建紧凑主题#\n\n\n\n\n最佳实践#\n\n 1. 保持一致性：确保主题颜色在整个应用中保持一致\n 2. 考虑可访问性：确保文本和背景色有足够的对比度\n 3. 测试暗色模式：如果支持暗色模式，确保在两种模式下都测试过\n 4. 使用设计系统：建议基于设计系统来定制主题，而不是随意修改","routePath":"/sevenDesign/guide/theme","lang":"","toc":[{"text":"CSS Variables","id":"css-variables","depth":2,"charIndex":55},{"text":"品牌色","id":"品牌色","depth":3,"charIndex":129},{"text":"文本颜色","id":"文本颜色","depth":3,"charIndex":138},{"text":"边框颜色","id":"边框颜色","depth":3,"charIndex":148},{"text":"背景色","id":"背景色","depth":3,"charIndex":158},{"text":"自定义主题","id":"自定义主题","depth":2,"charIndex":167},{"text":"方式一：覆盖 CSS Variables","id":"方式一覆盖-css-variables","depth":3,"charIndex":176},{"text":"方式二：使用内联样式","id":"方式二使用内联样式","depth":3,"charIndex":255},{"text":"暗色主题","id":"暗色主题","depth":2,"charIndex":304},{"text":"自定义暗色主题","id":"自定义暗色主题","depth":3,"charIndex":359},{"text":"完整的 CSS Variables 列表","id":"完整的-css-variables-列表","depth":2,"charIndex":400},{"text":"颜色","id":"颜色","depth":3,"charIndex":424},{"text":"文本颜色","id":"文本颜色-1","depth":3,"charIndex":707},{"text":"边框","id":"边框","depth":3,"charIndex":982},{"text":"字体","id":"字体","depth":3,"charIndex":1394},{"text":"组件尺寸","id":"组件尺寸","depth":3,"charIndex":1687},{"text":"阴影","id":"阴影","depth":3,"charIndex":1863},{"text":"示例","id":"示例","depth":2,"charIndex":2021},{"text":"创建绿色主题","id":"创建绿色主题","depth":3,"charIndex":2027},{"text":"创建紧凑主题","id":"创建紧凑主题","depth":3,"charIndex":2039},{"text":"最佳实践","id":"最佳实践","depth":2,"charIndex":2051}],"domain":"","frontmatter":{},"version":""}]

package/docs/guide/introduction.md

@@ -43,7 +43,7 @@ SevenDesign 是一个企业级的 React UI 组件库，采用 TypeScript 开发
 
 ## 版本
 
-当前版本：v0.1.0
+当前版本：v0.0.1
 
 ## 开源协议
 

package/docs/package.json

@@ -14,9 +14,10 @@
     "react-dom": "19.2.3"
   },
   "devDependencies": {
+    "@rspress/plugin-preview": "^1.3.0",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
-    "rspress": "^1.11.0",
+    "rspress": "^1.47.0",
     "typescript": "^5.3.3"
   }
 }

package/docs/rspress.config.ts

@@ -23,7 +23,7 @@ export default defineConfig({
       previewCodeTransform: ({ code }) => {
         const injected = [
           "import React from 'react';",
-          "import { Button, Input, Switch, Pagination } from '@seven-design-ui/components';",
+          "import { Button, Input, Switch, Pagination, Cascader } from '@seven-design-ui/components';",
           "import '@seven-design-ui/components/dist/style.css';",
           '',
         ].join('\n')
@@ -99,6 +99,10 @@ export default defineConfig({
               text: 'Switch 开关',
               link: '/components/switch',
             },
+            {
+              text: 'Cascader 级联选择器',
+              link: '/components/cascader',
+            },
           ],
         },
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seven-design-ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "企业级 React UI 组件库",
   "license": "MIT",
   "author": "seven.zhong",
@@ -72,4 +72,4 @@
     "node": ">=18.0.0",
     "pnpm": ">=8.0.0"
   }
-}
+}

package/packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seven-design-ui/components",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "SevenDesign React UI 组件库",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",