import{k as we,j as p,t as Ce,h as C,m as f,n as Y,p as t,f as S,i as g,v as k,A as R,z as Se,y as Z,x,s as ke,F as z}from"./web.Os7kOAdY.js";import{c as ze}from"./clipboard.BNxbz_oK.js";import{g as ee,t as Re}from"./i18n-runtime._BAkvU05.js";var Te=R(`<div style=display:flex;flex-direction:column;gap:20px><div class=mobile-stack-grid style="display:grid;grid-template-columns:1fr 1fr;gap:16px"><fieldset style="border:1px solid #333;padding:12px;border-radius:8px"><legend style=color:#aaa;font-size:13px></legend><div style=display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px></div><div style=display:flex;gap:6px><button style="padding:4px 10px;background:#2d5a27;color:#fff;border:none;border-radius:4px;cursor:pointer"></button><button style="padding:4px 10px;background:#5a2727;color:#fff;border:none;border-radius:4px;cursor:pointer"></button></div></fieldset><fieldset style="border:1px solid #333;padding:12px;border-radius:8px"><legend style=color:#aaa;font-size:13px></legend><div style=display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px></div><div style=display:flex;gap:6px><button style="padding:4px 10px;background:#2d5a27;color:#fff;border:none;border-radius:4px;cursor:pointer"></button><button style="padding:4px 10px;background:#5a2727;color:#fff;border:none;border-radius:4px;cursor:pointer"></button></div></fieldset></div><div class=mobile-control-row style=display:flex;gap:16px;align-items:center><label style=color:#ccc;font-size:13px><!$><!/><input type=number min=0 max=100 style="width:60px;margin-left:6px;padding:4px 6px;background:#1a1a2e;color:#fff;border:1px solid #444;border-radius:4px">px</label><label style=color:#ccc;font-size:13px><!$><!/><input type=number min=0 max=100 style="width:60px;margin-left:6px;padding:4px 6px;background:#1a1a2e;color:#fff;border:1px solid #444;border-radius:4px">px</label></div><fieldset style="border:1px solid #333;padding:12px;border-radius:8px"><legend style=color:#aaa;font-size:13px></legend><textarea rows=4 placeholder="header header header
sidebar main main
footer footer footer"style="width:100%;background:#1a1a2e;color:#fff;border:1px solid #444;border-radius:4px;padding:8px;font-family:monospace;font-size:13px;resize:vertical"></textarea></fieldset><div style="border:1px solid #333;border-radius:8px;padding:16px;background:#0d0d1a"><p style="color:#aaa;font-size:12px;margin:0 0 10px"></p><div style=min-height:200px></div></div><div style=position:relative><pre style=background:#111;color:#0f0;padding:14px;border-radius:8px;font-size:13px;overflow:auto;margin:0></pre><button style="position:absolute;top:8px;right:8px;padding:4px 10px;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px">`),te=R('<input type=text style="width:60px;padding:4px 6px;background:#1a1a2e;color:#fff;border:1px solid #444;border-radius:4px;font-size:13px">'),je=R("<div style=border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:bold;font-size:14px;min-height:40px>");function Ge(){const[re,T]=p(ee(),{equals:!1}),o=r=>Re(r,re());Ce(()=>{const r=n=>{const i=n.detail?.locale;i&&T(i)};window.addEventListener("taitan:locale-change",r),T(ee()),ke(()=>window.removeEventListener("taitan:locale-change",r))});const[d,u]=p(["1fr","1fr","1fr"]),[s,b]=p(["1fr","1fr","1fr"]),[$,ie]=p("8"),[m,le]=p("8"),[c,oe]=p(""),[j,E]=p(!1),ne=C(()=>d().length*s().length),ae=C(()=>({display:"grid","grid-template-rows":d().join(" "),"grid-template-columns":s().join(" "),"row-gap":`${$()}px`,"column-gap":`${m()}px`,...c().trim()?{"grid-template-areas":c().trim()}:{}})),L=C(()=>{let r=`.container {
  display: grid;
  grid-template-rows: ${d().join(" ")};
  grid-template-columns: ${s().join(" ")};
  gap: ${$()}px ${m()}px;`;return c().trim()&&(r+=`
  grid-template-areas:
    ${c().trim().split(`
`).map(n=>`"${n.trim()}"`).join(`
    `)};`),r+=`
}`,r});function de(){u([...d(),"1fr"])}function se(){d().length>1&&u(d().slice(0,-1))}function pe(){b([...s(),"1fr"])}function ce(){s().length>1&&b(s().slice(0,-1))}function xe(r,n){const i=[...d()];i[r]=n,u(i)}function fe(r,n){const i=[...s()];i[r]=n,b(i)}async function ge(){await ze(L()),E(!0),setTimeout(()=>E(!1),1500)}return(()=>{var r=f(Te),n=r.firstChild,i=n.firstChild,A=i.firstChild,G=A.nextSibling,ue=G.nextSibling,y=ue.firstChild,M=y.nextSibling,be=i.nextSibling,F=be.firstChild,N=F.nextSibling,$e=N.nextSibling,v=$e.firstChild,P=v.nextSibling,q=n.nextSibling,h=q.firstChild,me=h.firstChild,[H,ye]=Y(me.nextSibling),B=H.nextSibling,D=h.nextSibling,ve=D.firstChild,[I,he]=Y(ve.nextSibling),J=I.nextSibling,K=q.nextSibling,O=K.firstChild,Q=O.nextSibling,U=K.nextSibling,V=U.firstChild,W=V.nextSibling,_e=U.nextSibling,X=_e.firstChild,_=X.nextSibling;return t(A,()=>o("行 (Rows)")),t(G,S(z,{get each(){return d()},children:(e,l)=>(()=>{var a=f(te);return a.$$input=w=>xe(l(),w.currentTarget.value),x(a,"value",e),k(),a})()})),y.$$click=de,t(y,()=>o("+ 添加行")),M.$$click=se,t(M,()=>o("- 删除行")),t(F,()=>o("列 (Columns)")),t(N,S(z,{get each(){return s()},children:(e,l)=>(()=>{var a=f(te);return a.$$input=w=>fe(l(),w.currentTarget.value),x(a,"value",e),k(),a})()})),v.$$click=pe,t(v,()=>o("+ 添加列")),P.$$click=ce,t(P,()=>o("- 删除列")),t(h,()=>o("行间距 (row-gap):"),H,ye),B.$$input=e=>ie(e.currentTarget.value),t(D,()=>o("列间距 (column-gap):"),I,he),J.$$input=e=>le(e.currentTarget.value),t(O,()=>o("命名区域 (grid-template-areas) — 可选")),Q.$$input=e=>oe(e.currentTarget.value),t(V,()=>o("实时预览")),t(W,S(z,{get each(){return Array.from({length:ne()},(e,l)=>l+1)},children:e=>(()=>{var l=f(je);return Z(l,"background",`hsl(${e*47%360}, 55%, 35%)`),t(l,e),l})()})),t(X,L),_.$$click=ge,t(_,()=>j()?"已复制":"复制"),g(e=>{var l={...ae()},a=j()?"#2d5a27":"#333";return e.e=Se(W,l,e.e),a!==e.t&&Z(_,"background",e.t=a),e},{e:void 0,t:void 0}),g(()=>x(B,"value",$())),g(()=>x(J,"value",m())),g(()=>x(Q,"value",c())),k(),r})()}we(["click","input"]);export{Ge as default};
