docs: add home open source repo link hover follow-up PRD
This commit is contained in:
Ubuntu
256
prd-home-open-source-repo-link-hover-followup.md
Normal file
256
prd-home-open-source-repo-link-hover-followup.md
Normal file
@@ -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
|
||||
|
||||
这样既保留可点击性，也不会破坏卡片层级。
|
||||
Reference in New Issue
Block a user