2 lines
4.4 KiB
JavaScript
2 lines
4.4 KiB
JavaScript
import{j as e,b as g,C as l,P as v,S as j,d as u,e as b,c as $}from"./MemphisCard-Bt0vyCOo.js";function y(){return e.jsx("div",{className:"flex flex-wrap gap-5",children:g.map(r=>e.jsxs("div",{"data-comp":"entry-card",className:"w-[252px] rounded-xl border-2 border-ink bg-paper p-3 shadow-hard",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"flex h-[26px] w-[26px] items-center justify-center rounded-lg border-2 border-ink text-[14px]",style:{background:l[r.entry].color},children:r.icon}),e.jsx("b",{className:"text-[13px]",children:r.name})]}),e.jsx("div",{className:"mt-2 flex flex-wrap items-center gap-1.5",children:r.path.map((s,n)=>e.jsxs("span",{className:"flex items-center gap-1.5",children:[n>0&&e.jsx("span",{className:"text-[10px] text-mute",children:"→"}),e.jsxs("a",{href:`/ch${s}.html`,className:`rounded-full border-[1.5px] border-ink px-2.5 py-0.5 text-[10.5px] no-underline ${s===r.entry?"bg-clash2a font-extrabold":"bg-white"}`,children:[s===r.entry&&["①","②","③"][g.indexOf(r)]," ",l[s].title]})]},s))}),e.jsx("p",{className:"m-0 mt-2 text-[10px] leading-relaxed text-mute",children:r.note})]},r.name))})}const k=["var(--color-clash2a)","var(--color-clash1b)","var(--color-clash3a)","var(--color-clash1a)"];function N(r,s,n,c,o=8){if(Math.abs(c-s)<1)return`M ${r} ${s} H ${n}`;const i=c>s,x=i?1:0,m=i?0:1,h=Math.max(r+o,n-2*o);return`M ${r} ${s} H ${h} A ${o} ${o} 0 0 ${x} ${h+o} ${s+(i?o:-o)} V ${c-(i?o:-o)} A ${o} ${o} 0 0 ${m} ${h+2*o} ${c} H ${n}`}function w({edges:r,nodes:s,width:n,height:c}){const o=t=>k[t%k.length],i=r.filter(t=>t.kind==="seq"),x=new Map;i.forEach(t=>x.set(t.to,[...x.get(t.to)??[],t]));const m=new Set;x.forEach(t=>m.add(t[0].to));let h=0;return e.jsxs("svg",{width:n,height:c,viewBox:`0 0 ${n} ${c}`,className:"pointer-events-none absolute left-0 top-0 z-10","aria-hidden":!0,children:[r.map((t,d)=>{const a=s[t.from],p=s[t.to];if(!a||!p)return null;const f=N(a.right,a.y,p.borderLeft,p.y);return t.kind==="rel"?e.jsx("path",{d:f,stroke:"var(--color-ink)",strokeWidth:2,fill:"none",strokeDasharray:"4 2"},d):t.kind==="family"?e.jsx("path",{d:f,stroke:"var(--color-ink)",strokeWidth:2.4,fill:"none",strokeDasharray:"0.1 6",strokeLinecap:"round"},d):e.jsx("path",{d:f,stroke:"var(--color-ink)",strokeWidth:2.5,fill:"none"},d)}),i.map(t=>{const d=s[t.from],a=s[t.to];if(!d||!a)return null;const p=x.get(t.to),f=p.length>1&&m.has(t.to);return e.jsxs("g",{children:[e.jsx("circle",{cx:d.right,cy:d.y,r:6,fill:o(h++),stroke:"var(--color-ink)",strokeWidth:2}),f?e.jsx("rect",{x:a.borderLeft-3,y:a.y-10,width:6,height:20,rx:3,fill:"var(--color-clash1a)",stroke:"var(--color-ink)",strokeWidth:2}):p.length===1?e.jsx("circle",{cx:a.borderLeft,cy:a.y,r:6,fill:o(h++),stroke:"var(--color-ink)",strokeWidth:2}):null]},`st-${t.from}-${t.to}`)})]})}const L={1:{id:1,borderLeft:40,right:290,y:180},2:{id:2,borderLeft:380,right:630,y:108},5:{id:5,borderLeft:700,right:840,y:108}},E=[{id:1,entry:1},{id:2,entry:2},{id:3},{id:4},{id:5},{id:6,entry:3}];function R(){return e.jsxs(v,{title:"全栈工程师教程 · 书架",desc:"靶子先行：每章先给目标、预期结果、积木清单，步骤只写「产出什么＋核对什么」；过程有没有学习价值，每步先分类。",children:[e.jsx(j,{label:"入口画像",note:"推荐不是强制——无锁",children:e.jsx(y,{})}),e.jsx(j,{label:"六章",note:"卡片是入口；点相框进入章节",children:e.jsx("div",{className:"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3",children:E.map(({id:r,entry:s})=>e.jsx(u,{chapter:l[r],entry:s},r))})}),e.jsx(j,{label:"主线与进度",note:"实线＝先后；点线＝同族；票券＝完成状态",children:e.jsxs("div",{className:"relative h-[520px] overflow-hidden rounded-2xl bg-paper",children:[e.jsx(w,{edges:[{from:1,to:2,kind:"seq"},{from:2,to:5,kind:"seq"},{from:2,to:5,kind:"family"}],nodes:L,width:1160,height:520}),e.jsx("div",{className:"absolute left-[40px] top-[110px] w-[250px]",children:e.jsx(u,{chapter:l[1]})}),e.jsx("div",{className:"absolute left-[380px] top-[44px] w-[250px] -rotate-1",children:e.jsx(u,{chapter:l[2]})}),e.jsx("div",{className:"absolute left-[700px] top-[44px] w-[140px]",children:e.jsx(u,{chapter:l[5],compact:!0})}),e.jsxs("div",{className:"absolute left-[60px] top-[380px] flex gap-4",children:[e.jsx(b,{chapter:l[1],done:!0}),e.jsx(b,{chapter:l[5],done:!1})]})]})})]})}$.createRoot(document.getElementById("root")).render(e.jsx(R,{}));
|