You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 lines
14 KiB
2 lines
14 KiB
import{j as e}from"./markdown-vendor-BZI_VWzW.js";import{u as ve,r as t}from"./data-vendor-BOGugMqL.js";import{b as we,g as je,r as Re}from"./react-vendor-CmPQC3tV.js";import{Q as Ee,a as X,S as he,e as Se,R as Le}from"./index-BxSU1Bs1.js";import{c as ke}from"./imageDragTransfer-apm0lmHd.js";import{D as Oe}from"./arco-vendor-gN7EHfgO.js";const E="keyword",Fe=350,g=30,u={OFFICIAL:"official",COMMUNITY:"community"};function S(p){const y=p?.data?.list;return Array.isArray(y)?y:[]}function me(p,y){const s=new Set;for(const d of p){const c=d.id;c!=null&&c!==""&&s.add(String(c))}const h=[...p];let m=0;for(const d of y){const c=d.id;if(c==null||c===""){h.push(d),m+=1;continue}const f=String(c);s.has(f)||(s.add(f),h.push(d),m+=1)}return m===0?{merged:p,added:0}:{merged:h,added:m}}function Me(){return!1}const fe=t.memo(function(y){const{item:s,variant:h,onOpen:m,dragManager:d}=y,c=typeof s.threeViewImage=="string"&&s.threeViewImage.trim()!==""?s.threeViewImage.trim():"",f=()=>{c&&d.ensurePreviewImage(c)},v=C=>{d.startImageDrag({evt:C,dragUrl:c||void 0,previewUrl:c||void 0,preferDomDragImage:!0})},L=e.jsxs(e.Fragment,{children:[e.jsx("img",{className:"character_library_sections__card_image ",src:s.avatar??"",alt:"",draggable:!1,loading:"lazy",decoding:"async"}),e.jsx("span",{className:"character_library_sections__card_tag",children:s.title??""})]});return h==="button"?e.jsx("button",{type:"button",className:classNames("character_library_sections__card",s.certificateInfo&&"character_library_sections__card_certificate"),draggable:!0,onMouseEnter:f,onDragStart:v,onClick:()=>m(s),children:L}):e.jsx("div",{className:classNames("character_library_sections__card",s.certificateInfo&&"character_library_sections__card_certificate"),draggable:!0,onMouseEnter:f,onDragStart:v,onClick:()=>m(s),children:L})});function Ue({showDiyEntry:p=!0}){const y=we(),{t:s}=ve(),[h,m]=je(),d=t.useRef(null),c=h.get(E)?.trim()??"",[f,v]=t.useState(()=>h.get(E)??""),[L,C]=t.useState([]),[ge,Q]=t.useState([]),[pe,w]=t.useState([]),[l,Z]=t.useState(u.OFFICIAL),[$,ee]=t.useState([]),[_,ae]=t.useState(null),[re,j]=t.useState(!1),[V,k]=t.useState(!1),[te,se]=t.useState(1),[T,N]=t.useState(!0),[q,ce]=t.useState(!1),[Y,H]=t.useState(!1),[ie,ne]=t.useState(1),[G,I]=t.useState(!0),[B,oe]=t.useState(!1),[K,z]=t.useState(!1),O=t.useMemo(()=>ke(),[]);t.useEffect(()=>()=>{O.dispose()},[O]),t.useEffect(()=>{if(!V)return;const a=r=>{r.key==="Escape"&&k(!1)};return window.addEventListener("keydown",a),()=>window.removeEventListener("keydown",a)},[]);const le=t.useRef(null),b=t.useRef(""),A=t.useRef(""),x=t.useRef(!1),de=t.useRef(async()=>{}),F=t.useRef(!1);F.current=Me();const ye=F.current,_e=t.useRef(0);ye&&(_e.current+=1,console.log("[Characters] render",_e.current)),t.useEffect(()=>{Ee().then(a=>{const r=a.data,i=Array.isArray(r)?r:[];i.sort((o,n)=>(o.sortNum??0)-(n.sortNum??0)),ee(i)}).catch(()=>ee([]))},[]),t.useEffect(()=>{v(h.get(E)??"")},[h]),t.useEffect(()=>{const a=window.setTimeout(()=>{const r=f.trim();r!==c&&m(i=>{const o=new URLSearchParams(i);return r?o.set(E,r):o.delete(E),o},{replace:!0})},Fe);return()=>window.clearTimeout(a)},[f,c,m]),t.useEffect(()=>{let a=!1;const r={uploadCharacter:!0,page:1,pageSize:g};return c&&(r.keyword=c),X(r).then(i=>{a||C(S(i))}).catch(()=>{a||C([])}),()=>{a=!0}},[c]),t.useEffect(()=>{if(l!==u.OFFICIAL)return;const a=`${String(_??"all")}|${c}`;b.current=a,se(1),N(!0),ce(!0);const r={type:1,page:1,pageSize:g};_!=null&&(r.categoryId=_),c&&(r.keyword=c);let i=!1;return X(r).then(o=>{if(i||b.current!==a)return;const n=S(o);Q(n),N(n.length>=g)}).catch(()=>{i||b.current!==a||(Q([]),N(!1))}).finally(()=>{i||b.current!==a||(ce(!1),H(!1),x.current=!1)}),()=>{i=!0}},[l,_,c]),t.useEffect(()=>{if(l!==u.COMMUNITY)return;const a=c;A.current=a,ne(1),I(!0),oe(!0);const r={page:1,pageSize:g};c&&(r.keyword=c);let i=!1;return he(r).then(o=>{if(i||A.current!==a)return;const n=S(o);w(n),I(n.length>=g)}).catch(()=>{i||A.current!==a||(w([]),I(!1))}).finally(()=>{i||A.current!==a||(oe(!1),z(!1),x.current=!1)}),()=>{i=!0}},[l,c]);const be=t.useCallback(async()=>{if(F.current&&console.log("[Characters] loadNextPage tick",l),l===u.OFFICIAL){if(!T||x.current||q||Y)return;x.current=!0,H(!0);const i=b.current,o=te+1;try{const n={type:1,page:o,pageSize:g};_!=null&&(n.categoryId=_),c&&(n.keyword=c);const U=await X(n);if(b.current!==i)return;const P=S(U);let D=0;Q(J=>{const{merged:Ne,added:Ie}=me(J,P);return D=Ie,Ne}),se(o),N(D===0?!1:P.length>=g)}catch{b.current===i&&N(!1)}finally{x.current=!1,b.current===i&&H(!1)}return}if(!G||x.current||B||K)return;x.current=!0,z(!0);const a=A.current,r=ie+1;try{const i={page:r,pageSize:g};c&&(i.keyword=c);const o=await he(i);if(A.current!==a)return;const n=S(o);let U=0;w(P=>{const{merged:D,added:J}=me(P,n);return U=J,D}),ne(r),I(U===0?!1:n.length>=g)}catch{A.current===a&&I(!1)}finally{x.current=!1,A.current===a&&z(!1)}},[l,T,q,Y,te,_,c,G,B,K,ie]);de.current=be;const M=l===u.OFFICIAL?T:G,W=l===u.OFFICIAL?q:B,Ae=l===u.OFFICIAL?Y:K;t.useEffect(()=>{const a=le.current;if(!a||!M||W)return;F.current&&console.log("[Characters] IO observe attach",{hasMoreForActive:M,isInitialLoadingForActive:W,activeLibraryTab:l});let r=0;const i=new IntersectionObserver(o=>{o[0]?.isIntersecting&&r===0&&(r=window.requestAnimationFrame(()=>{r=0,de.current()}))},{root:null,rootMargin:"160px",threshold:0});return i.observe(a),()=>{r!==0&&window.cancelAnimationFrame(r),i.disconnect()}},[M,W,l]);const ue=t.useCallback(a=>{Se({id:a.id,onDeleted:r=>{const i=String(r);C(o=>o.filter(n=>String(n.id??"")!==i)),w(o=>o.filter(n=>String(n.id??"")!==i))},onUpdated:r=>{const i=String(r.id),o=n=>String(n.id??"")!==i?n:{...n,title:r.title,description:r.description,isPublic:r.isPublic,avatar:r.avatar||n.avatar};C(n=>n.map(o)),w(n=>n.map(o))}})},[]),xe=_==null?s("pages.characters.category_all"):$.find(a=>a.id===_)?.name??s("pages.characters.category_label"),Ce=l===u.OFFICIAL?ge:pe,R=l===u.OFFICIAL;return e.jsxs("div",{className:"character_library_sections",children:[e.jsxs("section",{className:"character_library_sections__section","aria-labelledby":"character-library-my-heading",children:[e.jsxs("div",{className:"character_library_sections__section_head",children:[e.jsxs("div",{className:"character_library_sections__title_wrap character_library_sections__title_wrap--myRow",children:[e.jsx("h2",{id:"character-library-my-heading",className:"character_library_sections__section_title",children:s("pages.characters.my_section")}),e.jsx("button",{type:"button",className:"deposit","aria-haspopup":"dialog","aria-expanded":V,"aria-label":s("pages.characters.copyright_deposit_aria"),onClick:()=>k(!0),children:e.jsxs("div",{className:"deposit_inner",children:[e.jsx("img",{src:new URL("/assets/ic_deposit_active-DqitDVNN.png",import.meta.url).href,className:"deposit_icon",alt:"","aria-hidden":!0}),e.jsx("span",{className:"deposit_label",children:s("pages.characters.copyright_deposit")})]})})]}),e.jsxs("label",{className:"character_library_sections__search",children:[e.jsx("img",{className:"character_library_sections__search_icon",src:new URL("/assets/ic_search-DREI2NzL.png",import.meta.url).href,alt:""}),e.jsx("input",{className:"character_library_sections__search_input",type:"search",placeholder:s("pages.characters.search_placeholder"),name:"keyword",value:f,onChange:a=>v(a.target.value),"aria-label":s("pages.characters.search_aria")})]})]}),e.jsxs("div",{className:"character_library_sections__grid",children:[p?e.jsxs("button",{type:"button",className:"character_library_sections__card character_library_sections__diy_card",onClick:()=>y(Le.CHARACTERS_CREATE),"aria-label":s("pages.characters.diy_aria"),children:[e.jsx("img",{className:"character_library_sections__diy_icon",src:new URL("/assets/ic_plus-DsKUbTM-.png",import.meta.url).href,alt:""}),e.jsx("p",{className:"character_library_sections__diy_label",children:s("pages.characters.diy_label")})]}):null,L.map((a,r)=>e.jsx(fe,{variant:"button",item:a,onOpen:ue,dragManager:O},String(a.id??r)))]})]}),e.jsxs("section",{className:"character_library_sections__section","aria-label":s("pages.characters.official_section"),children:[e.jsxs("div",{className:"character_library_sections__section_head",children:[e.jsx("div",{className:"character_library_sections__title_wrap",children:e.jsxs("div",{className:"character_library_sections__tabs",role:"tablist","aria-label":s("pages.characters.official_section"),children:[e.jsx("button",{type:"button",role:"tab","aria-selected":R,className:`character_library_sections__section_tab${R?" character_library_sections__section_tab_active":""}`,onClick:()=>{Z(u.OFFICIAL),j(!1)},children:s("pages.characters.official_section")}),e.jsx("button",{type:"button",role:"tab","aria-selected":!R,className:`character_library_sections__section_tab${R?"":" character_library_sections__section_tab_active"}`,onClick:()=>{Z(u.COMMUNITY),j(!1)},children:s("pages.characters.community_section")})]})}),R?e.jsx("div",{ref:d,children:e.jsx(Oe,{trigger:"click",position:"br",popupVisible:re,onVisibleChange:j,triggerProps:{style:{zIndex:2e3}},getPopupContainer:()=>d.current??document.body,droplist:e.jsxs("div",{className:"character_library_sections__category_dropdown",role:"menu","aria-label":s("pages.characters.category_aria"),children:[e.jsx("button",{type:"button",className:`character_library_sections__category_menu_item${_===null?" character_library_sections__category_menu_item_active":""}`,role:"menuitem",onClick:()=>{ae(null),j(!1)},children:s("pages.characters.category_all")}),$.map(a=>e.jsx("button",{type:"button",className:`character_library_sections__category_menu_item${_===a.id?" character_library_sections__category_menu_item_active":""}`,role:"menuitem",onClick:()=>{ae(a.id),j(!1)},children:a.name},a.id))]}),children:e.jsxs("button",{type:"button",className:"character_library_sections__category","aria-label":s("pages.characters.category_aria"),"aria-expanded":re,"aria-haspopup":"menu",children:[e.jsx("span",{children:xe}),e.jsx("img",{className:"character_library_sections__category_icon",src:new URL("/assets/ic_arrow_right_gray-DM6GPP4g.png",import.meta.url).href,alt:""})]})})}):null]}),e.jsx("div",{className:"character_library_sections__grid",children:Ce.map((a,r)=>e.jsx(fe,{variant:"div",item:a,onOpen:ue,dragManager:O},String(a.id??r)))}),Ae?e.jsx("p",{className:"character_library_sections__loading_more",children:s("common.loading")}):null,M?e.jsx("div",{ref:le,className:"character_library_sections__sentinel","aria-hidden":!0}):null]}),V?Re.createPortal(e.jsx("div",{className:"character_library_sections__deposit_modal_overlay",role:"presentation",onClick:()=>k(!1),children:e.jsxs("div",{className:"character_library_sections__deposit_modal_dialog",role:"dialog","aria-modal":"true","aria-labelledby":"character-deposit-modal-title",onClick:a=>a.stopPropagation(),children:[e.jsx("h3",{id:"character-deposit-modal-title",className:"character_library_sections__deposit_modal_title",children:s("pages.characters.copyright_deposit_modal_title")}),e.jsx("div",{className:"character_library_sections__deposit_modal_steps_scroll",children:e.jsxs("div",{className:"character_library_sections__deposit_modal_steps",children:[e.jsxs("div",{className:"character_library_sections__deposit_modal_step_wrap character_library_sections__deposit_modal_step_wrap--1",children:[e.jsx("img",{className:"character_library_sections__deposit_modal_step",src:new URL("/assets/step-1-CiAOBSnI.png",import.meta.url).href,width:349,height:298,alt:s("pages.characters.copyright_deposit_modal_step_1_alt"),decoding:"async"}),e.jsx("span",{className:"character_library_sections__deposit_modal_badge","aria-hidden":!0,children:"1"})]}),e.jsx("img",{className:"character_library_sections__deposit_modal_arrow",src:new URL("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAYAAADFeBvrAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAABAdJREFUeAHtWYlu4kgQfY0x+IAhJEwyo93V/v9frVa72uyIGRJiY+ODnqq22zYkUUbtIyjiKcYHxPRzVb06EJKAD4QRPhguhM4dF0Lnjguhc8cYLSAPElGcYL9PgRywxha82QRj2r8XhGliPRwOeNgEyFMJdQN6Ke4ksFi4cHwb7wFjlwuDGHmun0VJivfEarPZIdjGeA8YE0qSjGxBBERBRaAmx9v2McbjJsLQlZURIV4kx48kGkJdESWN4lhv4dMem3Wk3HMoGBESQmBkCX1W7KQ4+VRBONol+P4tRJYNQ8rY5Tx3isrL+EC5nkB1UdRuuI9zrO+HIWVMyPGmcD274iQa7qdQKp72wCzLcf/PE+I4Q58QbfuhMNgrxStkWyrpluR+6q76nD/IezYQkVuuPMzmE/SB1pWCP5ti/skpDaPj6OQZlfFVcqSY2pEC9iProquONU1ybH6EOOTaSrK0WhFXbB1tLVmGkje3sbr1SWTQGTqr5eyJhevVjMofLQzlKkVZQTQWrQmE2xTr/0NK0N2Jheh6psCL26xDZTEp8SyGtNvpUok3m2q/r3/6sKz2z7fzapsXdXM7w8Rp1L1vPLIkzfHvX8VDaAvR59Tn8SFGQCWQVH6HsrqoY+jUYmIkcPebD883bwJ67YcWVw4+Xbm1b51CHO2UoPz3d9AqV/Xe4M0XU1x/9uibalU4VbUmVea9vjeX9EE6Vs+f4PYLBf24+DpZvRQ4Ve04yqigNYuE4VpwIY5N8UruUZWSfPXtN9GqBf9VhE+JqgyyMt80Sthn4OuebymBMEHvhILtXqmdpIAXopGXGPI5udFohOs7F6bojRAvnLvWQrZRrLyU64rECRuLeqzVF5pHOObL6oUQ55vNjx3iHctvsxTSkwdA10Saz9imauEPn0qodmHdOSFd+iQq64vaMo3FF6gb9jHVgXe/e7Dt9hrVKaGUBicPNPHJ0moGVLwhCuuoV3nc1fozm/KUW0l6W3RGKI5TipcIeVaTELqN0C7XTEC0m19R0l05akbRFTohFEcJtltWsrIlfUmUj7IpDSNvHCyWk07JMFoT2tFUJ9hGZYy8sLhKEwor8enNradcrQ+0IhQ87RCFqTp+kQyOEw+3Fhwvjttf+jO+M8/bol2KkxgvhUA8q64ty8Lnrz4N8vuttowJxdG+UOVG5q8pHF+ZUqLkSU/fZBhGhFi51BxAHpNoiHN11aHZ3fLGo5Km2+B/DUaEWJl4Y2LiiFRNhsOfpzqLpYch0WJyOqlTi4Ko44f+5kt3cDIMY0KuO1HFZDONqHEwnV8tfcxm/UxG30KrIQn/KyvdnqoESRMPrsk8zxkk+F9Dr1Of98DlZ/1zx4XQueNC6Nzx4Qj9BCoj5WsVG4UdAAAAAElFTkSuQmCC",import.meta.url).href,width:52,height:52,alt:"","aria-hidden":!0,decoding:"async"}),e.jsxs("div",{className:"character_library_sections__deposit_modal_step_wrap character_library_sections__deposit_modal_step_wrap--2",children:[e.jsx("img",{className:"character_library_sections__deposit_modal_step",src:new URL("/assets/step-2-BUAMeHBk.png",import.meta.url).href,width:349,height:298,alt:s("pages.characters.copyright_deposit_modal_step_2_alt"),decoding:"async"}),e.jsx("span",{className:"character_library_sections__deposit_modal_badge","aria-hidden":!0,children:"2"})]})]})}),e.jsx("button",{type:"button",className:"character_library_sections__deposit_modal_confirm",onClick:()=>k(!1),children:s("pages.characters.copyright_deposit_modal_confirm")})]})}),document.body):null]})}function Ye(){return e.jsx("div",{className:"charactersPage",children:e.jsx(Ue,{})})}export{Ue as CharacterLibrarySections,Ye as default};
|
|
//# sourceMappingURL=index-C3p15IZ-.js.map
|
|
|