https://ulpb.app/_next/static/chunks/6345.6967d4e652fa66ee.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6345],{21356:(e,t,a)=>{a.d(t,{Kr:()=>r.useMemo});var r=a(12115)},66345:(e,t,a)=>{a.r(t),a.d(t,{OnboardingOverlay:()=>v});var r=a(95155),n=a(98891);let i=[{char:"双",pinyin:"shuāng",sheng:"sh",yun:"uang",keys:["u","l"]},{char:"拼",pinyin:"pīn",sheng:"p",yun:"in",keys:["p","b"]}],s=i.flatMap(e=>e.keys);function o(e){let{onNext:t}=e;return(0,r.jsxs)("div",{className:"flex flex-col items-center gap-9 text-center",children:[(0,r.jsxs)("div",{children:[(0,r.jsx)("div",{className:"mb-3 text-[11px] uppercase tracking-[0.32em] font-semibold text-amber-600/80 dark:text-amber-400/80",children:"Ready?"}),(0,r.jsxs)("h2",{className:"text-[1.6rem] sm:text-[2.1rem] font-bold tracking-tight leading-[1.2]",children:["打出「双拼」，只按 ",(0,r.jsx)("span",{className:"text-[var(--primary)]",children:"4 下"})]})]}),(0,r.jsx)("div",{className:"flex gap-3 sm:gap-4",children:i.map((e,t)=>(0,r.jsxs)("div",{className:"flex flex-col items-center gap-3 px-5 py-5 sm:px-7 sm:py-6 card-shell bg-white/70 dark:bg-white/5 opacity-0 onboarding-fadein",style:{animationDelay:"".concat(150+120*t,"ms")},children:[(0,r.jsxs)("div",{className:"flex flex-col items-center gap-0.5",children:[(0,r.jsx)("span",{className:"text-[4rem] sm:text-[5rem] font-bold text-[var(--foreground)] leading-none tracking-tight",children:e.char}),(0,r.jsx)("span",{className:"text-[11px] font-mono tracking-wider text-[var(--muted-foreground)]",children:e.pinyin})]}),(0,r.jsx)("div",{className:"w-8 h-px bg-[var(--primary)]/20","aria-hidden":"true"}),(0,r.jsx)("div",{className:"flex gap-1.5",children:e.keys.map((e,t)=>(0,r.jsx)("kbd",{className:"inline-flex items-center justify-center w-9 h-10 rounded-xl bg-gradient-to-b from-amber-50 to-amber-100 dark:from-amber-100 dark:to-amber-200 text-amber-900 font-mono font-bold uppercase text-sm border border-amber-200 shadow-[inset_0_-2px_0_rgba(180,120,40,0.2),0_1px_2px_rgba(0,0,0,0.04)]",children:e},t))})]},e.char))}),(0,r.jsxs)("button",{onClick:t,className:"group inline-flex items-center justify-center gap-2 min-w-[160px] px-6 py-3 rounded-2xl bg-[var(--primary)] text-white font-semibold shadow-sm hover:opacity-95 hover:shadow-md hover:-translate-y-0.5 active:translate-y-0 transition opacity-0 onboarding-fadein",style:{animationDelay:"500ms"},children:["开始按键",(0,r.jsx)("svg",{className:"w-4 h-4 transition-transform group-hover:translate-x-0.5",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",children:(0,r.jsx)("path",{fillRule:"evenodd",d:"M7.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L10.586 10 7.293 6.707a1 1 0 010-1.414z",clipRule:"evenodd"})})]})]})}var l=a(36759),d=a(97251);let c=[["q","w","e","r","t","y","u","i","o","p"],["a","s","d","f","g","h","j","k","l"],["z","x","c","v","b","n","m"]],m=new Set(s);function x(e){let{onComplete:t}=e,[a,n]=(0,l.J0)(0),[o,x]=(0,l.J0)(0),[u,p]=(0,l.J0)([]),f=(0,l.li)(0),b=(0,l.li)(new Set);(0,l.vJ)(()=>{let e=b.current;return()=>{e.forEach(e=>clearTimeout(e)),e.clear()}},[]);let h=(0,l.hb)(e=>{if(e!==s[a])return void x(e=>e+1);(0,d.dY)(e),x(0);let r=f.current++;p(t=>[...t,{id:r,key:e}]);let i=setTimeout(()=>{b.current.delete(i),p(e=>e.filter(e=>e.id!==r))},900);b.current.add(i);let o=a+1;if(n(o),o===s.length){let e=setTimeout(()=>{b.current.delete(e),t()},600);b.current.add(e)}},[a,t]);(0,l.vJ)(()=>{let e=e=>{1===e.key.length&&h(e.key.toLowerCase())};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[h]);let g=s[a],v=new Set(s.slice(0,a));return(0,r.jsxs)("div",{className:"flex flex-col items-center gap-6 text-center",children:[(0,r.jsxs)("div",{children:[(0,r.jsx)("div",{className:"mb-2 text-[11px] uppercase tracking-[0.28em] font-semibold text-amber-600 dark:text-amber-400",children:"Your Turn"}),(0,r.jsx)("p",{className:"text-sm text-[var(--text-secondary)]",children:g?"跟着发光的键按":"完成啦"})]}),(0,r.jsx)("div",{className:"flex gap-4 sm:gap-8",children:i.map((e,t)=>{let n=a>=2*t&&a<(t+1)*2,i=a>=(t+1)*2;return(0,r.jsxs)("div",{className:"flex flex-col items-center gap-1",children:[(0,r.jsx)("span",{className:["text-6xl sm:text-7xl font-bold transition-all duration-300",i&&"text-[var(--primary)] drop-shadow-[0_0_20px_rgba(240,173,78,0.4)]",n&&"text-[var(--foreground)]",!n&&!i&&"text-[var(--foreground)]/25"].filter(

1Boolean).join(" "),children:e.char}),(0,r.jsx)("div",{className:"flex gap-1",children:e.keys.map((e,n)=>{let i=2*t+n<a;return(0,r.jsx)("div",{className:["w-2 h-2 rounded-full transition-all",i?"bg-[var(--primary)]":"bg-[var(--foreground)]/15"].join(" ")},n)})})]},e.char)})}),(0,r.jsx)("div",{className:"relative flex flex-col gap-1.5 sm:gap-2 select-none p-4 card-shell bg-[var(--muted)]/30",role:"group","aria-label":"练习键盘",children:c.map((e,t)=>(0,r.jsx)("div",{className:"flex gap-1.5 sm:gap-2 justify-center",style:{paddingLeft:"".concat(14*t,"px")},children:e.map(e=>{let t=m.has(e),a=e===g,n=v.has(e),i=a?"active-".concat(o):e,s=u.find(t=>t.key===e);return(0,r.jsxs)("div",{className:"relative",children:[(0,r.jsx)("button",{type:"button",onClick:()=>h(e),"aria-label":"按 ".concat(e.toUpperCase()," 键"),className:["relative flex items-center justify-center w-8 h-10 sm:w-10 sm:h-12 rounded-lg font-mono uppercase text-sm sm:text-base border transition-all duration-200 cursor-pointer",n&&"bg-gradient-to-b from-green-100 to-green-200 dark:from-green-900/40 dark:to-green-800/40 border-green-400 text-green-700 dark:text-green-300 shadow-[inset_0_-1px_0_rgba(0,80,0,0.15)]",a&&o>0&&"bg-gradient-to-b from-white to-amber-100 dark:from-amber-100 dark:to-amber-200 border-[var(--primary)] text-amber-900 font-bold shadow-[inset_0_-2px_0_rgba(180,120,40,0.3),0_0_20px_rgba(240,173,78,0.5)] onboarding-shake",a&&0===o&&"bg-gradient-to-b from-white to-amber-100 dark:from-amber-100 dark:to-amber-200 border-[var(--primary)] text-amber-900 font-bold shadow-[inset_0_-2px_0_rgba(180,120,40,0.3),0_0_20px_rgba(240,173,78,0.5)] onboarding-key-glow",!a&&!n&&t&&"bg-gradient-to-b from-[var(--background)] to-[var(--muted)] border-[var(--primary)]/30 text-[var(--foreground)]/60",!a&&!n&&!t&&"bg-[var(--muted)]/40 border-[var(--border)] text-[var(--foreground)]/25"].filter(Boolean).join(" "),children:e}),a&&0===o&&(0,r.jsx)("span",{"aria-hidden":"true",className:"onboarding-finger-bounce absolute left-1/2 -translate-x-1/2 -top-7 text-lg pointer-events-none",children:"\uD83D\uDC47"}),s&&(0,r.jsx)("span",{"aria-hidden":"true",className:"onboarding-check-bubble absolute left-1/2 -translate-x-1/2 -top-2 w-6 h-6 rounded-full bg-green-500 text-white text-xs font-bold flex items-center justify-center shadow-lg shadow-green-500/40 pointer-events-none",children:"✓"},s.id)]},i)})},t))}),(0,r.jsx)("p",{className:"text-xs text-[var(--muted-foreground)]",children:"键盘或屏幕上都可以"}),(0,r.jsxs)("span",{className:"sr-only","aria-live":"polite",children:["已完成 ",a," / ",s.length," 键"]})]})}var u=a(6874),p=a.n(u),f=a(21356);let b=["bg-[var(--primary)]","bg-orange-400","bg-amber-300","bg-green-400","bg-rose-400","bg-sky-4

100"];function h(e){let{onClose:t}=e,a=(0,f.Kr)(()=>Array.from({length:28},(e,t)=>({left:100*Math.random(),delay:500*Math.random(),duration:1800+1200*Math.random(),color:b[t%b.length],rotate:720*Math.random()-360,size:5+7*Math.random()})),[]);return(0,r.jsxs)("div",{className:"relative flex flex-col items-center gap-7 text-center",children:[(0,r.jsx)("div",{"aria-hidden":"true",className:"pointer-events-none absolute -top-8 -left-4 -right-4 h-[400px] overflow-hidden",children:a.map((e,t)=>(0,r.jsx)("span",{className:"absolute top-0 ".concat(e.color," rounded-sm onboarding-confetti"),style:{left:"".concat(e.left,"%"),width:"".concat(e.size,"px"),height:"".concat(.4*e.size,"px"),animationDelay:"".concat(e.delay,"ms"),animationDuration:"".concat(e.duration,"ms"),"--rotate-end":"".concat(e.rotate,"deg")}},t))}),(0,r.jsxs)("div",{className:"relative z-10",children:[(0,r.jsx)("div",{className:"mb-2 text-[11px] uppercase tracking-[0.28em] font-semibold text-amber-600 dark:text-amber-400 onboarding-fadein opacity-0",style:{animationDelay:"0ms"},children:"Nice Work"}),(0,r.jsxs)("h2",{className:"text-[1.75rem] sm:text-4xl font-bold tracking-tight leading-tight onboarding-fadein opacity-0",style:{animationDelay:"100ms"},children:["你刚才只按了 ",(0,r.jsx)("span",{className:"text-[var(--primary)]",children:"4 下"})]}),(0,r.jsxs)("p",{className:"mt-3 text-sm sm:text-base text-[var(--text-secondary)] onboarding-fadein opacity-0",style:{animationDelay:"200ms"},children:["平常打「双拼」两个字要按 ",(0,r.jsx)("span",{className:"font-semibold text-[var(--text-primary)]",children:"9 下"})]})]}),(0,r.jsxs)("div",{className:"relative z-10 flex items-center gap-5 sm:gap-8",children:[(0,r.jsxs)("div",{className:"flex flex-col items-center gap-1 opacity-0 onboarding-fadein",style:{animationDelay:"300ms"},children:[(0,r.jsx)("span",{className:"text-xs text-[var(--text-secondary)]",children:"平常"}),(0,r.jsx)("span",{className:"text-5xl sm:text-6xl font-bold text-[var(--foreground)]/25 line-through decoration-[3px] decoration-rose-400/70 leading-none tabular-nums",children:"9"})]}),(0,r.jsx)("svg",{className:"w-6 h-6 text-[var(--primary)]/70 opacity-0 onboarding-fadein",style:{animationDelay:"400ms"},viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",children:(0,r.jsx)("path",{fillRule:"evenodd",d:"M7.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L10.586 10 7.293 6.707a1 1 0 010-1.414z",clipRule:"evenodd"})}),(0,r.jsxs)("div",{className:"flex flex-col items-center gap-1 onboarding-number-pop opacity-0",style:{animationDelay:"500ms"},children:[(0,r.jsx)("span",{className:"text-xs font-semibold text-[var(--primary)]",children:"双拼"}),(0,r.jsxs)("span",{className:"relative text-6xl sm:text-7xl font-bold text-[var(--primary)] leading-none tabular-nums",children:["4",(0,r.jsx)("span",{"aria-hidden":"true",className:"absolute -inset-3 bg-[var(--primary)]/15 blur-2xl rounded-full -z-10"})]})]})]}),(0,r.jsx)("p",{className:"relative z-10 text-sm text-[var(--text-secondary)] max-w-sm leading-relaxed opacity-0 onboarding-fadein",style:{animationDelay:"700ms"},children:"一天打 2000 字，能少按上千次键 \uD83E\uDD2F"}),(0,r.jsxs)("div",{className:"relative z-10 flex flex-col sm:flex-row gap-3 justify-center w-full sm:w-auto opacity-0 onboarding-fadein",style:{animationDelay:"900ms"},children:[(0,r.jsxs)(p(),{href:"/tutorial/",onClick:t,className:"group inline-flex items-center justify-center gap-2 min-w-[180px] px-6 py-3 rounded-2xl bg-[var(--primary)] text-white font-semibold shadow-sm hover:opacity-95 hover:shadow-md hover:-translate-y-0.5 active:translate-y-0 transition",children:["为什么要学双拼",(0,r.jsx)("svg",{className:"w-4 h-4 transition-transform group-hover:translate-x-0.5",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",children:(0,r.jsx)("path",{fillRule:"evenodd",d:"M7.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L10.586 10 7.293 6.707a1 1 0 010-1.414z",clipRule:"evenodd"})})]}),(0,r.jsx)("button",{onClick:t,className:"inline-flex items-center justify-center min-w-[160px] px-6 py-3 rounded-2xl border border-[var(--border-strong)] font-medium text-[var(--text-primary)] hover:bg-[var(--cream,rgba(0,0,0,0.03))] hover:border-[var(--primary)] transition",children:"马上练习"})]})]})}let g=["primer","practice","celebrate"];function v(e){let{onClose:t}=e,[a,i]=(0,n.J0)("primer"),s=g.indexOf(a);return(0,r.jsxs)("div",{role:"dialog","aria-label":"双拼介绍",className:"fixed inset-0 z-50 onboarding-overlay-fadein",children:[(0,r.jsx)("div",{"aria-hidden":"true",className:"absolute inset-0 bg-black/25 backdrop-blur-sm",onClick:t}),(0,r.jsx)("div",{className:"absolute inset-0 flex items-center justify-center px-4 py-6 overflow-y-auto overscroll-contain",onClick:e=>{e.target===e.currentTarget&&t()},children:(0,r.jsxs)("div",{className:"relative w-full max-w-xl sm:max-w-2xl card-s

1hell card-overlay onboarding-card-pop overflow-hidden bg-white/60 dark:bg-[var(--background)]/60 backdrop-blur-2xl backdrop-saturate-150",onClick:e=>e.stopPropagation(),children:[(0,r.jsx)("div",{"aria-hidden":"true",className:"pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/80 dark:via-white/20 to-transparent"}),(0,r.jsx)("div",{"aria-hidden":"true",className:"pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(240,173,78,0.12),transparent_60%)]"}),(0,r.jsx)("button",{onClick:t,className:"absolute top-4 right-4 z-10 w-9 h-9 rounded-full bg-white/40 dark:bg-white/10 hover:bg-white/60 dark:hover:bg-white/20 backdrop-blur-sm flex items-center justify-center text-[var(--foreground)]/70 hover:text-[var(--foreground)] text-lg leading-none transition-colors","aria-label":"关闭",children:"\xd7"}),(0,r.jsx)("div",{className:"relative flex justify-center gap-1.5 pt-6","aria-hidden":"true",children:g.map((e,t)=>(0,r.jsx)("div",{className:["h-1 rounded-full transition-all duration-500",t===s&&"w-6 bg-[var(--primary)]",t<s&&"w-1 bg-[var(--primary)]/60",t>

1s&&"w-1 bg-[var(--foreground)]/15"].filter(Boolean).join(" ")},e))}),(0,r.jsxs)("div",{className:"relative px-5 py-7 sm:px-10 sm:py-9",children:["primer"===a&&(0,r.jsx)(o,{onNext:()=>i("practice")}),"practice"===a&&(0,r.jsx)(x,{onComplete:()=>i("celebrate")}),"celebrate"===a&&(0,r.jsx)(h,{onClose:t})]})]})})]})}},97251:(e,t,a)=>{a.d(t,{A0:()=>g,Bk:()=>w,RJ:()=>f,X$:()=>h,dY:()=>p,vH:()=>y});let r={q:"16",w:"17",e:"18",r:"19",t:"20",y:"21",u:"22",i:"23",o:"24",p:"25",a:"30",s:"31",d:"32",f:"33",g:"34",h:"35",j:"36",k:"37",l:"38",z:"44",x:"45",c:"46",v:"47",b:"48",n:"49",m:"50",";":"39",",":"51",".":"52",backspace:"14",return:"28",enter:"28",shift:"42"},n=!0,i="cherrymx-blue-pbt",s=null,o=new Map,l=new Map;function d(){if(s)return s;let e=window.AudioContext||window.webkitAudioContext;return e?s=new e:null}function c(e,t){let a=o.get(t);if(a)return Promise.resolve(a);let r=l.get(t);if(r)return r;let n=fetch(t).then(e=>{if(!e.ok)throw Error("Failed to fetch ".concat(t,": ").concat(e.status));return e.arrayBuffer()}).then(t=>e.decodeAudioData(t)).then(e=>(o.set(t,e),l.delete(t),e)).catch(e=>{throw l.delete(t),e});return l.set(t,n),n}function m(e,t,a){let r=e.createBufferSource();r.buffer=t;let n=e.createGain();n.gain.value=a,r.connect(n).connect(e.destination),r.start(0)}async function x(){if("mute"===i||"system"===i)return;let e=d();if(!e)return;let t=new Set;for(let e of["a","s","d","f","g","h","j","k","l","backspace","enter"])t.add("/sounds/keyboard/".concat(i,"/").concat(u(e),".mp3"));await Promise.allSettled([...t].map(t=>c(e,t)))}function u(e){let t=e.toLowerCase();return r[t]?r[t]:(Math.floor(29*Math.random())+60).toString()}async function p(e){if(!n||"mute"===i)return;let t=d();if(!t)return;if("suspended"===t.state&&t.resume(),"system"===i)return void function(e){let t=e.createOscillator(),a=e.createGain();t.connect(a),a.connect(e.destination),t.frequency.value=1e3,t.type="sine";let r=e.currentTime;a.gain.setValueAtTime(0,r),a.gain.linearRampToValueAtTime(.1,r+.001),a.gain.linearRampToValueAtTime(0,r+.01),t.start(r),t.stop(r+.01)}(t);let a=e?u(e):"32",r="/sounds/keyboard/".concat(i,"/").concat(a,".mp3"),s=o.get(r);if(s)return void m(t,s,.5);try{let e=await c(t,r);m(t,e,.5)}catch(e){}}function f(e){n=e}function b(e,t){let a=d();if(!a)return;"suspended"===a.state&&a.resume();let r=a.currentTime;for(let{freq:n,start:i,dur:s}of e){let e=a.createOscillator(),o=a.createGain();e.type=t,e.frequency.value=n,o.gain.value=0,e.connect(o).connect(a.destination);let l=r+i;o.gain.setValueAtTime(0,l),o.gain.linearRampToValueAtTime(.16,l+.012),o.gain.linearRampToValueAtTime(0,l+s),e.start(l),e.stop(l+s+.01),e.onended=()=>{e.disconnect(),o.disconnect()}}}function h(){b([{freq:660,start:0,dur:.09},{freq:990,start:.09,dur:.12}],"sine")}function g(){b([{freq:220,start:0,dur:.12},{freq:160,start:.12,dur:.16}],"square")}function v(){try{var e;if("function"!=typeof(null==(e=window.localStorage)?void 0:e.getItem))return!1;let t="__localStorage_test__";return window.localStorage.setItem(t,t),window.localStorage.removeItem(t),!0}catch(e){return!1}}function y(e){i=e;try{v()&&(window.localStorage.setItem("keyboard-sound-type",e),o.clear(),l.clear(),x())}catch(e){}}function w(){try{if(v()){var e;let t=window.localStorage.getItem("keyboard-sound-type");t&&(e=t,["mute","system","cherrymx-black-abs","cherrymx-black-pbt","cherrymx-blue-abs","cherrymx-blue-pbt","cherrymx-brown-abs","cherrymx-brown-pbt","cherrymx-red-abs","cherrymx-red-pbt","topre-purple-hybrid-pbt"].includes(e))&&(i=t)}}catch(e){}return i}{let e=!1,t=()=>{!e&&v()&&(e=!0,w(),x())},a=window;if("function"==typeof a.requestIdleCallback?a.requestIdleCallback(t,{timeout:3e3}):setTimeout(t,2e3),"undefined"!=typeof document){let e=()=>{let a=d();a&&"suspended"===a.state&&a.resume(),t(),document.removeEventListener("click",e),document.removeEventListener("keydown",e)};document.addEventListener("click",e),document.addEventListener("keydown",e)}}},98891:(e,t,a)=>{a.d(t,{J0:()=>r.useState});var r=a(12115)}}]);