# 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

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