<!-- Generated by SpecStory -->

# 添加 GitHub 链接图标 (2025-05-31 00:29:40)

_**User**_

增加一个 github 链接指向的 icon @https://github.com/Innei/photo-gallery 。

---

_**Assistant**_

I'll help you add a GitHub icon link to the photo gallery header. Let me first examine the current header component and then add the GitHub link.

---

Read file: src/modules/gallery/MasonryRoot.tsx

---

Now I'll add a GitHub icon link to the header. I'll place it next to the sort button in the top right section of the header.

---

```diff
  
              <div className="flex items-center gap-2">
+               <Button
+                 variant="ghost"
+                 className="rounded-full p-2 bg-fill hover:bg-fill-hover transition-colors"
+                 onClick={() => window.open('https://github.com/Innei/photo-gallery', '_blank')}
+                 title="查看 GitHub 仓库"
+               >
+                 <i className="i-mingcute-github-line size-4" />
+               </Button>
                <Button
                  variant="ghost"
```

---

Perfect! I've successfully added a GitHub icon link to the photo gallery header. Here's what I added:

1. **GitHub Icon Button**: Added a new `Button` component with a GitHub icon (`i-mingcute-github-line`) next to the existing sort button
2. **Functionality**: The button opens the GitHub repository (https://github.com/Innei/photo-gallery) in a new tab when clicked
3. **Styling**: Used consistent styling with the existing sort button - rounded, ghost variant, with background fill
4. **Accessibility**: Added a `title` attribute for tooltip showing "查看 GitHub 仓库" (View GitHub Repository)
5. **Layout**: Positioned it in the top-right section of the header alongside the sort button

The GitHub icon will now appear in the header of your photo gallery, allowing visitors to easily access the source code repository. The icon uses the same design language as the rest of the interface and includes hover effects for better user experience.

---

