Skip to content

feat(landing): 新增 Hero 公开落地页(Linear 风格 + 路由能力动画面板)#210

Merged
g1331 merged 3 commits into
masterfrom
feat/hero-landing
Jun 14, 2026
Merged

feat(landing): 新增 Hero 公开落地页(Linear 风格 + 路由能力动画面板)#210
g1331 merged 3 commits into
masterfrom
feat/hero-landing

Conversation

@g1331

@g1331 g1331 commented Jun 14, 2026

Copy link
Copy Markdown
Owner

Summary

为根路径 / 新增公开落地页:未登录访客看到 Hero(活体终端产品视觉)+ 核心能力(6 张能力专属动画面板)+ 底部 CTA;已登录用户按角色跳回工作台(member → /portaladmin → /dashboard)。整体 Linear 风格、dark-first、amber 暖金强调色,纯 CSS 动画无新依赖。

Related Issue

无直接关联 issue(用户主动发起的落地页视觉迭代)。

Type of Change

  • New feature (non-breaking change that adds functionality)

Changes

  • Hero 区:徽章 + 高亮标题 + 副标题 + 主/次 CTA(/login 主行动、「查看文档」指向 GitHub Pages APP_DOCS_URL),Ripple 涟漪按钮,错峰淡入上移入场。
  • Hero 中部「活体终端」:curl 请求卡 + 闪烁光标 → 路由结果条 → ● LIVE 实时指标带 + sparkline;移除早期试做的 CRT 扫描线。
  • 核心能力区:6 张卡的静态图标替换为各能力专属的「迷你运维面板」,借后台路由决策时间线 / 熔断 LED / 计费快照的视觉语言,每张都是真实字段 + 状态图标 + 运动层:
    • 按能力路由:候选上游决策列表(●/○/✗、熔断图标、w 权重),命中行 emerald 呼吸 + 数据包流过
    • 负载均衡与熔断:心跳 LED + 负载条高光横扫,异常上游熔断转红 OPEN
    • 配额与并发:req/conc 计量条逼近红色上限线,排队点雷达式扩散
    • 按请求计费:计费小票字段流 + 金额高光扫过与呼吸
    • API Key 分发:密钥卡 + 授权上游药丸雷达式点亮
    • 故障转移与会话亲和:重试时间线,红包失败 → 改道 → 绿包接管
  • 整页背景:顶部一层连续 amber 柔光 + 渐隐网格,消除 section 间光线断层。
  • 动画基建:新增 keyframe vr-cap-select / vr-cap-sheen / vr-cap-trace,抽出 Sheen / Trace 复用组件;清理不再使用的死 keyframe。
  • i18n:en / zh-CN 双语补全 hero 文案。

Test Plan

  • Local tests pass (pnpm test:run)(本 PR 未新增针对性测试,落地页视觉测试按约定由作者后续补充)
  • Type check passes (pnpm exec tsc --noEmit)
  • Lint passes (pnpm lint) + Prettier check
  • Manual testing completed(逐版在本地 dev server 的 /zh-CN/en 浏览器确认)

Checklist

  • Code follows the project's coding standards
  • Tests have been added where necessary(落地页测试由作者另行补充)
  • Documentation has been updated (if applicable)(无需)
  • Changes do not introduce security vulnerabilities(纯前端视觉,无)
  • Commit messages follow conventions(Conventional Commits)

Screenshots

落地页是 LandingPage(client component)经 auth-provider 边界渲染,SSR 阶段不落地 DOM,无法用 curl 抓取静态截图。请本地 pnpm dev 后查看:

  • /zh-CN/en:Hero 活体终端、6 张能力专属动画面板、底部 CTA
  • 切换深浅主题(ThemeToggle)确认配色正确
  • 系统开启「减少动态效果」后,运动层隐去、面板静态可读

Additional Notes

  • 动画全部纯 CSS(高光横扫 / 数据包流动 / 雷达扩散 / 选中呼吸),无 framer-motion 等新依赖;底层信息均为静态 DOM,prefers-reduced-motion 下运动层自动隐去、信息不丢。
  • 配色只用 amber + 状态绿/红,规避蓝/紫(warnIfForbiddenVisualStyle),深浅主题走设计 token。
  • 验证以 tsc / eslint / prettier 静态检查 + 本地浏览器目测为准。
  • push 时 GitHub 提示默认分支上有 2 个 dependabot 漏洞(与本 PR 改动无关)。

g1331 added 3 commits June 13, 2026 23:32
根路径 / 由跳转登录改为渲染公开落地页:Hero 首屏 + 核心能力卡片 + 底部 CTA;
已登录用户按角色跳回 dashboard/portal。

- page.tsx 渲染 LandingPage(client 组件,承载登录态跳转与鼠标跟随光斑)
- 新增 landing 组件:hero/feature/cta section、ripple-button、landing-page
- ripple-button:点击先播涟漪、延迟 300ms 再导航,涟漪叠在背景之上不被遮挡,
  修饰键/键盘/reduced-motion 走原生导航
- globals.css 新增 vr-ripple / vr-hero-rise keyframes 与工具类
- messages en/zh-CN 新增 hero namespace
- 沿用站内 amber 暖色设计语言,禁用蓝紫,零新依赖,尊重 prefers-reduced-motion
- 新增 hero-terminal.tsx:模拟终端卡片,用一段 curl 请求 + 路由结果条
  (路由命中 / 负载均衡 / 延迟 / 计费)具象呈现网关核心价值
- 主标题关键词 amber 高亮(t.rich + <hi> 标记,中英文对应)
- 移除鼠标跟随光斑(观感不佳)
- 装饰背景改为整页一层连续的顶部柔光 + 渐隐网格,取代按区块各贴背景,
  从成因上消除 Hero 与下方区块之间的光线断层
- 终端卡片不再叠加独立背景光池,避免与顶部主光源形成「暗谷→亮带」断层,
  改由卡片自带 shadow-cf-glow-medium 边缘辉光立住
- i18n:新增 hero.terminal.caption(en / zh-CN)
将核心能力 6 张卡的静态图标,替换为各能力专属的「迷你运维面板」,
借用后台路由决策时间线 / 熔断 LED / 计费快照的视觉语言,每张卡都是
真实字段 + 状态图标 + 明显的运动层:

- 按能力路由:候选上游决策列表(●/○/✗ 三态、熔断图标、w 权重),
  命中行 emerald 呼吸 + 数据包沿命中链路流过
- 负载均衡与熔断:心跳 LED + 负载条高光横扫,异常上游熔断转红
- 配额与并发:req/conc 计量条逼近红色上限线,排队点雷达式扩散
- 按请求计费:计费小票字段流 + 金额高光扫过与呼吸
- API Key 分发:密钥卡 + 授权上游药丸雷达式点亮
- 故障转移与会话亲和:重试时间线,红数据包失败 → 改道 → 绿数据包接管

其余打磨:
- Hero 中部「活体终端」移除 CRT 扫描线,保留实时指标带与 sparkline
- 「查看文档」CTA 改指 GitHub Pages(APP_DOCS_URL)
- 新增动画 keyframe vr-cap-select / vr-cap-sheen / vr-cap-trace,
  抽出 Sheen / Trace 复用组件;清理不再使用的 vr-flow-pulse 及
  vr-cap-run / vr-cap-fill / vr-cap-alert 死 keyframe

底层信息均为静态 DOM,运动层仅叠加;reduced-motion 下运动层隐去、
面板静态可读,配色只用 amber + 状态绿/红,深浅主题走 token。
@codecov

codecov Bot commented Jun 14, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 0.98039% with 101 lines in your changes missing coverage. Please review.
✅ Project coverage is 72.91%. Comparing base (1db96c2) to head (4a5832c).
✅ All tests successful. No failed tests found.

Additional details and impacted files
@@            Coverage Diff             @@
##           master     #210      +/-   ##
==========================================
- Coverage   73.48%   72.91%   -0.57%     
==========================================
  Files         187      194       +7     
  Lines       12855    12957     +102     
  Branches     4283     4322      +39     
==========================================
+ Hits         9446     9448       +2     
- Misses       2114     2215     +101     
+ Partials     1295     1294       -1     
Flag Coverage Δ
verify 72.91% <0.98%> (-0.57%) ⬇️
🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@g1331 g1331 merged commit d3387a9 into master Jun 14, 2026
12 checks passed
@g1331 g1331 deleted the feat/hero-landing branch June 14, 2026 04:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant