全新popiart网站 react项目重构
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
11 KiB

import{j as r}from"./markdown-vendor-BZI_VWzW.js";import{u as Ee,r as a}from"./data-vendor-BOGugMqL.js";import{b as Fe,g as Oe}from"./react-vendor-CmPQC3tV.js";import{V as ke,a as te,W as Ce,e as Pe,y as De,R as Te}from"./index-RTMDNWJ5.js";import{c as Ue}from"./imageDragTransfer-apm0lmHd.js";import{D as He}from"./arco-vendor-gN7EHfgO.js";const A="keyword",Ve=350,R=30,Ke=100,qe="160px",y={OFFICIAL:"official",COMMUNITY:"community"};function E(_){const l=_?.data?.list;return Array.isArray(l)?l:[]}function U(_){const l=_?.data?.total,t=Number(l);return Number.isFinite(t)?t:null}function H(_,l,t,u){return t!=null?_*l<t:u>=l}function Ie(_){let l=_?.parentElement??null;for(;l!=null;){const u=window.getComputedStyle(l).overflowY;if((u==="auto"||u==="scroll")&&l.scrollHeight>l.clientHeight)return l;l=l.parentElement}return null}function Ye(_,l,t=160){const u=_.getBoundingClientRect();if(l==null)return u.bottom>=-t&&u.top<=window.innerHeight+t;const d=l.getBoundingClientRect();return u.bottom>=d.top-t&&u.top<=d.bottom+t}function Re(_,l){const t=new Set;for(const h of _){const c=h.id;c!=null&&c!==""&&t.add(String(c))}const u=[..._];let d=0;for(const h of l){const c=h.id;if(c==null||c===""){u.push(h),d+=1;continue}const p=String(c);t.has(p)||(t.add(p),u.push(h),d+=1)}return d===0?{merged:_,added:0}:{merged:u,added:d}}function Be(){return!1}const xe=a.memo(function(l){const{item:t,variant:u,onOpen:d,dragManager:h}=l,c=typeof t.threeViewImage=="string"&&t.threeViewImage.trim()!==""?t.threeViewImage.trim():"",p=()=>{c&&h.ensurePreviewImage(c),console.log("onDragMouseEnter",c)},N=x=>{h.startImageDrag({evt:x,dragUrl:c||void 0,previewUrl:c||void 0,preferDomDragImage:!0})},F=r.jsxs(r.Fragment,{children:[r.jsx("img",{className:"character_library_sections__card_image ",src:t.avatar??"",alt:"",draggable:!1,decoding:"async"}),r.jsx("span",{className:"character_library_sections__card_tag",children:t.title??""})]});return u==="button"?r.jsx("button",{type:"button",className:classNames("character_library_sections__card",t.certificateInfo&&"character_library_sections__card_certificate"),draggable:!0,onMouseEnter:p,onDragStart:N,onClick:()=>d(t),children:F}):r.jsx("div",{className:classNames("character_library_sections__card",t.certificateInfo&&"character_library_sections__card_certificate"),draggable:!0,onMouseEnter:p,onDragStart:N,onClick:()=>d(t),children:F})});function ze({showDiyEntry:_=!0}){const l=Fe(),{t}=Ee(),[u,d]=Oe(),h=a.useRef(null),c=u.get(A)?.trim()??"",[p,N]=a.useState(()=>u.get(A)??""),[F,x]=a.useState([]),[re,V]=a.useState([]),[ae,v]=a.useState([]),[f,se]=a.useState(y.OFFICIAL),[ce,ne]=a.useState([]),[m,ie]=a.useState(null),[oe,w]=a.useState(!1),[le,ue]=a.useState(1),[K,S]=a.useState(!0),[q,_e]=a.useState(!1),[Y,B]=a.useState(!1),[de,fe]=a.useState(1),[z,j]=a.useState(!0),[G,ge]=a.useState(!1),[$,Q]=a.useState(!1),O=a.useMemo(()=>Ue(),[]);a.useEffect(()=>()=>{O.dispose()},[O]);const W=a.useRef(null),b=a.useRef(""),C=a.useRef(""),he=a.useRef(null),me=a.useRef(null),I=a.useRef(!1),Z=a.useRef(async()=>{}),J=a.useRef(()=>{}),k=a.useRef(!1);k.current=Be();const Ne=k.current,ye=a.useRef(0);Ne&&(ye.current+=1,console.log("[Characters] render",ye.current)),a.useEffect(()=>{ke().then(e=>{const s=e.data,n=Array.isArray(s)?s:[];n.sort((i,o)=>(i.sortNum??0)-(o.sortNum??0)),ne(n)}).catch(()=>ne([]))},[]),a.useEffect(()=>{N(u.get(A)??"")},[u]),a.useEffect(()=>{const e=window.setTimeout(()=>{const s=p.trim();s!==c&&d(n=>{const i=new URLSearchParams(n);return s?i.set(A,s):i.delete(A),i},{replace:!0})},Ve);return()=>window.clearTimeout(e)},[p,c,d]),a.useEffect(()=>{let e=!1;const s={uploadCharacter:!0,page:1,pageSize:Ke};return c&&(s.keyword=c),te(s).then(n=>{e||x(E(n))}).catch(()=>{e||x([])}),()=>{e=!0}},[c]),a.useEffect(()=>{const e=`${String(m??"all")}|${c}`;if(he.current===e)return;b.current=e,ue(1),S(!0),_e(!0);const s={type:1,page:1,pageSize:R};m!=null&&(s.categoryId=m),c&&(s.keyword=c);let n=!1;return te(s).then(i=>{if(n||b.current!==e)return;const o=E(i),g=U(i);V(o),S(H(1,R,g,o.length)),he.current=e}).catch(()=>{n||b.current!==e||(V([]),S(!1))}).finally(()=>{n||b.current!==e||(_e(!1),B(!1),I.current=!1)}),()=>{n=!0}},[m,c]),a.useEffect(()=>{const e=c;if(me.current===e||f!==y.COMMUNITY)return;C.current=e,fe(1),j(!0),ge(!0);const s={page:1,pageSize:R};c&&(s.keyword=c);let n=!1;return Ce(s).then(i=>{if(n||C.current!==e)return;const o=E(i),g=U(i);v(o),j(H(1,R,g,o.length)),me.current=e}).catch(()=>{n||C.current!==e||(v([]),j(!1))}).finally(()=>{n||C.current!==e||(ge(!1),Q(!1),I.current=!1)}),()=>{n=!0}},[f,c]);const ve=a.useCallback(()=>{const e=W.current;if(e==null)return;const s=Ie(e);Ye(e,s,160)&&Z.current()},[]);J.current=ve;const we=a.useCallback(async()=>{if(k.current&&console.log("[Characters] loadNextPage tick",f),f===y.OFFICIAL){if(!K||I.current||q||Y)return;I.current=!0,B(!0);const i=b.current,o=le+1;let g=!1;try{const M={type:1,page:o,pageSize:R};m!=null&&(M.categoryId=m),c&&(M.keyword=c);const D=await te(M);if(b.current!==i)return;const T=E(D),Le=U(D);V(Me=>{const{merged:Ae}=Re(Me,T);return Ae}),ue(o),g=H(o,R,Le,T.length),S(g)}catch{b.current===i&&S(!1),g=!1}finally{I.current=!1,b.current===i&&B(!1),g&&b.current===i&&window.requestAnimationFrame(()=>J.current())}return}if(!z||I.current||G||$)return;I.current=!0,Q(!0);const e=C.current,s=de+1;let n=!1;try{const i={page:s,pageSize:R};c&&(i.keyword=c);const o=await Ce(i);if(C.current!==e)return;const g=E(o),M=U(o);v(D=>{const{merged:T}=Re(D,g);return T}),fe(s),n=H(s,R,M,g.length),j(n)}catch{C.current===e&&j(!1),n=!1}finally{I.current=!1,C.current===e&&Q(!1),n&&C.current===e&&window.requestAnimationFrame(()=>J.current())}},[f,K,q,Y,le,m,c,z,G,$,de]);Z.current=we;const P=f===y.OFFICIAL?K:z,X=f===y.OFFICIAL?q:G,ee=f===y.OFFICIAL?Y:$,pe=f===y.OFFICIAL?re.length:ae.length;a.useEffect(()=>{const e=W.current;if(!e||!P||X||ee)return;k.current&&console.log("[Characters] IO observe attach",{hasMoreForActive:P,isInitialLoadingForActive:X,activeLibraryTab:f,listLength:pe});const s=Ie(e);let n=0;const i=new IntersectionObserver(o=>{o.some(g=>g.isIntersecting)&&n===0&&(n=window.requestAnimationFrame(()=>{n=0,Z.current()}))},{root:s,rootMargin:qe,threshold:0});return i.observe(e),()=>{n!==0&&window.cancelAnimationFrame(n),i.disconnect()}},[P,X,ee,f,pe]);const be=a.useCallback(e=>{Pe({id:e.id,onDeleted:s=>{const n=String(s);x(i=>i.filter(o=>String(o.id??"")!==n)),v(i=>i.filter(o=>String(o.id??"")!==n))},onUpdated:s=>{const n=String(s.id),i=o=>String(o.id??"")!==n?o:{...o,title:s.title,description:s.description,isPublic:s.isPublic,avatar:s.avatar||o.avatar};x(o=>o.map(i)),v(o=>o.map(i))}})},[]),Se=m==null?t("pages.characters.category_all"):ce.find(e=>e.id===m)?.name??t("pages.characters.category_label"),je=f===y.OFFICIAL?re:ae,L=f===y.OFFICIAL;return r.jsxs("div",{className:"character_library_sections",children:[r.jsxs("section",{className:"character_library_sections__section","aria-labelledby":"character-library-my-heading",children:[r.jsxs("div",{className:"character_library_sections__section_head",children:[r.jsxs("div",{className:"character_library_sections__title_wrap character_library_sections__title_wrap--myRow",children:[r.jsx("h2",{id:"character-library-my-heading",className:"character_library_sections__section_title",children:t("pages.characters.my_section")}),r.jsx("button",{type:"button",className:"deposit","aria-haspopup":"dialog","aria-label":t("pages.characters.copyright_deposit_aria"),onClick:()=>void De(),children:r.jsxs("div",{className:"deposit_inner",children:[r.jsx("img",{src:new URL("/assets/ic_deposit_active-DqitDVNN.png",import.meta.url).href,className:"deposit_icon",alt:"","aria-hidden":!0}),r.jsx("span",{className:"deposit_label",children:t("pages.characters.copyright_deposit")})]})})]}),r.jsxs("label",{className:"character_library_sections__search",children:[r.jsx("img",{className:"character_library_sections__search_icon",src:new URL("/assets/ic_search-DREI2NzL.png",import.meta.url).href,alt:""}),r.jsx("input",{className:"character_library_sections__search_input",type:"search",placeholder:t("pages.characters.search_placeholder"),name:"keyword",value:p,onChange:e=>N(e.target.value),"aria-label":t("pages.characters.search_aria")})]})]}),r.jsxs("div",{className:"character_library_sections__grid",children:[_?r.jsxs("button",{type:"button",className:"character_library_sections__card character_library_sections__diy_card",onClick:()=>l(Te.CHARACTERS_CREATE),"aria-label":t("pages.characters.diy_aria"),children:[r.jsx("img",{className:"character_library_sections__diy_icon",src:new URL("/assets/ic_plus-DsKUbTM-.png",import.meta.url).href,alt:""}),r.jsx("p",{className:"character_library_sections__diy_label",children:t("pages.characters.diy_label")})]}):null,F.map((e,s)=>r.jsx(xe,{variant:"button",item:e,onOpen:be,dragManager:O},String(e.id??s)))]})]}),r.jsxs("section",{className:"character_library_sections__section","aria-label":t("pages.characters.official_section"),children:[r.jsxs("div",{className:"character_library_sections__section_head",children:[r.jsx("div",{className:"character_library_sections__title_wrap",children:r.jsxs("div",{className:"character_library_sections__tabs",role:"tablist","aria-label":t("pages.characters.official_section"),children:[r.jsx("button",{type:"button",role:"tab","aria-selected":L,className:`character_library_sections__section_tab${L?" character_library_sections__section_tab_active":""}`,onClick:()=>{se(y.OFFICIAL),w(!1)},children:t("pages.characters.official_section")}),r.jsx("button",{type:"button",role:"tab","aria-selected":!L,className:`character_library_sections__section_tab${L?"":" character_library_sections__section_tab_active"}`,onClick:()=>{se(y.COMMUNITY),w(!1)},children:t("pages.characters.community_section")})]})}),L?r.jsx("div",{ref:h,children:r.jsx(He,{trigger:"click",position:"br",popupVisible:oe,onVisibleChange:w,triggerProps:{style:{zIndex:2e3}},getPopupContainer:()=>h.current??document.body,droplist:r.jsxs("div",{className:"character_library_sections__category_dropdown",role:"menu","aria-label":t("pages.characters.category_aria"),children:[r.jsx("button",{type:"button",className:`character_library_sections__category_menu_item${m===null?" character_library_sections__category_menu_item_active":""}`,role:"menuitem",onClick:()=>{ie(null),w(!1)},children:t("pages.characters.category_all")}),ce.map(e=>r.jsx("button",{type:"button",className:`character_library_sections__category_menu_item${m===e.id?" character_library_sections__category_menu_item_active":""}`,role:"menuitem",onClick:()=>{ie(e.id),w(!1)},children:e.name},e.id))]}),children:r.jsxs("button",{type:"button",className:"character_library_sections__category","aria-label":t("pages.characters.category_aria"),"aria-expanded":oe,"aria-haspopup":"menu",children:[r.jsx("span",{children:Se}),r.jsx("img",{className:"character_library_sections__category_icon",src:new URL("/assets/ic_arrow_right_gray-DM6GPP4g.png",import.meta.url).href,alt:""})]})})}):null]}),r.jsx("div",{className:"character_library_sections__grid",children:je.map((e,s)=>r.jsx(xe,{variant:"div",item:e,onOpen:be,dragManager:O},String(e.id??s)))}),ee?r.jsx("p",{className:"character_library_sections__loading_more",children:t("common.loading")}):null,P?r.jsx("div",{ref:W,className:"character_library_sections__sentinel","aria-hidden":!0}):null]})]})}function Xe(){return r.jsx("div",{className:"charactersPage",children:r.jsx(ze,{})})}export{ze as CharacterLibrarySections,Xe as default};
//# sourceMappingURL=index-ChLdL4hg.js.map