Elaina/ephron-ren-prd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
946949c2fd20e7137170ab7a4845c2af9ff04343
ephron-ren-prd/prd-home-open-source-repo-link-hover-followup.md

6.0 KiB
Raw Blame History

Home 页开源贡献仓库名 Hover 样式优化 Follow-up PRD

背景

在“开源贡献”卡片新增 repo_url 后，推荐做法是将副标题中的“项目 / 仓库名称”渲染为可点击链接。这样信息结构更清晰：

  • 仓库名 → 仓库主页
  • 卡片按钮 → 贡献详情

但如果直接复用现有 project-badge-link 或其他带明显底色变化的 hover 样式，会出现一个问题：

  • 仓库名是副标题级信息
  • hover 时如果出现明显底色块，尤其是黄色背景，会破坏整张卡片的视觉层级
  • 用户反馈当前“鼠标悬停不好看”，并明确要求：不要加黄色背景

因此本次做一个很小的 follow-up，仅优化仓库名链接在 hover 时的视觉反馈。

目标

产品目标

让开源贡献卡片中的仓库名链接：

  • 看起来是可点击的
  • 悬停时有反馈
  • 但不抢主标题和“查看贡献”按钮的视觉权重

设计约束

  • 不要加黄色背景
  • 不要让 hover 效果看起来像 badge/button
  • 不要引入和卡片整体风格不一致的强烈跳变

问题定义

如果直接把仓库名链接套用按钮/徽章类 hover 效果，会有几个问题：

  1. 视觉角色错位

    • 仓库名本质是“副标题链接”
    • 不是 CTA 按钮

  2. hover 反馈过重

    • 背景色块会把副标题错误地抬升成主要交互元素

  3. 与卡片底部按钮冲突

    • 底部 查看贡献 按钮已经承担主要跳转 CTA
    • 仓库名链接应更轻量

  4. 黄色背景与页面主题不协调

    • 页面整体是深色 + 蓝色强调
    • 黄色 hover 容易显得突兀

设计原则

原则 1：仓库名链接应是“文字链接”，不是“按钮”

hover 反馈应围绕：

  • 颜色
  • 下划线 / 边框
  • 轻微位移

而不是：

  • 背景块
  • 实心 badge
  • 强烈反色

原则 2：反馈轻，但要明确

用户悬停时应能明确意识到它可点击，但不应该造成视觉噪音。

原则 3：服从现有主题

优先使用当前页面已有的：

  • accent 蓝
  • text-secondary / text-primary
  • border-hover

不要引入新高饱和强调色。

推荐方案

一、不要复用 project-badge-link 给仓库名

如果仓库名链接使用：

  • project-badge-link
  • 或任何带背景 hover 的 badge/button class

就容易出现：

  • 黄色背景
  • 胶囊感
  • CTA 误判

结论

仓库名链接应使用单独样式类，不复用 badge/button hover 样式。

二、推荐新增专用类：timeline-company-link

目标元素

当前副标题大致是：

{% if item.role %}
<a href="{{ item.repo_url }}" target="_blank" rel="noopener" class="timeline-company timeline-company-link">{{ item.role }}</a>
{% endif %}

三、推荐 hover 样式

默认态

保持接近当前 timeline-company：

  • 使用当前 accent 蓝色
  • 无背景
  • 无实心边框
  • 字重保持现有副标题层级

hover 态推荐

建议采用以下组合：

  1. 颜色轻微提亮
  2. 显示下划线（或底边线）
  3. 可选极轻微 translateX(1px) / opacity 变化
  4. 绝不使用黄色背景

推荐 CSS 方向

.timeline-company-link {
    text-decoration: none;
    color: var(--accent);
    transition: color 0.15s ease, text-decoration-color 0.15s ease, transform 0.15s ease;
}

.timeline-company-link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
    transform: translateX(1px);
}

如果觉得下划线太重

可替代为底边线风格：

.timeline-company-link {
    text-decoration: none;
    color: var(--accent);
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.timeline-company-link:hover {
    color: var(--accent-hover);
    border-bottom-color: currentColor;
    transform: translateX(1px);
}

这通常会比直接背景高亮更克制。

四、禁止方案

以下 hover 表现本次明确不允许：

1. 黄色背景

例如：

  • background: var(--warning)
  • background: #eab308
  • 或任何接近 warning badge 的 hover 块

2. 实心胶囊按钮化

例如：

  • padding 突增
  • border-radius badge 化
  • hover 时出现胶囊底色

3. 强烈缩放 / 跳动

例如：

  • scale(1.05+)
  • 明显位移
  • 阴影突变

仓库名链接不应显得比主按钮更活跃。

实施要求

必改文件

  • home/templates/index.html

如果当前样式写在该模板内，则直接在模板内增加专用类即可。

前台结构要求

仓库名存在且有 repo_url 时：

  • 使用 timeline-company timeline-company-link

没有 repo_url 时：

  • 保持原本纯文本 timeline-company

测试 / 验收要求

可验收点

  1. 仓库名在 hover 时不出现黄色背景
  2. 仓库名 hover 时有轻量反馈（颜色 / 下划线 / 轻微位移）
  3. 仓库名视觉上仍是副标题，不像按钮
  4. 不影响卡片底部“查看贡献”按钮样式

如果补前端测试不方便

这次可以接受以人工验收为主，因为主要是视觉样式调整。

验收标准

必须满足

  • hover 时没有黄色背景
  • hover 时效果比 CTA 按钮更轻
  • hover 后仍与深色主题协调
  • 不破坏开源贡献卡片整体排版

推荐满足

  • hover 时颜色略提亮
  • 有下划线或底边线提示
  • 仅有极轻微位移，不做夸张动画

非目标

本次 follow-up 不包含：

  • 重做开源贡献卡片整体视觉风格
  • 改造“查看贡献”按钮样式
  • 新增多按钮布局
  • 调整主标题 / 副标题结构本身

结论

这个问题本质上不是“仓库名要不要可点击”，而是“仓库名链接不该长得像按钮”。

因此本次最合适的修正方式是：

  • 为仓库名链接提供独立 hover 样式
  • 使用轻量的文字链接反馈
  • 明确避免黄色背景和 badge 化 hover

这样既保留可点击性，也不会破坏卡片层级。

Reference in New Issue View Git Blame Copy Permalink