1import e from"./Cyp6uhbI.js";import{aZ as t,bU as l,ai as a,bV as s,_ as n,Q as o,V as i}from"./ByN6CAfd.js";import{_ as r}from"./CaX_PIQ0.js";import c from"./dx4vZ1cU.js";import{ao as u,ap as d,r as p,w as m,N as v,o as x,J as f,a as g,aj as h,c as b,e as y,al as w,L as _,d as k,E as C,ak as E,g as A,V as T,l as O,P as S,Y as j,S as N,aS as M,af as L,n as $,$ as R,aO as V,f as H,j as U,aq as z,b as I,y as P}from"./Dyr2t_CH.js";import{_ as D}from"./BWqzpTnv.js";import{g as B,l as J,m as W,n as F,e as q,o as Y,p as G,q as X,s as Z,t as K,u as Q}from"./CnFU149h.js";import{h as ee,cP as te,G as le,s as ae,a as se,x as ne,d as oe,ap as ie,cF as re,ar as ce,o as ue,y as de,P as pe,M as me,bv as ve,Z as xe,cE as fe,X as ge}from"./BqsN58w6.js";import{d as he,n as be,p as ye,e as we}from"./CZS4gYna.js";import{_ as _e}from"./C5_PvLqg.js";import{u as ke}from"./CzR3vAcY.js";import{c as Ce}from"./CIRKRglN.js";import"./BDq86xTn.js";import"./BXuSLvKX.js";import"./I-9AOO12.js";import"./DySBSjQy.js";import"./CjPIvYso.js";import"./DFtcI0SJ.js";import"./D3FUuFFo.js";import"./ThZJrTHh.js";import"./BlFILbsH.js";import"./DFSovOcX.js";import"./hcMDYYqe.js";import"./pyVxiBLO.js";import"./DTLJGphe.js";import"./CFCgcG6K.js";const Ee=""+new URL("canvas-bg.CjEpg0bV.webp",import.meta.url).href,Ae={class:"flex flex-col flex-1 min-h-0 gap-4 font-dmsans"},Te={class:"flex gap-2 shrink-0"},Oe={class:"relative flex-1 min-w-0"},Se=["placeholder"],je={key:0,class:"flex flex-col items-center justify-center gap-4 py-16 min-h-[280px]"},Ne={class:"text-sm text-text-3 text-center px-6"},Me=["onClick"],Le={class:"size-10 shrink-0 flex items-center justify-center rounded-xl bg-fill-wd-1 overflow-hidden"},$e=["src"],Re={class:"min-w-0 flex-1 pr-8"},Ve={class:"text-sm font-medium text-text-1 truncate"},He={class:"text-xs text-text-4 mt-0.5"},Ue=["onClick"],ze=["onClick"],Ie={__name:"FlowProjectsModal",props:{show:{type:Boolean,default:!1},showModifiers:{}},emits:u(["select","rename","delete"],["update:show"]),setup(e,{emit:a}){const s=d(e,"show"),n=a,{isDark:o}=ee(),i=O((()=>o.value?"Empty":"EmptyWhite")),c=p(""),u=p([]),R=p(!1),V=p(!1),H=p(1),U=p(0),z=p(null),I=p(null),P=p(null),J=O((()=>u.value.length<U.value));let W=0;const F=e=>{const t={pageNo:e,size:50},l=c.value.trim();return l&&(t.name=l),t},q=async()=>{const e=++W;H.value=1,V.value=!1,R.value=!0;try{const t=await B(F(1));if(e!==W)return;u.value=t.data?.items||[],U.value=t.data?.total||0}finally{e===W&&(R.value=!1)}},Y=async()=>{if(R.value||V.value||!J.value)return;const e=W,t=H.value+1;V.value=!0;try{const l=await B(F(t));if(e!==W)return;u.value=[...u.value,...l.data?.items||[]],U.value=l.data?.total??U.value,H.value=t}finally{e===W&&(V.value=!1)}if(e!==W)return;await $();const l=I.value,a=P.value;if(!l||!a||!J.value)return;const s=l.getBoundingClientRect();a.getBoundingClientRect().top<=s.bottom&&Y()};he(P,(([e])=>{e?.isIntersecting&&Y()}),{root:I});const G=()=>{c.value="",q()};return m(s,(e=>{e?(c.value="",q()):z.value=null})),(e,a)=>{const o=r,d=t,p=M,m=l,O=D;return x(),v(O,{show:s.value,"onUpdate:show":a[4]||(a[4]=e=>s.value=e),title:e.$t("CANVAS_HOME.MY_PROJECTS"),"pc-panel-class":"w-[640px] h-[min(640px,80vh)] max-h-[80vh]","model-props":{maskClosable:!0}},{default:f((()=>[g("div",Ae,[g("div",Te,[g("div",Oe,[h(g("input",{"onUpdate:modelValue":a[0]||(a[0]=e=>C(c)?c.value=e:null),type:"text",maxlength:"50",placeholder:e.$t("CANVAS_HOME.SEARCH_PROJECTS_PLACEHOLDER"),class:_(["h-10 w-full min-w-0 rounded-full bg-fill-btn-1 text-sm text-text-1","placeholder:text-text-4 outline-none border border-transparent focus:border-border-2",k(c)?"pl-4 pr-10":"px-4"]),onKeyup:w(q,["enter"])},null,42,Se),[[E,k(c)]]),k(c)?(x(),b("button",{key:0,type:"button",class:"absolute right-2 top-1/2 flex size-6 -translate-y-1/2 items-center justify-center rounded-full text-text-4 transition-colors hover:bg-fill-btn-2 hover:text-text-2",onClick:G},[A(o,{name:"Close2",class:"size-4"})])):y("",!0)]),g("button",{type:"button",class:"h-10 shrink-0 px-4 rounded-full bg-fill-btn-1 hover:bg-fill-btn-2 flex items-center justify-center gap-1.5 text-sm font-medium text-text-2 transition-colors",onClick:q},[A(d,{class:"size-4"}),g("span",null,T(e.$t("CANVAS_HOME.SEARCH")),1)])]),g("div",{ref_key:"scrollContainer",ref:I,class:"scroll-container flex-1 min-h-0 overflow-y-auto -mx-2 px-2"},[s.value&&!k(R)&&0===k(u).length?(x(),b("div",je,[A(o,{name:k(i),class:"size-24 shrink-0"},null,8,["name"]),g("p",Ne,[k(c).trim()?(x(),b(S,{key:0},[j(T(e.$t("CANVAS_HOME.NO_SEARCH_RESULTS",{query:k(c).trim()})),1)],64)):(x(),b(S,{key:1},[j(T(e.$t("CANVAS_HOME.NO_PROJECTS_YET")),1)],64))])])):y("",!0),(x(!0),b(S,null,N(k(u),(t=>(x(),b("div",{key:t.id,class:_(["group relative flex items-center gap-3 rounded-xl px-3 py-3 cursor-pointer hover:bg-fill-wd-1 transition-colors",{"bg-fill-wd-1":k(z)===t.id}]),onClick:e=>(e=>{n("select",e),s.value=!1})(t)},[g("div",Le,[t.coverUrl?(x(),b("img",{key:0,src:t.coverUrl,class:"size-full object-cover",alt:""},null,8,$e)):(x(),v(o,{key:1,name:"Canvas",class:"size-5 text-text-t-2"}))]),g("div",Re,[g("div",Ve,T(t.name),1),g("div",He,T(e.$t("CANVAS_HOME.UPDATED_ON",{date:k(te)(Number(t.updateTime))})),1)]),A(p,{trigger:"click",placement:"bottom-end","show-arrow":!1,raw:"",class:"rounded-xl overflow-hidden",onClick:a[3]||(a[3]=L((()=>{}),["stop"])),"onUpdate:show":e=>z.value=e?t.id:null},{trigger:f((()=>[g("button",{type:"button",class:_(["absolute z-10 top-1/2 right-5 -translate-y-1/2 size-6 flex items-center justify-center rounded-lg border-0 outline-none bg-fill-ww-10 backdrop-blur-sm text-white/70 opacity-0 pointer-events-none transition-opacity group-hover:opacity-100 group-hover:pointer-events-auto focus:outline-none",{"!opacity-100 !pointer-events-auto":k(z)===t.id}]),onClick:a[1]||(a[1]=L((()=>{}),["stop"]))},[A(o,{name:"IconMore",class:"size-4 text-text-t-2"})],2)])),default:f((()=>[g("div",{class:"flex w-[160px] flex-col items-center gap-1 rounded-xl overflow-hidden border border-border-t-3 bg-fill-ipt-m-1 p-2 backdrop-blur-lg shadow-[0px_4px_8px_-2px_rgba(0,0,0,0.12),0px_8px_24px_0px_rgba(0,0,0,0.16)]",onClick:a[2]||(a[2]=L((()=>{}),["stop"]))},[g("button",{type:"button",class:"px-2.5 h-9 flex items-center gap-2 rounded-lg hover:bg-fill-wd-1 text-sm text-text-1 w-full text-left",onClick:e=>(e=>{n("rename",e)})(t)},[A(o,{name:"Edit3",class:"size-3.5 shrink-0 text-drop-t-1"}
1),g("span",null,T(e.$t("CANVAS_HOME.RENAME")),1)],8,Ue),g("button",{type:"button",class:"px-2.5 h-9 flex items-center gap-2 rounded-lg hover:bg-fill-wd-1 text-sm text-danger-6 w-full text-left",onClick:e=>(e=>{n("delete",e)})(t)},[A(o,{name:"Dele",class:"size-4 shrink-0"}),g("span",null,T(e.$t("TOOLBAR_DELETE")),1)],8,ze)])])),_:2},1032,["onUpdate:show"])],10,Me)))),128)),k(J)?(x(),b("div",{key:1,ref_key:"loadMoreTrigger",ref:P,class:"h-8 flex items-center justify-center"},[k(V)?(x(),v(m,{key:0,class:"size-4 text-text-4"})):y("",!0)],512)):y("",!0)],512)])])),_:1},8,["show","title"])}}},Pe={class:"flex flex-col gap-12 font-dmsans"},De={class:"font-medium text-text-1"},Be={class:"flex items-center justify-end gap-4 pt-2"},Je=["disabled"],We={__name:"DeleteProjectConfirmModal",props:u({projectName:{type:String,default:""},loading:{type:Boolean,default:!1}},{show:{type:Boolean,default:!1},showModifiers:{}}),emits:u(["confirm","cancel"],["update:show"]),setup(e,{emit:t}){const l=d(e,"show"),a=t,s=()=>{a("cancel"),l.value=!1},n=()=>{a("confirm")};return(t,a)=>{const o=R("i18n-t"),i=D;return x(),v(i,{show:l.value,"onUpdate:show":a[0]||(a[0]=e=>l.value=e),title:t.$t("CANVAS_HOME.DELETE_PROJECT_TITLE"),"pc-panel-class":"w-[560px]","model-props":{maskClosable:!0}},{default:f((()=>[g("div",Pe,[A(o,{scope:"global",keypath:"CANVAS_HOME.DELETE_CONFIRM",tag:"p",class:"text-sm leading-6 text-text-2"},{name:f((()=>[g("span",De,T(e.projectName),1)])),_:1}),g("div",Be,[g("button",{type:"button",class:"flex h-10 min-w-[120px] items-center justify-center gap-2 rounded-[20px] bg-fill-btn-1 px-4",onClick:s}
1,T(t.$t("COMMON_BTN_CANCEL")),1),g("button",{type:"button",class:"flex h-10 w-[120px] items-center justify-center gap-2 rounded-[20px] bg-danger-6 px-4 text-white",disabled:e.loading,onClick:n},T(t.$t("TOOLBAR_DELETE")),9,Je)])])])),_:1},8,["show","title"])}}},Fe={class:"flex flex-col gap-12 font-dmsans"},qe={class:"rounded-xl bg-fill-btn-1 px-4 py-3"},Ye={class:"flex items-center gap-3"},Ge=["placeholder"],Xe={class:"shrink-0 text-sm text-text-6"},Ze={class:"flex items-center justify-end gap-4"},Ke={__name:"RenameProjectModal",props:u({projectName:{type:String,default:""}},{show:{type:Boolean,default:!1},showModifiers:{}}),emits:u(["confirm","cancel"],["update:show"]),setup(e,{emit:t}){const l=d(e,"show"),a=e,s=t,n=p("");m(l,(e=>{e&&(n.value=a.projectName||"")}));const o=()=>{s("cancel"),l.value=!1},i=()=>{s("confirm",n.value.trim())};return(e,t)=>{const a=D;return x(),v(a,{show:l.value,"onUpdate:show":t[1]||(t[1]=e=>l.value=e),title:e.$t("CANVAS_HOME.RENAME_PROJECT_TITLE"),"pc-panel-class":"w-[560px]","model-props":{maskClosable:!0}},{default:f((()=>[g("div",Fe,[g("div",qe,[g("div",Ye,[h(g("input",{"onUpdate:modelValue":t[0]||(t[0]=e=>C(n)?n.value=e:null),type:"text",maxlength:"45",class:"h-8 min-w-0 flex-1 border-0 bg-transparent text-text-1 outline-none",placeholder:e.$t("CANVAS_HOME.PROJECT_NAME_PLACEHOLDER")},null,8,Ge),[[E,k(n)]]),g("span",Xe,T(k(n).length)+"/45",1)])]),g("div",Ze,[g("button",{type:"button",class:"flex h-10 min-w-[120px] items-center justify-center gap-2 rounded-[20px] bg-fill-btn-1 px-4 text-text-1",onClick:o}
1,T(e.$t("COMMON_BTN_CANCEL")),1),g("button",{type:"button",class:"flex h-10 min-w-[120px] items-center justify-center gap-2 rounded-[20px] bg-primary-6 px-4 text-white",onClick:i},T(e.$t("CANVAS_HOME.RENAME")),1)])])])),_:1},8,["show","title"])}}},Qe={class:"w-[267px] flex flex-col gap-2"},et={class:"group relative flex h-[178px] items-center justify-center overflow-hidden rounded-2xl border border-border-2 bg-fill-ww-10 transition-colors hover:bg-fill-dd-1"},tt=["src","alt"],lt={key:3,class:_(["pointer-events-none absolute inset-0 z-[1] rounded-2xl","bg-fill-dd-4","opacity-0 transition-opacity group-hover:opacity-100"])},at={class:"pointer-events-none absolute inset-0 z-[2] flex items-end justify-center pb-4 opacity-0 transition-opacity group-hover:opacity-100"},st={class:"line-clamp-2 text-sm font-medium leading-[22px] text-text-t-2"},nt={__name:"TemplatesItem",props:{item:{type:Object,default:()=>({})},likeAnimatingId:{type:String,default:""}},emits:["likeTemplate","toCanvasTemplate"],setup(e,{emit:t}){const l=t;return(t,n)=>{const o=r,i=_e,c=a,u=s,d=V("login-check");return x(),b("div",Qe,[g("div",et,[e.item.coverUrl?(x(),b(S,{key:1},[e.item.coverVideoUrl?(x(),v(i,{key:0,src:e.item.coverVideoUrl,poster:e.item.coverUrl,class:"pointer-events-none absolute inset-0 h-full w-full rounded-2xl object-cover"},null,8,["src","poster"])):(x(),b("img",{key:1,src:e.item.coverUrl,alt:e.item.name,loading:"lazy",class:"pointer-events-none absolute inset-0 h-full w-full rounded-2xl object-cover"},null,8,tt))],64)):(x(),v(o,{key:0,name:"Canvas",class:"pointer-events-none absolute inset-0 m-auto h-8 w-8 text-text-t-2"})),null!=e.item.likeCount?(x(),b("div",{key:2,class:"absolute right-2 top-2 z-[3] flex cursor-pointer items-center gap-1 rounded-full bg-black/40 px-2.5 py-1 text-xs font-medium text-white backdrop-blur-sm",onClick:n[0]||(n[0]=L((e=>l("likeTemplate")),["stop"]))},[g("span",{class:_(["inline-flex",{"template-like-pop":e.likeAnimatingId===e.item.id}])},[e.item.liked?(x(),v(c,{key:0,class:"size-3.5 shrink-0"})):(x(),v(u,{key:1,class:"size-3.5 shrink-0 text-white"}))],2),g("span",null,T(Number(e.item.likeCount).toLocaleString("en-US")),1)])):y("",!0),e.item.coverUrl?(x(),b("div",lt)):y("",!0),g("div",at,[h((x(),b("div",{class:"pointer-events-none flex h-8 cursor-pointer items-center gap-1.5 rounded-full bg-fill-btn-13 px-4 text-xs font-medium text-text-btn-13 group-hover:pointer-events-auto",onClick:n[1]||(n[1]=e=>l("toCanvasTemplate"))},[A(o,{name:"Canvas",class:"h-4 w-4"}),g("span",null,T(t.$t("CANVAS_HOME.USE_TEMPLATE")),1)])),[[d]])])]),g("p",st,T(e.item.title),1)])}}},ot={key:0,class:"flex flex-col gap-6"},it={class:"text-xl font-semibold leading-7 text-text-1"},rt={class:"template-toolbar"},ct={key:0,class:"template-category-wrap"},ut=["onClick"],dt={class:"template-search"},pt=["placeholder"],mt={key:0},vt={class:"flex flex-wrap gap-4"},xt={class:"space-y-6"},ft={class:"text-base text-text-1 font-semibold mb-4"},gt={class:"flex flex-wrap gap-4"},ht={key:1,class:"flex flex-col items-center justify-center gap-4 py-16"},bt={class:"px-6 text-center text-sm text-text-3"},yt=n({__name:"CanvasTemplatesSection",setup(e){const{t:l,locale:a}=le(),{isMobile:s}=ae(se()),n=ne(),{isLogin:c,openLoginModal:u}=oe(),{isDark:d}=ee(),{checkPermission:f}=ie(),w=ke(),j=O((()=>d.value?"Empty":"EmptyWhite")),M=p([]),R=p([]),V=p(null),I=p(""),P=p(""),D=p([]);let B,Z,K=0;const Q=p(null),te=new Set,pe=p(null),me=p(!1),ve=p(!1),xe=O((()=>M.value.length>0||Ee.value.length>0)),fe=O((()=>!I.value.trim()&&!V.value)),ge=()=>{const e=pe.value;if(!e)return me.value=!1,void(ve.value=!1);me.value=e.scrollLeft>1,ve.value=e.scrollLeft+e.clientWidth<e.scrollWidth-1},he=(e=1)=>{pe.value?.scrollBy({left:200*e,behavior:"smooth"})};be(pe,ge);const ye=e=>{if(!e)return"";const t=e.nameI18n?.[a.value]||e.nameEn||e.nameCn||"";return String(t).trim()},we=O((()=>{if(null===V.value)return l("APPS.TABS.ALL");const e=R.value.find((e=>e.id===V.value));return ye(e)||l("APPS.TABS.ALL")})),_e=O((()=>!!P.value&&!!I.value.trim()&&0===M.value.length)),Ce=async e=>{const t=++K,l=I.value.trim(),a=c.value?await q({categoryId:e,title:l||void 0}):await Y({categoryId:e,title:l||void 0});t===K&&(M.value=a.data?.items||[],P.value=l,l||(D.value=M.value))},Ee=p([]),Ae=async()=>{const e=c.value?J:W,{data:t,status:l}=await e();0===l&&(Ee.value=t?.items||[])},Te=()=>{clearTimeout(B),B=void 0};m(I,(e=>{if(!e.trim())return Te(),P.value="",D.value.length&&(M.value=D.value),void Ce(V.value);clearTimeout(B),B=setTimeout((()=>{B=void 0,Ce(V.value),trackEvent("canvas_template_search_click",{el:`search_keyword=${I.value.slice(0,100)}`})}),300)}));const Oe=()=>{I.value=""},Se=async()=>{const e=await F();R.value=e.data?.items||[],await $(),ge()},je=(e,t)=>{V.value=e,D.value=[],(e=>{const t=pe.value;t&&e&&t.scrollTo({left:e.offsetLeft-(t.clientWidth-e.offsetWidth)/2,behavior:"smooth"})})(t?.currentTarget),fe.value?Ae():Ce(e);const l=R.value.find((t=>t.id===e));l&&trackEvent("canvas_template_click",{el:`category_id=${l.id}&category_name=${l.nameEn}`})},Ne=e=>{trackEvent("canvas_template_cover_click",{el:`template_id=${e.id}&template_name=${e.title}`})},Me=async e=>{const t=await G({templateId:e.id});if(t.status===re.FLOW_EXCEED_LIMIT){await f(ce.CREATE_FLOW_LIMIT,w.totalFlowCount+1)&&trackEvent("canvas_paywall_modal_view",{el:"source_surface=canvas_home&trigger_type=canvas_project_limit&node_type=null"})}else c.value&&(l=t.data.id,de(n(`/canvas/${l}`)));var l},Le=async e=>{if(c.value){if(!te.has(e.id)){te.add(e.id);try{const l=await X({templateId:e.id});if(0!==l.status)return void ue.error(l.message);const{liked:a,likeCount:s}=l.data||{};((e,{liked:t,likeCount:l})=>{const a=Number(l),s=l=>
1{l.id===e&&(l.liked=t,Number.isNaN(a)||(l.likeCount=a))};M.value.forEach(s),D.value.forEach(s),Ee.value.forEach((e=>{e.templates.forEach(s)}))})(e.id,{liked:a,likeCount:s}),a&&(t=e.id,Q.value=t,clearTimeout(Z),Z=setTimeout((()=>{Q.value===t&&(Q.value=null),Z=void 0}),450))}finally{te.delete(e.id)}var t}}else u()};return H((()=>{(async()=>{await Promise.all([Ae(),Se()])})()})),U((()=>{Te(),clearTimeout(Z)})),(e,l)=>{const a=o,n=i,c=t,u=r;return k(M).length||k(R).length?(x(),b("div",ot,[g("h2",it,T(e.$t("CANVAS_HOME.TEMPLATES")),1),g("div",rt,[k(R).length?(x(),b("div",ct,[k(me)&&!k(s)?(x(),b("button",{key:0,type:"button",class:"template-category-scroll","aria-label":"Scroll categories left",onClick:l[0]||(l[0]=e=>he(-1))},[A(a,{class:"size-4"})])):y("",!0),g("div",{ref_key:"categoryListRef",ref:pe,class:"template-category-list",onScroll:ge},[g("button",{type:"button",class:_(["template-category-tag",{"template-category-tag--active":null===k(V)}]),onClick:l[1]||(l[1]=e=>je(null,e))},T(e.$t("APPS.TABS.ALL")),3),(x(!0),b(S,null,N(k(R),(e=>(x(),b("button",{key:e.id,type:"button",class:_(["template-category-tag",{"template-category-tag--active":k(V)===e.id}]),onClick:t=>je(e.id,t)},T(ye(e)),11,ut)))),128))],544),k(ve)&&!k(s)?(x(),b("button",{key:1,type:"button",class:"template-category-scroll","aria-label":"Scroll categories right",onClick:l[2]||(l[2]=e=>he(1))},[A(n,{class:"size-4"})])):y("",!0)])):y("",!0),g("div",dt,[A(c,{class:"template-search__icon"}),h(g("input",{"onUpdate:modelValue":l[3]||(l[3]=e=>C(I)?I.value=e:null),type:"text",maxlength:"50",class:_(["template-search__input",{"template-search__input--has-clear":k(I)}]),placeholder:e.$t("CANVAS_HOME.SEARCH_TEMPLATES_PLACEHOLDER")},null,10,pt),[[E,k(I)]]),k(I)?(x(),b("button",{key:0,type:"button",class:"template-search__clear",onMousedown:L(Oe,["prevent"])},[A(u,{name:"Close2",class:"size-4"})],32)):y("",!0)])]),k(xe)?(x(),b("div",mt,[h(g("div",vt,[(x(!0),b(S,null,N(k(M),(e=>(x(),v(nt,{key:e.id,item:e,onClick:t=>Ne(e),onLikeTemplate:t=>Le(e),onToCanvasTemplate:t=>Me(e)},null,8,["item","onClick","onLikeTemplate","onToCanvasTemplate"])))),128))],512),[[z,!k(fe)]]),h(g("div",xt,[(x(!0),b(S,null,N(k(Ee),(e=>(x(),b("div",{key:e.id},[g("div",ft,T(e.nameEn),1),g("div",gt,[(x(!0),b(S,null,N(e.templates,(e=>(x(),v(nt,{key:e.id,item:e,likeAnimatingId:k(Q),onClick:t=>Ne(e),onLikeTemplate:t=>Le(e),onToCanvasTemplate:t=>Me(e)},null,8,["item","likeAnimatingId","onClick","onLikeTemplate","onToCanvasTemplate"])))),128))])])))),128))],512),[[z,k(fe)]])])):k(_e)?(x(),b("div",ht,[A(u,{name:k(j),class:"size-24 shrink-0"},null,8,["name"]),g("p",bt,T(e.$t("CANVAS_HOME.NO_TEMPLATE_SEARCH_RESULTS",{category:k(we),query:k(I).trim()})),1)])):y("",!0)])):y("",!0)}}},[["__scopeId","data-v-e65da3d9"]]),wt={class:_(["relative isolate min-h-app-dvh overflow-hidden","font-dmsans text-text-1"])},_t={class:"relative z-20 flex h-[74px] justify-end p-4"},kt={class:"relative z-10 px-4 pb-8 pt-4"},Ct={class:"mx-auto flex max-w-[1400px] flex-col items-center gap-14"},Et={class:"relative z-10 flex flex-col items-center gap-2 text-center"},At={class:"text-[28px] font-semibold leading-9 text-text-1"},Tt={class:"text-base text-text-t-2"},Ot={class:"flex w-full flex-col gap-12"},St={class:"flex flex-col gap-6"},jt={class:"flex items-center justify-between"},Nt={class:"text-xl font-semibold leading-7 text-text-1"},Mt={class:_(["group flex h-[178px] cursor-pointer items-center justify-center","rounded-2xl border border-border-2 bg-fill-ww-10","transition-colors hover:bg-fill-ww-11"])},Lt={key:1,class:_(["flex h-8 w-8 items-center justify-center rounded-full","bg-fill-btn-13 backdrop-blur-sm","transition-transform group-hover:scale-110"])},$t={class:"flex cursor-pointer flex-col gap-1"},Rt={class:"text-sm font-medium text-text-t-2"},Vt={class:"text-xs text-text-4"},Ht=["onClick"],Ut=["src"],zt=["onClick"],It=["onClick"],Pt=["onClick"],Dt={class:"flex flex-col gap-1"},Bt={class:"truncate text-sm font-medium text-text-t-2"},Jt={class:"text-xs text-text-4"},Wt={class:"flex flex-col gap-6"},Ft={class:"text-xl font-semibold leading-7 text-text-1"},qt={class:"flex flex-wrap gap-4"},Yt=["onClick"],Gt=["src"],Xt={class:_(["line-clamp-2 text-sm font-medium leading-[22px]","text-text-t-2"])},Zt={__name:"index",setup(t){const{t:a}=le(),s=ne(),n=ke(),{createFlow:o,updateTotalFlowCount:i}=n,{isLogin:u}=oe();pe({title:()=>a("CANVAS_HOME.SEO.TITLE"),ogTitle:()=>a("CANVAS_HOME.SEO.TITLE"),description:()=>a("CANVAS_HOME.SEO.DESCRIPTION"),ogDescription:()=>a("CANVAS_HOME.SEO.DESCRIPTION")}),me({link:[{rel:"canonical",href:`https://www.piclumen.com${s("/canvas/")}`}]});const d=p(null),{width:w}=ye(d),E=O((()=>{const e=w.value;return e?Math.max(1,Math.floor((e+16)/283)):5})),j=O((()=>2*E.value-1)),R=O((()=>D.value.slice(0,Math.max(0,j.value)))),U=O((()=>Math.max(0,j.value))),z=ve("authToken",{maxAge:31536e3}),D=p([]),J=p(!0),W=p(!1),F=p(!1),q=p(null),Y=p(null),G=P({target:null,renameOpen:!1,deleteOpen:!1,deleting:!1,settingCover:!1}),X=O((()=>G.target?.name||""));let ee=null;const ae=()=>{ee&&clearTimeout(ee),ee=setTimeout((()=>{G.renameOpen||G.deleteOpen||(G.target=null),ee=null}),220)},se=()=>{G.renameOpen=!1,ae()},ie=()=>{G.deleteOpen=!1,ae()},re=we((async()=>
1{if(!W.value){trackEvent("canvas_new_project_click",{el:"entry_position=my_projects"}),W.value=!0;try{const e=await o();if(!e)return;const t=await K();if(0!==t.status)return;n.setShowGuide(!Boolean(t.data)),ce(e)}finally{W.value=!1}}}),500,!1,!0),ce=async e=>{de(s({path:`/canvas/${e}`}))},ue=e=>{ce(e.id)},he=async()=>{const e=F.value;await Se(),e&&(F.value=!1,await $(),F.value=!0)},be=e=>{q.value=null,G.target=e,G.renameOpen=!0},_e=async e=>{const t=e.target.files?.[0];e.target.value="";const l=G.target;if(t&&l){G.settingCover=!0;try{const[e]=await xe([{file:t,name:`${Date.now()}.webp`}],{autoCompress:!0,compressOptions:fe});if(e?.status!==ge.SUCCESS)return;const a=e.url,s=await Z({id:l.id,name:l.name,coverUrl:a});if(0!==s?.status)return;((e,t)=>{const l=D.value.findIndex((t=>t.id===e));-1!==l&&(D.value[l]={...D.value[l],...t})})(l.id,{coverUrl:a})}finally{G.settingCover=!1,G.target=null}}},Ae=async e=>{const t=G.target;if(!t)return;const l=e.trim();if(!l||l===t.name)return void se();const a=await Z({id:t.id,name:l});0===a?.status&&(await he(),se())},Te=e=>{q.value=null,G.target=e,G.deleteOpen=!0},Oe=async()=>{if(G.target){G.deleting=!0;try{await Q({projectId:G.target.id}),await he()}finally{G.deleting=!1,ie()}}},Se=async()=>{J.value=!0;try{if(u.value){const e=await B({pageNo:1,size:9});D.value=e.data?.items||[],i(e.data?.total||0)}else D.value=[]}finally{J.value=!1}},je=O((()=>Ce.map((e=>({...e,desc:a(`CANVAS_TUTORIALS.${e.type}`)})))));return H((()=>{trackEvent("canvas_home_view",{el:"source_surface=canvas_home"}),m((()=>z.value),(()=>{F.value=!1,q.value=null,Se()}),{immediate:!0})})),(t,a)=>{const n=e,o=l,i=r,p=M,m=c,w=V("login-check");return x(),b(S,null,[g("div",wt,[a[9]||(a[9]=I('<div class="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[260px] overflow-hidden" data-v-6b76ec70><img src="'+Ee+'" class="absolute left-0 top-0 h-full w-full object-cover" data-v-6b76ec70><div class="absolute inset-0 bg-gradient-to-b from-fill-gradient-2 to-fill-gradient-1" data-v-6b76ec70></div><div class="absolute inset-y-0 left-0 w-[290px] bg-gradient-to-r from-fill-gradient-1 to-transparent" data-v-6b76ec70></div><div class="absolute inset-y-0 right-0 w-[290px] bg-gradient-to-l from-fill-gradient-1 to-transparent" data-v-6b76ec70></div></div>',1)),g("div",_t,[A(n)]),g("div",kt,[g("div",Ct,[g("div",Et,[g("h1",At,T(t.$t("CANVAS_HOME.TITLE")),1),g("p",Tt,T(t.$t("CANVAS_HOME.SUBTITLE")),1)]),g("div",Ot,[g("div",St,[g("div",jt,[g("h2",Nt,T(t.$t("CANVAS_HOME.MY_PROJECTS")),1),k(u)?(x(),b("div",{key:0,class:_(["flex h-8 cursor-pointer items-center justify-center gap-1.5","rounded-2xl bg-fill-btn-1 px-3","text-center font-dmsans text-xs font-medium leading-[18px] text-text-2","transition-colors hover:bg-fill-btn-2"]),onClick:a[0]||(a[0]=e=>F.value=!0)},T(t.$t("CANVAS_HOME.VIEW_ALL_PROJECTS")),1)):y("",!0)]),g("div",{ref_key:"projectGridRef",ref:d,class:"flex flex-wrap gap-4"},[h((x(),b("div",{class:"flex w-[267px] flex-col gap-2",onClick:a[1]||(a[1]=(...e)=>k(re)&&k(re)(...e))},[g("div",Mt,[k(W)?(x(),v(o,{key:0,class:"rotating size-8"})):(x(),b("div",Lt,[A(i,{name:"Add",class:"h-4 w-4 text-text-btn-13"})]))]),g("div",$t,[g("div",Rt,T(t.$t("CANVAS_HOME.NEW_PROJECT")),1),g("div",Vt,T(t.$t("CANVAS_HOME.NEW_PROJECT_DESC")),1)])])),[[w]]),k(J)?(x(!0),b(S,{key:0},N(k(U),(e=>(x(),b("div",{key:`project-skeleton-${e}`,class:"flex w-[267px] flex-col gap-2"},[...a[8]||(a[8]=[g("div",{class:"h-[178px] animate-pulse rounded-2xl bg-fill-ww-10"},null,-1),g("div",{class:"h-4 w-3/5 animate-pulse rounded bg-fill-ww-10"},null,-1),g("div",{class:"h-3 w-2/5 animate-pulse rounded bg-fill-ww-10"},null,-1)])])))),128)):(x(!0),b(S,{key:1},N(k(R),(e=>(x(),b("div",{key:e.id,class:"flex w-[267px] flex-col gap-2"},[g("div",{onClick:t=>ce(e?.id),class:_(["group relative flex h-[178px] cursor-pointer","items-center justify-center overflow-hidden","rounded-2xl border border-border-2 bg-fill-ww-10","transition-colors hover:bg-fill-dd-1"])},[e?.coverUrl?(x(),b("img",{key:1,src:e?.coverUrl,class:_(["pointer-events-none absolute inset-0","h-full w-full rounded-2xl object-cover"])},null,8,Ut)):(x(),v(i,{key:0,name:"Canvas",class:"h-8 w-8 text-text-t-2"})),e?.coverUrl?(x(),b("div",{key:2,class:_(["pointer-events-none absolute inset-0 z-[1] rounded-2xl","bg-fill-dd-4","opacity-0 transition-opacity",k(q)===e.id?"opacity-100":"group-hover:opacity-100"])},null,2)):y("",!0),A(p,{trigger:"click",placement:"bottom",show:k(q)===e.id,"show-arrow":!1,raw:"",class:"overflow-hidden rounded-xl",onClick:a[4]||(a[4]=L((()=>{}),["stop"])),"onUpdate:show":t=>q.value=t?e.id:null},{trigger:f((()=>[g("button",{type:"button",class:_(["absolute top-2 right-2 z-10 size-6","flex items-center justify-center rounded-lg","border-0 bg-fill-ww-10 outline-none backdrop-blur-sm","pointer-events-none opacity-0 transition-opacity","group-hover:pointer-events-auto group-hover:opacity-100",{"!pointer-events-auto !opacity-100":k(q)===e.id}]),onClick:a[2]||(a[2]=L((()=>{}),["stop"]))},[A(i,{name:"IconMore",class:"size-4 text-text-t-2"})],2)])),default:f((()=>[g("div",{class:_(["flex w-[160px] flex-col items-center gap-1 overflow-hidden","rounded-xl border border-border-t-3 bg-fill-ipt-m-1 p-2","shadow-[0px_4px_8px_-2px_rgba(0,0,0,0.12),0px_8px_24px_0px_rgba(0,0,0,0.16)]","backdrop-blur-lg"]),onClick:a[3]||(a[3]=L((()=>{}),["stop"]))},[g("button",{type:"button",class:_(["flex h-9 w-full items-center gap-2 rounded-lg px-2.5","text-left text-sm text-drop-t-1","hover:bg-fill-wd-3"]),onClick:t=>be(e)},[A(i,{name:"Edit3",class:"text-drop-t-1 size-3.5 shrink-0"}
1),g("span",null,T(t.$t("CANVAS_HOME.RENAME")),1)],8,zt),g("button",{type:"button",class:_(["flex h-9 w-full items-center gap-2 rounded-lg px-2.5","text-left text-sm text-drop-t-1","hover:bg-fill-wd-3"]),onClick:t=>{return l=e,void(G.settingCover||(G.target=l,q.value=null,$((()=>{Y.value?.click()}))));var l}},[A(i,{name:"SetCover",class:"text-drop-t-1 size-3.5 shrink-0"}),g("span",null,T(t.$t("CANVAS_HOME.SET_COVER")),1)],8,It),g("button",{type:"button",class:_(["flex h-9 w-full items-center gap-2 rounded-lg px-2.5","text-left text-sm text-danger-6","hover:bg-fill-wd-3"]),onClick:t=>Te(e)},[A(i,{name:"Dele",class:"size-4 shrink-0"}),g("span",null,T(t.$t("TOOLBAR_DELETE")),1)],8,Pt)])])),_:2},1032,["show","onUpdate:show"])],8,Ht),g("div",Dt,[g("div",Bt,T(e.name),1),g("div",Jt,T(t.$t("CANVAS_HOME.UPDATED_ON",{date:k(te)(Number(e.updateTime))})),1)])])))),128))],512)]),A(yt),g("div",Wt,[g("h2",Ft,T(t.$t("CANVAS_HOME.TUTORIALS")),1),g("div",qt,[(x(!0),b(S,null,N(k(je),((e,t)=>(x(),b("div",{key:t,class:"flex w-[267px] flex-col gap-2"},[g("div",{class:"relative aspect-video overflow-hidden rounded-2xl border border-border-1 hover:cursor-pointer",onClick:t=>{return l=e.slug,trackEvent("canvas_home_tutorial_click",{el:`source_surface=canvas_home&tutorial_title=${l}`}),void de(s(`/canvas/tutorials/${l}`));var l}},[g("img",{src:e.image,class:"absolute inset-0 h-full w-full object-cover"},null,8,Gt)],8,Yt),g("p",Xt,T(e.desc),1)])))),128))])])])])])]),A(m),A(Ie,{show:k(F),"onUpdate:show":a[5]||(a[5]=e=>C(F)?F.value=e:null),onSelect:ue,onRename:be,onDelete:Te},null,8,["show"]),A(Ke,{show:k(G).renameOpen,"onUpdate:show":a[6]||(a[6]=e=>k(G).renameOpen=e),"project-name":k(X),onCancel:se,onConfirm:Ae},null,8,["show","project-name"]),A(We,{show:k(G).deleteOpen,"onUpdate:show":a[7]||(a[7]=e=>k(G).deleteOpen=e),"project-name":k(X),loading:k(G).deleting,onCancel:ie,onConfirm:Oe},null,8,["show","project-name","loading"]),g("input",{ref_key:"coverFileInputRef",ref:Y,type:"file",accept:".png,.jpeg,.jpg,.webp",class:"hidden",onChange:_e},null,544)],64)}}},Kt=n(Zt,[["__scopeId","data-v-6b76ec70"]]);export{Kt as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.