企业官网建设流程全解析

• 后端
• 前端
• AI 技能
• AI 插件
• 搜索引擎

本文以 ClawHub 仓库中的回归说明 specs/regression-notes/2026-04-29-hero-slot-easter-egg.md 为主线，完整还原首页 hero 区"老虎机彩蛋"（slot machine easter egg）从引入、调参、可访问性改造到被移除的完整生命周期，并结合仓库中仍然保留的样式源码与 UI 契约测试，深入剖析其触发判定、转轮节奏、赔率控制与特效呈现的底层实现。读完本文，你将掌握这套交互的精确契约参数（800ms 三连击、1200/1800/2400ms 停轮、1/25 与 1/100 双重赔率）、它与键盘可访问性设计的关系，以及彩蛋类交互在 React 前端中的典型实现与回归测试思路。

一、彩蛋背景：一次"社区标签三连击"的产品彩蛋

ClawHub 是面向 OpenClaw 生态的 Skills + Plugin Registry（技能与插件注册中心），其首页 hero 区在 2026 年 4 月曾经内置过一个隐藏交互：当用户在 hero 区域的特定标签上快速点击三次时，标题会切换成一台"老虎机"，以滚动字词的形式展示隐藏文案，命中特定组合时触发彩蛋特效。

根据回归说明记录，该彩蛋最初由 Val Alexander 于 2026-04-18 通过提交91c7e44（提交信息为feat: slot machine Easter egg on hero label triple-click）引入，触发载体是当时首页 hero 中存在的"社区标签"（community label）。其设计目标很典型：在不干扰主要导航与搜索路径的前提下，为常访用户提供一个低发现成本、高趣味性的隐藏交互，同时用"三连击 + 时间窗"的判定方式避免误触。

二、触发契约：800ms 时间窗内的三次激活

回归说明给出的核心触发规则为：

Activate the hero headline button three times within 800ms to trigger the slot-machine headline.

即用户必须在800ms 时间窗口内对触发按钮完成三次激活，老虎机标题才会启动。这是一个典型的多击（multi-tap / multi-click）判定模式：

• 三次激活之间是累计计时而非各自独立计时，即从第一次激活开始计算 800ms 窗口；
• 超过 800ms 才完成三次点击的序列会被判定为无效并重置计数；
• 判定载体从最初的"社区标签"演变为后来的"hero 标题内按钮"（见下文可访问性改造一节）。

这类判定在实现上通常依赖一个计数器加时间戳数组：每次激活时记录performance.now()，过滤掉窗口外的旧时间戳后判断剩余数量是否达到三次。回归说明中后续提交fec5db7专门补充了"timer 与 interval 在组件卸载（unmount）时的清理逻辑"，这也印证了该彩蛋在实现上确实包含计时器（判定窗口）与动画间隔（转轮滚动）两类异步资源，二者都必须在卸载时妥善释放，避免组件销毁后仍继续触发状态更新或动画循环。

三、转轮节奏：1200ms / 1800ms / 2400ms 三段停轮

触发成功后，标题进入老虎机滚动状态。回归说明明确规定三组转轮的停止时间：

三组转轮以600ms 的间隔依次停稳，形成逐位揭晓的节奏感。仓库 src/styles.css 中至今保留着这套动画的完整样式定义（在约 L21736-L21852 与 L25366-L25482 存在两组几乎相同的定义块，注释均为/* Slot machine easter egg */），可以清晰还原其视觉实现：

• .home-v2-headline-slots：老虎机标题的容器，设置min-height: 1.15em防止滚动期间布局跳动；
• .home-v2-slot-reel：单组转轮，使用JetBrains Mono等宽字体与 800 字重，min-width: 180px保证滚动过程文本宽度稳定；
• 旋转态.home-v2-slot-reel.spinning：内部字词挂载home-v2-slotBlur动画（0.12s steps(1) infinite），以"模糊 ↔ 清晰"的步进闪烁模拟高速滚动；
• 停稳态.home-v2-slot-reel:not(.spinning)：挂载home-v2-slotLand落地动画（0.3s cubic-bezier(0.34, 1.56, 0.64, 1)），通过translateY下坠 +scale回弹的贝塞尔曲线制造"落定"的物理感。

其中steps(1)与cubic-bezier(0.34, 1.56, 0.64, 1)是关键细节：前者用离散步进制造复古老虎机的顿挫感，后者超出 1 的贝塞尔纵坐标（1.56）产生过冲回弹，两者共同构成了这套彩蛋"廉价但讨喜"的动效质感。

四、赔率控制：1/25 总 Jackpot 与 1/100 Hack Jackpot

彩蛋若只是随机滚动文案并无难度，本设计的精妙之处在于显式的赔率控制。回归说明给出两条硬性参数：

Non-jackpot spins reroll accidental triples so jackpot odds stay controlled. Jackpot odds are 1/25 overall. Hack jackpot odds are 1/100 overall.

即：

1. 总体 Jackpot 概率为 1/25。这里的"总体"指每次完整老虎机旋转（一次三组转轮全部停稳）产生一次 Jackpot 结果的概率为 1/25；
2. Hack（特殊水生主题）Jackpot 概率为 1/100，是稀有中的稀有；
3. 关键的机制性约束：非 Jackpot 的旋转如果偶然滚出了三连相同字词（accidental triples），会被强制重新滚动（reroll），直到结果不是三连为止。

这条"reroll 意外三连"规则是赔率控制的精髓。若不重滚，字词池中任何三个相同字词的组合都会天然形成一个"伪 Jackpot"，使真实 Jackpot 概率被稀释并偏离 1/25 的设计值。通过把"三连"这一视觉上的中奖形态完全收归 Jackpot 机制独占，开发团队保证了：

• 视觉反馈与概率语义一致——用户看到三连 = 真中了 1/25 的 Jackpot；
• 概率可控、可测试——1/25 与 1/100 可以直接写成确定性单测，无需依赖真实随机数；
• 后续调参成本低——提交cb75011（2026-04-18，同样由 Val Alexander 提交）正是把 Jackpot 概率从早期版本统一调整为"任意 Jackpot 1/25、Hack Jackpot 1/100"，说明概率常量被集中管理，可以单点修改。

五、结果呈现：五彩纸屑、水生 Hack 特效与冷却窗口

彩蛋的结果分为"获胜"与"未获胜"两类，各自有独立的展示时长与冷却时间：

回归说明原文：

Wins fire confetti; Hack wins use the aquatic Hack-specific effect. Wins display for 10s and cool down for 18s; losses display for 2.4s and cool down for 3s.

仓库样式源码中可以看到对应特效的完整定义：

• .home-v2-confetti：position: fixed; inset: 0; z-index: 9999; pointer-events: none——全屏覆盖、置顶、不拦截鼠标事件的五彩纸屑层；
• .home-v2-headline-jackpot：挂载home-v2-jackpot动画（0.5s ease-out，缩放轨迹 1 → 1.08 → 0.97 → 1 的脉冲），同时.home-v2-headline-jackpot .home-v2-slot-word被强制渲染为金色#ffd93d并叠加两层金色光晕（text-shadow20px/40px 模糊），形成"中大奖"的视觉高亮；
• .home-v2-headline-hack：Hack 获胜时字词切换为水青色#22d3ee，使用三层光晕（24px 主光、48px 副光、外加黑色下投影），连标题中的分隔点.home-v2-sep也会变成水色描边并发光——这就是文档中所说的"aquatic Hack-specific effect"（水生特效）的文字侧；
• .home-v2-hack-lobster：水生特效的另一半，一个 280×280 的龙虾图形从画面中央以home-v2-lobsterReveal动画（1.2s时长、0.3s延迟、从scale(0) rotate(-30deg)弹入、最终透明度 0.12、叠加两层青色 drop-shadow）淡入标题背后（z-index: -1），作为"水生"主题的点睛元素。

展示/冷却双窗口的设计让彩蛋具备节奏感：10s 的展示期足够用户看清结果，18s 的冷却期防止连刷稀释稀有度；普通结果 2.4s 展示 + 3s 冷却则保证"没中"的体验不拖沓。从实现角度看，这对应一组状态机：idle → spinning → settling → win/loss display → cooldown → idle，任何时刻只允许一个状态，fec5db7提交补上的 timer/interval 清理正是这个状态机在组件卸载时的收尾保障。

六、可访问性改造：从"社区标签"到"键盘可访问按钮"

回归说明中明确提到一个 PR 方向：

This PR proposes moving the trigger from the removed community label into a keyboard-accessible button inside the hero headline while preserving the same slot timing and odds.

即把触发载体从"被移除的社区标签"迁移为hero 标题内部一个键盘可访问的按钮，同时完整保留上文的老虎机时间节奏与赔率参数。这是一次典型的无障碍（a11y）改造：

• 语义上：由非语义的"标签（label）"改为真正的<button>元素，屏幕阅读器可以识别其为可交互控件；
• 键盘操作：按钮必须可获得焦点（focusable），回车/空格可触发，并通过:focus-visible提供可见的焦点环；
• 契约不变：800ms 三连击判定、三段停轮、双重赔率、特效与冷却全部沿用，不因入口变化而改变玩法。

仓库 src/styles.css 中保留的.home-v2-headline-trigger样式（约 L25269-L25279）与此方向完全吻合：

.home-v2-headline-trigger { all: unset; /* 重置浏览器默认按钮样式，融入 hero 标题 */ display: flex; width: 100%; cursor: pointer; border-radius: var(--oc-radius-control); } .home-v2-headline-trigger:focus-visible { outline: 2px solid var(--hv2-accent); /* 键盘焦点可见环 */ outline-offset: 8px; }

从源码结构看，.home-v2-headline-trigger通过all: unset将按钮视觉完全"隐形"嵌入标题排版，同时用cursor: pointer保留鼠标可发现性，focus-visible焦点环则保证纯键盘用户在 Tab 导航时能看到明确的操作目标。这组样式与回归说明中"keyboard-accessible button inside the hero headline"的提议一一对应，可以推断它正是该 PR 实现时留下的产物。

七、彩蛋的移除：6c0163f与 typeahead 特性

回归说明记录的最后一次变更：

The easter egg was removed fromsrc/routes/index.tsxin commit6c0163fby Patrick Erichsen on 2026-04-28 as part offeat: add skills plugins search typeahead.

2026-04-28，Patrick Erichsen 在实现"skills/plugins 搜索 typeahead"特性时，从 src/routes/index.tsx 中移除了彩蛋代码。这一点在当前源码中可以得到验证：现在首页 hero 的标题是一个静态元素：

<h1 className="home-v2-headline oc-hero-title"> <span className="home-v2-action-word home-v2-static-headline">Claws for your Claws</span> </h1>

（见 src/routes/index.tsx）不再包含任何老虎机组件或三连击逻辑。同时需要注意：虽然 TSX 中的彩蛋逻辑已被移除，但src/styles.css中整套老虎机样式（.home-v2-headline-slots、.home-v2-slot-reel、home-v2-slotBlur/home-v2-slotLand/home-v2-jackpot关键帧、金色/水色字词、龙虾与五彩纸屑层）以及.home-v2-headline-trigger按钮样式仍然保留在样式表里（两组几乎相同的定义块分别位于约 L21736-L21852 与 L25366-L25482）。从仓库现状推断，这些属于"逻辑移除后遗留的样式定义"，也可能是为后续重新引入预留的资产——源码层无法进一步确证意图，但这份回归说明本身为将来任何"恢复彩蛋"的尝试提供了完整的契约文档。

八、UI 契约测试：对 hero 交互性的隐式约束

彩蛋虽然被移除，但它留下的一个设计约束仍被测试守护着。仓库中的 UI 契约测试 src/tests/ui-design-contract.test.ts（"requires the static hero and canonical home catalog"用例，约 L407-L421）对首页 hero 作出了如下断言：

expect(homeSource).toContain("home-v2-headline oc-hero-title"); expect(homeSource).toContain('<span className="home-v2-action-word home-v2-static-headline">'); expect(cssRule(css, ".home-v2-headline")).not.toMatch(/(?:cursor: default|user-select: none)/); expect(cssRule(css, ".home-v2-static-headline")).toContain("color: var(--oc-accent-primary)"); expect(css.lastIndexOf(".home-v2-static-headline")).toBeGreaterThan( css.lastIndexOf(".home-v2-action-word"), );

其中两条值得注意：

1. .home-v2-headline不得包含cursor: default或user-select: none——这保证标题区域保持"可交互、可选中"的表观特征，为将来把标题再次改造成可点击触发载体留出契约空间；
2. 静态标题.home-v2-static-headline的声明必须出现在.home-v2-action-word之后——约束样式表中的层叠顺序，确保静态文案的颜色（--oc-accent-primary）真正生效，而不是被动态字词样式覆盖。

这类"契约测试"（contract test）的思路值得借鉴：不直接测试已被移除的功能，而是把与功能相关的样式与 DOM 结构约束固化下来，任何未来改动如果破坏 hero 的可交互性或层叠顺序，都会在 CI 中立即失败。这与回归说明"记录曾经存在过的行为"的目的互为表里——说明是给开发者读的文档，测试是给 CI 读的文档。

九、同族彩蛋参照：Footer 与 Bring-Skills 区块的揭示机制

ClawHub 的彩蛋并非孤例。与 hero 老虎机同源、且当前仍在代码中存活的，还有两类"揭示式"（reveal）彩蛋，可作为横向参照：

• 页脚彩蛋src/components/Footer.tsx：FooterEasterBackdrop使用useEffect注册滚动监听，通过requestAnimationFrame计算--footer-easter-reveal（0=隐藏、1=完全揭示）做滚动视差；同时用onPointerMove/onPointerLeave写入--footer-easter-x/y/intensity变量驱动 ASCII 字符发光，并在prefers-reduced-motion: reduce下直接跳过动画、强制完全揭示——这是一个值得抄作业的无障碍细节；
• "Bring Your Own Skills"区块src/components/HomeBringSkillsSection.tsx：注释明确写着 "Same composition as the footer easter egg"，复用了"静态图片栈 + 指针追踪 ASCII 发光"的组合，配合aria-hidden="true"将装饰层对辅助技术隐藏。

两处实现都展示了同一种彩蛋设计范式：装饰层与交互层分离——装饰层用 CSS 变量驱动、aria-hidden屏蔽、pointer-events放行；交互层用真实可聚焦控件承载。hero 老虎机彩蛋如果按回归说明中的 PR 方向恢复，也应遵循同一范式：触发按钮负责语义与键盘操作，转轮与纸屑纯视觉层不参与交互语义。

十、从回归说明提炼的验收清单

回归说明的"Expected behavior"一节，本质上是一份可直接转换为测试用例的验收清单。整理如下，供任何计划恢复或重建该彩蛋的团队直接采用：

小结

Hero 老虎机彩蛋从 2026-04-18 引入、两次调参与加固（cb75011赔率、fec5db7资源清理）、到 2026-04-28 随 typeahead 特性被移除，生命周期不过十天，却沉淀了一份高质量的回归说明。它的价值不在彩蛋本身，而在于把一套"隐藏交互"的全部可验证参数（触发窗口、停轮节奏、双重赔率、三连重滚规则、展示/冷却双窗口）以文档形式固化下来——即使代码已删，任何人仍可据此精确重建，并有 src/styles.css 中遗留的完整样式定义与 src/tests/ui-design-contract.test.ts 中的契约测试作为实现锚点。对任何做产品化前端（尤其是带彩蛋、动效与隐藏交互的落地页）的团队来说，这套"契约文档 + 残留样式 + 契约测试"的组合，就是隐藏功能可维护性的最佳示范。

• 后端
• 前端
• AI 技能
• AI 插件
• 搜索引擎