1 line
17 KiB
JavaScript
1 line
17 KiB
JavaScript
import{r as e}from"./rolldown-runtime-C60lm6uB.js";import{i as t,r as n}from"./framework-BgSIrAUN.js";var r=e(n(),1),i=Object.entries({A:`#FAF4C8 #FFFFD5 #FEFF8B #FBED56 #F4D738 #FEAC4C #FE8B4C #FFDA45 #FF995B #F77C31 #FFDD99 #FE9F72 #FFC365 #FD543D #FFF365 #FFFF9F #FFE36E #FEBE7D #FD7C72 #FFD568 #FFE395 #F4F57D #E6C9B7 #F7F8A2 #FFD67D #FFC830`,B:`#E6EE31 #63F347 #9EF780 #5DE035 #35E352 #65E2A6 #3DAF80 #1C9C4F #27523A #95D3C2 #5D722A #166F41 #CAEB7B #ADE946 #2E5132 #C5ED9C #9BB13A #E6EE49 #24B88C #C2F0CC #156A6B #0B3C43 #303A21 #EEFCA5 #4E846D #8D7A35 #CCE1AF #9EE5B9 #C5E254 #E2FCB1 #B0E792 #9CAB5A`,C:`#E8FFE7 #A9F9FC #A0E2FB #41CCFF #01ACEB #50AAF0 #3677D2 #0F54C0 #324BCA #3EBCE2 #28DDDE #1C334D #CDE8FF #D5FDFF #22C4C6 #1557A8 #04D1F6 #1D3344 #1887A2 #176DAF #BEDDFF #67B4BE #C8E2FF #7CC4FF #A9E5E5 #3CAED8 #D3DFFA #BBCFED #34488E`,D:`#AEB4F2 #858EDD #2F54AF #182A84 #B843C5 #AC7BDE #8854B3 #E2D3FF #D5B9F8 #361851 #B9BAE1 #DE9AD4 #B90095 #8B279B #2F1F90 #E3E1EE #C4D4F6 #A45EC7 #D8C3D7 #9C32B2 #9A009B #333A95 #EBDAFC #7786E5 #494FC7 #DFC2F8`,E:`#FDD3CC #FEC0DF #FFB7E7 #E8649E #F551A2 #F13D74 #C63478 #FFDBE9 #E970CC #D33793 #FCDDD2 #F78FC3 #B5006D #FFD1BA #F8C7C9 #FFF3EB #FFE2EA #FFC7DB #FEBAD5 #D8C7D1 #BD9DA1 #B785A1 #937A8D #E1BCE8`,F:`#FD957B #FC3D46 #F74941 #FC283C #E7002F #943630 #971937 #BC0028 #E2677A #8A4526 #5A2121 #FD4E6A #F35744 #FFA9AD #D30022 #FEC2A6 #E69C79 #D37C46 #C1444A #CD9391 #F7B4C6 #FDC0D0 #F67E66 #E698AA #E54B4F`,G:`#FFE2CE #FFC4AA #F4C3A5 #E1B383 #EDB045 #E99C17 #9D5B3E #753832 #E6B483 #D98C39 #E0C593 #FFC890 #B7714A #8D614C #FCF9E0 #F2D9BA #78524B #FFE4CC #E07935 #A94023 #B88558`,H:`#FDFBFF #FEFFFF #B6B1BA #89858C #48464E #2F2B2F #000000 #E7D6DB #EDEDED #EEE9EA #CECDD5 #FFF5ED #F5ECD2 #CFD7D3 #98A6A8 #1D1414 #F1EDED #FFFDF0 #F6EFE2 #949FA3 #FFFBE1 #CACAD4 #9A9D94`,M:`#BCC6B8 #8AA386 #697D80 #E3D2BC #D0CCAA #B0A782 #B4A497 #B38281 #A58767 #C5B2BC #9F7594 #644749 #D19066 #C77362 #757D78`}).flatMap(([e,t])=>t.split(` `).map((t,n)=>[e+(n+1),t])),a=t(),o={A:`黄橙系`,B:`绿色系`,C:`蓝青系`,D:`紫蓝系`,E:`粉红系`,F:`红色系`,G:`肤棕系`,H:`黑白灰系`,M:`莫兰迪系`},s=i.map(([e,t])=>({code:e,name:`MARD ${o[e[0]]}`,hex:t,rgb:[parseInt(t.slice(1,3),16),parseInt(t.slice(3,5),16),parseInt(t.slice(5,7),16)]})),c=e=>[parseInt(e.slice(1,3),16),parseInt(e.slice(3,5),16),parseInt(e.slice(5,7),16)];function l(e,t){let n=(e[0]+t[0])/2,r=e[0]-t[0],i=e[1]-t[1],a=e[2]-t[2];return(2+n/256)*r*r+4*i*i+(2+(255-n)/256)*a*a}function u(e,t){let n=t[0],r=1/0;for(let i of t){let t=l(e,i.rgb);t<r&&(r=t,n=i)}return n}function d(){let e=document.createElement(`canvas`);e.width=640,e.height=640;let t=e.getContext(`2d`),n=t.createLinearGradient(0,0,0,640);return n.addColorStop(0,`#bfe8f1`),n.addColorStop(.65,`#fff2ce`),n.addColorStop(1,`#f6c783`),t.fillStyle=n,t.fillRect(0,0,640,640),t.fillStyle=`#f6c742`,t.beginPath(),t.arc(488,134,70,0,Math.PI*2),t.fill(),t.fillStyle=`#58a95b`,t.beginPath(),t.moveTo(0,455),t.quadraticCurveTo(135,310,300,455),t.quadraticCurveTo(480,285,640,435),t.lineTo(640,640),t.lineTo(0,640),t.fill(),t.fillStyle=`#27865a`,t.beginPath(),t.moveTo(0,535),t.quadraticCurveTo(180,390,350,520),t.quadraticCurveTo(505,410,640,505),t.lineTo(640,640),t.lineTo(0,640),t.fill(),t.fillStyle=`#f7f5ed`,t.fillRect(245,390,152,126),t.fillStyle=`#d9383a`,t.beginPath(),t.moveTo(218,405),t.lineTo(321,323),t.lineTo(424,405),t.closePath(),t.fill(),t.fillStyle=`#754a32`,t.fillRect(300,447,43,69),t.fillStyle=`#79cbe1`,t.fillRect(258,415,39,37),t.fillRect(350,415,34,37),e.toDataURL(`image/png`)}function f(){let[e,t]=(0,r.useState)(``),[n,i]=(0,r.useState)(`示例：田野小屋`),[o,l]=(0,r.useState)(32),[f,p]=(0,r.useState)(32),[m,h]=(0,r.useState)(18),[g,_]=(0,r.useState)(`cover`),[v,y]=(0,r.useState)([]),[b,x]=(0,r.useState)(new Set),[S,C]=(0,r.useState)(!1),[w,T]=(0,r.useState)(24),[E,D]=(0,r.useState)(!0),[O,k]=(0,r.useState)(!0),[A,j]=(0,r.useState)(``),[M,N]=(0,r.useState)(null),[P,F]=(0,r.useState)([]),[I,L]=(0,r.useState)(``),[R,z]=(0,r.useState)(`示例图已准备好，可以直接转换`),B=(0,r.useRef)(null),V=(0,r.useRef)(null);(0,r.useEffect)(()=>{let e=localStorage.getItem(`bead-pattern-history`);e&&queueMicrotask(()=>{try{F(JSON.parse(e))}catch{localStorage.removeItem(`bead-pattern-history`)}})},[]);let H=(e=B.current)=>{if(!e)return;let t=Math.max(8,Math.min(128,o)),n=Math.max(8,Math.min(128,f)),r=document.createElement(`canvas`);r.width=t,r.height=n;let i=r.getContext(`2d`,{willReadFrequently:!0});i.fillStyle=`#f7f5ed`,i.fillRect(0,0,t,n);let a=e.naturalWidth/e.naturalHeight,c=t/n,d=t,h=n;g===`cover`&&a>c||g===`contain`&&a<c?(h=n,d=n*a):(d=t,h=t/a),i.drawImage(e,(t-d)/2,(n-h)/2,d,h);let _=i.getImageData(0,0,t,n).data,v=[],b=new Map;for(let e=0;e<_.length;e+=4){let t=u([_[e],_[e+1],_[e+2]],s);v.push(t),b.set(t.code,(b.get(t.code)??0)+1)}let S=[...s].sort((e,t)=>(b.get(t.code)??0)-(b.get(e.code)??0)).slice(0,Math.max(2,Math.min(m,s.length))),C=v.map((e,t)=>{let n=[_[t*4],_[t*4+1],_[t*4+2]];return{color:S.some(t=>t.code===e.code)?e:u(n,S)}});l(t),p(n),y(C),x(new Set),z(`已转换为 ${t} × ${n}，共 ${t*n} 颗拼豆`)};(0,r.useEffect)(()=>{let e=d(),n=new Image;n.onload=()=>{B.current=n,t(e),H(n)},n.src=e},[]);let U=(0,r.useMemo)(()=>{let e=new Map;return v.forEach(({color:t})=>e.set(t.code,(e.get(t.code)??0)+1)),s.filter(t=>e.has(t.code)).map(t=>({...t,count:e.get(t.code)})).sort((e,t)=>t.count-e.count)},[v]),W=(0,r.useMemo)(()=>{let e=A.trim().toLowerCase();return U.filter(t=>!e||t.code.toLowerCase().includes(e)||t.name.includes(e)||t.hex.toLowerCase().includes(e))},[A,U]);(0,r.useEffect)(()=>{let e=V.current;if(!e||v.length===0)return;let t=w,n=Math.max(22,t),r=Math.min(window.devicePixelRatio||1,2);e.width=(o*t+n)*r,e.height=(f*t+n)*r,e.style.width=`${o*t+n}px`,e.style.height=`${f*t+n}px`;let i=e.getContext(`2d`);i.scale(r,r),i.fillStyle=`#ffffff`,i.fillRect(0,0,o*t+n,f*t+n),i.fillStyle=`#f0eee7`,i.fillRect(n,0,o*t,n),i.fillRect(0,n,n,f*t),i.strokeStyle=`rgba(32,38,36,.25)`,i.lineWidth=.6,i.font=`600 ${Math.max(7,Math.min(10,t*.35))}px Arial`,i.fillStyle=`#56605b`,i.textAlign=`center`,i.textBaseline=`middle`;for(let e=0;e<o;e++){let r=n+e*t;i.strokeRect(r+.3,.3,t-.6,n-.6),i.fillText(String(e+1),r+t/2,n/2)}for(let e=0;e<f;e++){let r=n+e*t;i.strokeRect(.3,r+.3,n-.6,t-.6),i.fillText(String(e+1),n/2,r+t/2)}v.forEach(({color:e},r)=>{let a=n+r%o*t,s=n+Math.floor(r/o)*t,l=b.size>0,u=b.has(e.code);if(S&&l&&!u?i.fillStyle=`#ffffff`:(i.fillStyle=e.hex,i.globalAlpha=l&&!u?.12:1,i.fillRect(a,s,t,t),i.globalAlpha=1),E&&(i.strokeStyle=l&&!u?`rgba(32,38,36,.07)`:`rgba(32,38,36,.22)`,i.lineWidth=.6,i.strokeRect(a+.3,s+.3,t-.6,t-.6)),O&&t>=22&&(!l||u)){let[n,r,o]=c(e.hex);i.fillStyle=n*.299+r*.587+o*.114>160?`#1f2925`:`#ffffff`,i.font=`600 ${Math.max(7,t*.28)}px Arial`,i.textAlign=`center`,i.textBaseline=`middle`,i.fillText(e.code,a+t/2,s+t/2)}})},[v,o,f,w,b,S,E,O]);let G=n=>{let r=n.target.files?.[0];if(!r)return;if(!r.type.startsWith(`image/`)){z(`请选择 JPG、PNG 或 WebP 图片`);return}let a=URL.createObjectURL(r),o=new Image;o.onload=()=>{e.startsWith(`blob:`)&&URL.revokeObjectURL(e),B.current=o,t(a),i(r.name),z(`图片已载入，点击“重新转换”生成图纸`),H(o)},o.src=a},K=e=>{x(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},q=e=>{let t=V.current;if(!t)return;let n=t.getBoundingClientRect(),r=Math.max(22,w),i=Math.floor((e.clientX-n.left-r)/w),a=Math.floor((e.clientY-n.top-r)/w),s=v[a*o+i];i>=0&&a>=0&&i<o&&a<f&&s&&K(s.color.code)},J=e=>{let t=V.current;if(!t)return;let n=t.getBoundingClientRect(),r=Math.max(22,w),i=Math.floor((e.clientX-n.left-r)/w),a=Math.floor((e.clientY-n.top-r)/w),s=v[a*o+i];if(i<0||a<0||i>=o||a>=f||!s){N(null);return}N({row:a+1,column:i+1,color:s.color,left:e.clientX-n.left+14,top:e.clientY-n.top+14})},Y=e=>{F(e),localStorage.setItem(`bead-pattern-history`,JSON.stringify(e))},X=()=>{v.length&&(Y([{id:crypto.randomUUID(),name:n.replace(/\.[^.]+$/,``)||`未命名图纸`,savedAt:new Date().toISOString(),width:o,height:f,colorLimit:m,codes:v.map(e=>e.color.code)},...P].slice(0,30)),z(`图纸已保存到本机历史记录`))},Z=e=>{let t=new Map(s.map(e=>[e.code,e]));y(e.codes.map(e=>({color:t.get(e)??s[0]}))),l(e.width),p(e.height),h(e.colorLimit),i(e.name),x(new Set),z(`已恢复历史图纸：${e.name}`),document.getElementById(`pattern-preview`)?.scrollIntoView({behavior:`smooth`})},Q=e=>Y(P.filter(t=>t.id!==e)),$=(0,r.useMemo)(()=>{let e=I.trim().toLowerCase();return P.filter(t=>!e||t.name.toLowerCase().includes(e)||`${t.width}x${t.height}`.includes(e))},[P,I]);return(0,a.jsxs)(`main`,{children:[(0,a.jsxs)(`header`,{className:`topbar`,children:[(0,a.jsxs)(`a`,{className:`brand`,href:`#top`,"aria-label":`豆格工坊首页`,children:[(0,a.jsxs)(`span`,{className:`brand-mark`,"aria-hidden":`true`,children:[(0,a.jsx)(`i`,{}),(0,a.jsx)(`i`,{}),(0,a.jsx)(`i`,{}),(0,a.jsx)(`i`,{})]}),(0,a.jsx)(`span`,{children:`豆格工坊`})]}),(0,a.jsx)(`span`,{className:`top-note`,children:`图片转拼豆图纸 · 本地处理`})]}),(0,a.jsxs)(`section`,{className:`hero`,id:`top`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`eyebrow`,children:`PIXEL BEAD STUDIO`}),(0,a.jsxs)(`h1`,{children:[`把喜欢的图片，`,(0,a.jsx)(`br`,{}),(0,a.jsx)(`em`,{children:`变成一格一格的快乐。`})]}),(0,a.jsx)(`p`,{className:`hero-copy`,children:`上传图片，选择图纸大小和颜色数量；点击任意像素格，就能单独查看该颜色需要摆放的区域。`})]}),(0,a.jsxs)(`div`,{className:`hero-badge`,children:[(0,a.jsxs)(`strong`,{children:[o,` × `,f]}),(0,a.jsx)(`span`,{children:`当前图纸格数`})]})]}),(0,a.jsxs)(`section`,{className:`workspace`,"aria-label":`拼豆图纸转换工具`,children:[(0,a.jsxs)(`aside`,{className:`control-panel`,children:[(0,a.jsxs)(`div`,{className:`panel-heading`,children:[(0,a.jsx)(`span`,{children:`01`}),(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`h2`,{children:`图片与规格`}),(0,a.jsx)(`p`,{children:`先决定图纸需要多少格`})]})]}),(0,a.jsxs)(`label`,{className:`upload-card`,children:[e?(0,a.jsx)(`img`,{src:e,alt:`待转换的原图预览`}):(0,a.jsx)(`span`,{className:`upload-placeholder`,children:`＋`}),(0,a.jsx)(`span`,{className:`upload-overlay`,children:`更换图片`}),(0,a.jsx)(`input`,{type:`file`,accept:`image/png,image/jpeg,image/webp`,onChange:G})]}),(0,a.jsx)(`p`,{className:`file-name`,title:n,children:n}),(0,a.jsxs)(`div`,{className:`field-row`,children:[(0,a.jsxs)(`label`,{children:[(0,a.jsx)(`span`,{children:`横向格数`}),(0,a.jsx)(`input`,{type:`number`,min:`8`,max:`128`,value:o,onChange:e=>l(Number(e.target.value))})]}),(0,a.jsx)(`span`,{className:`times`,children:`×`}),(0,a.jsxs)(`label`,{children:[(0,a.jsx)(`span`,{children:`纵向格数`}),(0,a.jsx)(`input`,{type:`number`,min:`8`,max:`128`,value:f,onChange:e=>p(Number(e.target.value))})]})]}),(0,a.jsxs)(`label`,{className:`field`,children:[(0,a.jsxs)(`span`,{children:[`最多使用颜色 `,(0,a.jsx)(`b`,{children:m})]}),(0,a.jsx)(`input`,{type:`range`,min:`2`,max:`64`,value:m,onChange:e=>h(Number(e.target.value))})]}),(0,a.jsxs)(`label`,{className:`field`,children:[(0,a.jsx)(`span`,{children:`图片适应方式`}),(0,a.jsxs)(`select`,{value:g,onChange:e=>_(e.target.value),children:[(0,a.jsx)(`option`,{value:`cover`,children:`裁剪铺满`}),(0,a.jsx)(`option`,{value:`contain`,children:`完整显示`})]})]}),(0,a.jsx)(`button`,{className:`primary-button`,onClick:()=>H(),children:`重新转换`}),(0,a.jsx)(`p`,{className:`privacy-note`,children:`图片只在当前浏览器中处理，不会上传到服务器。`})]}),(0,a.jsxs)(`section`,{className:`pattern-panel`,id:`pattern-preview`,children:[(0,a.jsxs)(`div`,{className:`pattern-toolbar`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`section-kicker`,children:`02 / 图纸预览`}),(0,a.jsx)(`h2`,{children:`点击格子，筛选颜色`})]}),(0,a.jsxs)(`div`,{className:`zoom-control`,"aria-label":`图纸缩放`,children:[(0,a.jsx)(`button`,{onClick:()=>T(e=>Math.max(8,e-2)),"aria-label":`缩小`,children:`−`}),(0,a.jsx)(`input`,{"aria-label":`缩放比例`,type:`range`,min:`8`,max:`42`,value:w,onChange:e=>T(Number(e.target.value))}),(0,a.jsx)(`button`,{onClick:()=>T(e=>Math.min(42,e+2)),"aria-label":`放大`,children:`＋`}),(0,a.jsxs)(`output`,{children:[w,`px`]})]})]}),(0,a.jsx)(`div`,{className:`canvas-stage`,children:(0,a.jsxs)(`div`,{className:`canvas-wrap`,children:[(0,a.jsx)(`canvas`,{ref:V,onClick:q,onMouseMove:J,onMouseLeave:()=>N(null),"aria-label":`转换后的拼豆像素图，点击格子可选择颜色`}),M&&(0,a.jsxs)(`div`,{className:`pixel-tooltip`,style:{left:M.left,top:M.top},children:[(0,a.jsx)(`span`,{className:`tooltip-swatch`,style:{backgroundColor:M.color.hex}}),(0,a.jsxs)(`strong`,{children:[`第 `,M.row,` 行 · 第 `,M.column,` 列`]}),(0,a.jsxs)(`small`,{children:[M.color.code,` · `,M.color.name,` · `,M.color.hex]})]})]})}),(0,a.jsxs)(`div`,{className:`pattern-footer`,children:[(0,a.jsx)(`span`,{className:`status-dot`}),` `,(0,a.jsx)(`span`,{children:R}),(0,a.jsxs)(`div`,{className:`view-options`,children:[(0,a.jsxs)(`label`,{children:[(0,a.jsx)(`input`,{type:`checkbox`,checked:E,onChange:e=>D(e.target.checked)}),` 网格`]}),(0,a.jsxs)(`label`,{children:[(0,a.jsx)(`input`,{type:`checkbox`,checked:O,onChange:e=>k(e.target.checked)}),` 格内编号`]}),(0,a.jsx)(`button`,{className:`save-button`,onClick:X,children:`保存历史`}),(0,a.jsx)(`button`,{onClick:()=>{let e=V.current;if(!e)return;let t=document.createElement(`a`);t.download=`拼豆图纸-${o}x${f}.png`,t.href=e.toDataURL(`image/png`),t.click()},children:`下载 PNG`})]})]}),(0,a.jsxs)(`div`,{className:`pattern-legend`,children:[(0,a.jsxs)(`div`,{className:`legend-heading`,children:[(0,a.jsx)(`strong`,{children:`本图所需颜色与用量`}),(0,a.jsxs)(`span`,{children:[`按数量从多到少，共 `,U.length,` 色`]})]}),(0,a.jsx)(`div`,{className:`legend-list`,children:U.map(e=>(0,a.jsxs)(`button`,{className:b.has(e.code)?`active`:``,onClick:()=>K(e.code),children:[(0,a.jsx)(`i`,{style:{backgroundColor:e.hex}}),(0,a.jsx)(`strong`,{children:e.code}),(0,a.jsx)(`span`,{children:e.name}),(0,a.jsxs)(`b`,{children:[e.count,` 颗`]})]},e.code))})]})]}),(0,a.jsxs)(`aside`,{className:`color-panel`,children:[(0,a.jsxs)(`div`,{className:`panel-heading`,children:[(0,a.jsx)(`span`,{children:`03`}),(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`h2`,{children:`分色查看`}),(0,a.jsxs)(`p`,{children:[U.length,` 种颜色 · `,v.length,` 颗`]})]})]}),(0,a.jsxs)(`div`,{className:`search-box`,children:[(0,a.jsx)(`span`,{children:`⌕`}),(0,a.jsx)(`input`,{value:A,onChange:e=>j(e.target.value),placeholder:`输入 A6、MARD A 或 #FEAC4C`})]}),(0,a.jsxs)(`div`,{className:`selection-tools`,children:[(0,a.jsxs)(`label`,{className:`switch-row`,children:[(0,a.jsx)(`input`,{type:`checkbox`,checked:S,onChange:e=>C(e.target.checked)}),(0,a.jsx)(`span`,{className:`switch`}),(0,a.jsx)(`span`,{children:`只显示选中颜色`})]}),b.size>0&&(0,a.jsxs)(`button`,{onClick:()=>x(new Set),children:[`清除 `,b.size,` 项`]})]}),(0,a.jsx)(`div`,{className:`color-list`,children:W.map(e=>{let t=b.has(e.code);return(0,a.jsxs)(`button`,{className:`color-item ${t?`active`:``}`,onClick:()=>K(e.code),"aria-pressed":t,children:[(0,a.jsx)(`span`,{className:`swatch`,style:{backgroundColor:e.hex}}),(0,a.jsxs)(`span`,{className:`color-meta`,children:[(0,a.jsxs)(`strong`,{children:[e.code,` · `,e.name]}),(0,a.jsx)(`small`,{children:e.hex})]}),(0,a.jsxs)(`b`,{children:[e.count,(0,a.jsx)(`small`,{children:`颗`})]})]},e.code)})}),(0,a.jsxs)(`p`,{className:`palette-note`,children:[(0,a.jsx)(`strong`,{children:`MARD 221 基础色卡`}),`：默认使用 A/B/C/D/E/F/G/H/M 九个系列。屏幕色值仅用于近似匹配，实体豆颜色会受批次、光线和屏幕影响。`]})]})]}),(0,a.jsxs)(`section`,{className:`history-section`,"aria-labelledby":`history-title`,children:[(0,a.jsxs)(`div`,{className:`history-heading`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`section-kicker`,children:`LOCAL PATTERN ARCHIVE`}),(0,a.jsx)(`h2`,{id:`history-title`,children:`历史图纸`}),(0,a.jsx)(`p`,{children:`历史保存在当前浏览器，最多保留 30 份。`})]}),(0,a.jsxs)(`div`,{className:`search-box`,children:[(0,a.jsx)(`span`,{children:`⌕`}),(0,a.jsx)(`input`,{value:I,onChange:e=>L(e.target.value),placeholder:`按名称或 32x32 查询`})]})]}),$.length?(0,a.jsx)(`div`,{className:`history-grid`,children:$.map(e=>{let t=new Map;return e.codes.forEach(e=>t.set(e,(t.get(e)??0)+1)),(0,a.jsxs)(`article`,{className:`history-card`,children:[(0,a.jsx)(`div`,{className:`history-swatches`,children:[...t.entries()].sort((e,t)=>t[1]-e[1]).slice(0,6).map(([e,t])=>(0,a.jsx)(`i`,{style:{backgroundColor:s.find(t=>t.code===e)?.hex,flexGrow:t}},e))}),(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`h3`,{children:e.name}),(0,a.jsxs)(`p`,{children:[e.width,` × `,e.height,` · `,new Date(e.savedAt).toLocaleString(`zh-CN`,{hour12:!1})]})]}),(0,a.jsxs)(`div`,{className:`history-actions`,children:[(0,a.jsx)(`button`,{onClick:()=>Z(e),children:`打开`}),(0,a.jsx)(`button`,{onClick:()=>Q(e.id),children:`删除`})]})]},e.id)})}):(0,a.jsx)(`div`,{className:`history-empty`,children:`还没有符合条件的历史图纸。转换完成后点击“保存历史”即可在这里查询。`})]})]})}export{f as default}; |