From fdfe03dbe4a2857862dcb4a86033cf40346fc25b Mon Sep 17 00:00:00 2001
From: Ubuntu <ubuntu@localhost.localdomain>
Date: Mon, 18 May 2026 11:48:30 +0800
Subject: [PATCH] docs: add home open source repo link hover follow-up PRD

---
 ...me-open-source-repo-link-hover-followup.md | 256 ++++++++++++++++++
 1 file changed, 256 insertions(+)
 create mode 100644 prd-home-open-source-repo-link-hover-followup.md

diff --git a/prd-home-open-source-repo-link-hover-followup.md b/prd-home-open-source-repo-link-hover-followup.md
new file mode 100644
index 0000000..6072e80
--- /dev/null
+++ b/prd-home-open-source-repo-link-hover-followup.md
@@ -0,0 +1,256 @@
+# 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`
+
+### 目标元素
+当前副标题大致是：
+
+```jinja2
+{% 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 方向
+
+```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);
+}
+```
+
+### 如果觉得下划线太重
+可替代为底边线风格：
+
+```css
+.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
+
+这样既保留可点击性，也不会破坏卡片层级。
\ No newline at end of file