feat(footer): 新增友情链接 - #23
Merged
Merged
Conversation
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - 我发现了 1 个问题，并给出了一些整体反馈：
- 友链弹出层目前只能通过悬停/点击图标按钮发现；建议增加键盘 focus/blur 处理（例如使用 onFocus/onBlur 或焦点陷阱）来保证键盘和读屏用户也能把它当成一个合规的菜单/对话框来访问。
MAA和MaaFramework这两个条目目前共用同一个iconSrc（/friend/maa.png）；如果它们是两个希望在视觉上区分的品牌，建议使用不同的图标，或者在文案上说明共用图标是有意为之。
给 AI Agent 的提示词
Please address the comments from this code review:
## Overall Comments
- 友链弹出层目前只能通过悬停/点击图标按钮发现；建议增加键盘 focus/blur 处理（例如使用 onFocus/onBlur 或焦点陷阱）来保证键盘和读屏用户也能把它当成一个合规的菜单/对话框来访问。
- `MAA` 和 `MaaFramework` 这两个条目目前共用同一个 `iconSrc`（`/friend/maa.png`）；如果它们是两个希望在视觉上区分的品牌，建议使用不同的图标，或者在文案上说明共用图标是有意为之。
## Individual Comments
### Comment 1
<location path="app/components/Hero.tsx" line_range="454-456" />
<code_context>
+ </Button>
+ </div>
+
+ <div
+ className="group/friend relative w-full md:w-auto"
+ onMouseEnter={() => setShowFriendLinks(true)}
+ onMouseLeave={() => setShowFriendLinks(false)}
+ >
</code_context>
<issue_to_address>
**suggestion:** 通过 hover + click 共同控制 `showFriendLinks` 会导致桌面端状态不一致，并在纯触摸设备上几乎无法使用。
当前可见性既受 hover（`onMouseEnter/onMouseLeave`）的控制，又受点击切换 `showFriendLinks` 的控制。在桌面端，这会导致在悬停时点击，面板可能立刻关闭；而在纯触摸设备上不会触发 hover，因此打开/关闭行为会变得不一致且更难使用。建议在每个断点下采用单一且一致的交互模式（例如：指针设备使用 hover，触摸设备仅使用点击），或者以 hover 作为基础，再为触摸设备提供点击兜底逻辑，并结合外部点击/失焦关闭的方式。
建议的实现方式：
```typescript
<div
className="group/friend relative w-full md:w-auto"
>
```
1. 确保在这个容器内部，`showFriendLinks` 只由点击（或另一种单一的交互模式）控制，并移除文件中其他位置基于 hover 的状态更新。
2. 如果你希望桌面端使用 hover、移动端使用点击，可以改为：
- 对有指针的桌面设备，使用纯 CSS 的 `group-hover` 来控制可见性；
- 保留 `showFriendLinks` 作为触摸端的“仅点击”兜底逻辑，并通过指针能力检测（例如在 `useEffect` 或事件处理函数中使用 `window.matchMedia('(hover: none)')`）来控制是否启用。
3. 如果仍然希望使用基于 hover 的显示面板，建议增加外部点击/失焦处理（例如通过 `useEffect` 和 `document.addEventListener('mousedown', ...)`），在点击外部时关闭面板，并以 `showFriendLinks` 作为单一可信的状态来源。
</issue_to_address>帮我变得更有用！请在每条评论上点 👍 或 👎，我会根据你的反馈持续改进评审质量。
Original comment in English
Hey - I've found 1 issue, and left some high level feedback:
- The friend-links popover is only discoverable via hover/click on the icon button; consider adding keyboard focus/blur handling (e.g., onFocus/onBlur or a focus trap) so it’s accessible to keyboard and screen-reader users as a proper menu/dialog.
- Both
MAAandMaaFrameworkentries share the sameiconSrc(/friend/maa.png); if they’re intended to be visually distinct brands, consider using separate icons or clarifying that the shared icon is intentional.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The friend-links popover is only discoverable via hover/click on the icon button; consider adding keyboard focus/blur handling (e.g., onFocus/onBlur or a focus trap) so it’s accessible to keyboard and screen-reader users as a proper menu/dialog.
- Both `MAA` and `MaaFramework` entries share the same `iconSrc` (`/friend/maa.png`); if they’re intended to be visually distinct brands, consider using separate icons or clarifying that the shared icon is intentional.
## Individual Comments
### Comment 1
<location path="app/components/Hero.tsx" line_range="454-456" />
<code_context>
+ </Button>
+ </div>
+
+ <div
+ className="group/friend relative w-full md:w-auto"
+ onMouseEnter={() => setShowFriendLinks(true)}
+ onMouseLeave={() => setShowFriendLinks(false)}
+ >
</code_context>
<issue_to_address>
**suggestion:** Hover + click interaction for `showFriendLinks` can lead to inconsistent state on desktop and unusable behavior on pure touch devices.
Visibility is being driven both by hover (`onMouseEnter/onMouseLeave`) and by click toggling `showFriendLinks`. On desktop this can cause the panel to immediately close when clicking while hovered, and on touch-only devices hover never fires so the open/close behavior is inconsistent and harder to use. Consider using a single, consistent pattern per breakpoint (e.g., hover for pointer devices, click-only for touch) or deriving visibility from hover with a click fallback for touch, possibly combined with outside-click/blur to close.
Suggested implementation:
```typescript
<div
className="group/friend relative w-full md:w-auto"
>
```
1. Ensure that `showFriendLinks` is only controlled via click (or another single interaction pattern) inside this container, and remove any other hover-driven state updates elsewhere in the file.
2. If you want desktop hover and mobile click behavior, you can instead:
- Use CSS-only `group-hover` to control visibility for pointer/desktop.
- Keep `showFriendLinks` as a click-only fallback for touch, and gate usage with a pointer-capability check (e.g., `window.matchMedia('(hover: none)')`) in a `useEffect` or handler.
3. If a hover-based showing panel is still desired, consider adding an outside-click/blur handler (e.g., via `useEffect` and `document.addEventListener('mousedown', ...)`) to close the panel when clicking away, using `showFriendLinks` as the single source of truth.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Comment on lines
+454
to
+456
| <div | ||
| className="group/friend relative w-full md:w-auto" | ||
| onMouseEnter={() => setShowFriendLinks(true)} |
There was a problem hiding this comment.
suggestion: 通过 hover + click 共同控制 showFriendLinks 会导致桌面端状态不一致，并在纯触摸设备上几乎无法使用。
当前可见性既受 hover（onMouseEnter/onMouseLeave）的控制，又受点击切换 showFriendLinks 的控制。在桌面端，这会导致在悬停时点击，面板可能立刻关闭；而在纯触摸设备上不会触发 hover，因此打开/关闭行为会变得不一致且更难使用。建议在每个断点下采用单一且一致的交互模式（例如：指针设备使用 hover，触摸设备仅使用点击），或者以 hover 作为基础，再为触摸设备提供点击兜底逻辑，并结合外部点击/失焦关闭的方式。
建议的实现方式：
<div
className="group/friend relative w-full md:w-auto"
>- 确保在这个容器内部，
showFriendLinks只由点击（或另一种单一的交互模式）控制，并移除文件中其他位置基于 hover 的状态更新。 - 如果你希望桌面端使用 hover、移动端使用点击，可以改为：
- 对有指针的桌面设备，使用纯 CSS 的
group-hover来控制可见性； - 保留
showFriendLinks作为触摸端的“仅点击”兜底逻辑，并通过指针能力检测（例如在useEffect或事件处理函数中使用window.matchMedia('(hover: none)')）来控制是否启用。
- 对有指针的桌面设备，使用纯 CSS 的
- 如果仍然希望使用基于 hover 的显示面板，建议增加外部点击/失焦处理（例如通过
useEffect和document.addEventListener('mousedown', ...)），在点击外部时关闭面板，并以showFriendLinks作为单一可信的状态来源。
Original comment in English
suggestion: Hover + click interaction for showFriendLinks can lead to inconsistent state on desktop and unusable behavior on pure touch devices.
Visibility is being driven both by hover (onMouseEnter/onMouseLeave) and by click toggling showFriendLinks. On desktop this can cause the panel to immediately close when clicking while hovered, and on touch-only devices hover never fires so the open/close behavior is inconsistent and harder to use. Consider using a single, consistent pattern per breakpoint (e.g., hover for pointer devices, click-only for touch) or deriving visibility from hover with a click fallback for touch, possibly combined with outside-click/blur to close.
Suggested implementation:
<div
className="group/friend relative w-full md:w-auto"
>- Ensure that
showFriendLinksis only controlled via click (or another single interaction pattern) inside this container, and remove any other hover-driven state updates elsewhere in the file. - If you want desktop hover and mobile click behavior, you can instead:
- Use CSS-only
group-hoverto control visibility for pointer/desktop. - Keep
showFriendLinksas a click-only fallback for touch, and gate usage with a pointer-capability check (e.g.,window.matchMedia('(hover: none)')) in auseEffector handler.
- Use CSS-only
- If a hover-based showing panel is still desired, consider adding an outside-click/blur handler (e.g., via
useEffectanddocument.addEventListener('mousedown', ...)) to close the panel when clicking away, usingshowFriendLinksas the single source of truth.
Member
Author
|
|
站点名称：终末地-协议终端 / ENDFIELD TERMINAL |
|
名称：终末地地图站。 |
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
3 participants
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 by Sourcery
在主视觉区域新增“友情链接”入口和常量配置，用于展示外部合作伙伴站点。
New Features:
Enhancements:
Original summary in English
Summary by Sourcery
Add a friend links entry point and constants to display external partner sites from the hero section.
New Features:
Enhancements: