feat(landing): 新增 Hero 公开落地页(Linear 风格 + 路由能力动画面板)#210
Merged
Conversation
根路径 / 由跳转登录改为渲染公开落地页: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 Report❌ Patch coverage is 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
🚀 New features to boost your workflow:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
为根路径
/新增公开落地页:未登录访客看到 Hero(活体终端产品视觉)+ 核心能力(6 张能力专属动画面板)+ 底部 CTA;已登录用户按角色跳回工作台(member → /portal,admin → /dashboard)。整体 Linear 风格、dark-first、amber 暖金强调色,纯 CSS 动画无新依赖。Related Issue
无直接关联 issue(用户主动发起的落地页视觉迭代)。
Type of Change
Changes
/login主行动、「查看文档」指向 GitHub PagesAPP_DOCS_URL),Ripple 涟漪按钮,错峰淡入上移入场。● LIVE实时指标带 + sparkline;移除早期试做的 CRT 扫描线。vr-cap-select/vr-cap-sheen/vr-cap-trace,抽出Sheen/Trace复用组件;清理不再使用的死 keyframe。Test Plan
pnpm test:run)(本 PR 未新增针对性测试,落地页视觉测试按约定由作者后续补充)pnpm exec tsc --noEmit)pnpm lint) + Prettier check/zh-CN与/en浏览器确认)Checklist
Screenshots
落地页是
LandingPage(client component)经auth-provider边界渲染,SSR 阶段不落地 DOM,无法用 curl 抓取静态截图。请本地pnpm dev后查看:/zh-CN与/en:Hero 活体终端、6 张能力专属动画面板、底部 CTAAdditional Notes
prefers-reduced-motion下运动层自动隐去、信息不丢。warnIfForbiddenVisualStyle),深浅主题走设计 token。tsc/eslint/prettier静态检查 + 本地浏览器目测为准。