Repository navigation
feat(profile): Profile 链接支持图标/横幅两种样式并可在设置面板切换 - #652
Open
Neko-Tsuki wants to merge 2 commits into
Open
Neko-Tsuki wants to merge 2 commits into
Neko-Tsuki wants to merge 2 commits into
Conversation
Profile 组件的社交链接原先只有「全图标」或「按 links[].showName 逐条决定」 两种硬编码形态，现抽象为可切换的显示模式： - icon：紧凑方形按钮，只显示图标；单条链接仍可用 showName 打开名称（原行为） - banner：横向宽按钮、常显名称，换行按内容宽度决定、同行按钮再拉伸铺满 两种模式共用同一份 DOM，形态由 <html data-profile-link-mode> 上的 CSS （新增 src/styles/profile.css）切换，因此设置面板里的切换即时生效。 新增 profileConfig.linkDisplayMode 作为默认值，displaySettingsConfig 新增 profileLinkModeSwitchable 开关，设置面板「外观 → Profile 链接样式」可在运行时 切换并记忆到 localStorage，首帧前由 Layout.astro 的内联脚本应用以避免跳变。 面板内按钮组用 auto-fit 网格自适应列数，选项变多或标签变长都不会溢出。 顺带将 Profile.astro 中 links.length > 1 分支加单条特判的重复渲染逻辑 统一为一次 links.map()，行为等价。 Co-Authored-By: Claude Code <noreply@anthropic.com>
✅ Deploy Preview for demo-firefly ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
审查者指南本 PR 将 Profile 社交链接从固定图标/逐条名称逻辑扩展为可配置的图标和横幅两种模式，使用共享 DOM 和 CSS 支持即时响应式切换，并在显示设置中提供本地持久化、默认值恢复及多语言支持，同时保持旧配置兼容。 运行时 Profile 链接样式切换时序图sequenceDiagram
participant User
participant DisplaySettingsIntegrated
participant SettingUtils
participant LocalStorage
participant Document
participant ProfileCSS
User->>DisplaySettingsIntegrated: switchProfileLinkMode(mode)
DisplaySettingsIntegrated->>SettingUtils: setProfileLinkMode(mode)
SettingUtils->>LocalStorage: setItem(profileLinkDisplayMode, mode)
SettingUtils->>Document: applyProfileLinkModeToDocument(mode)
Document->>ProfileCSS: update data-profile-link-mode
ProfileCSS-->>User: Profile links change immediately
初始 Profile 链接模式应用时序图sequenceDiagram
participant Browser
participant Layout
participant LocalStorage
participant Document
participant ProfileCSS
Browser->>Layout: load page
Layout->>LocalStorage: getItem(profileLinkDisplayMode)
LocalStorage-->>Layout: stored mode or null
Layout->>Document: set data-profile-link-mode
Document->>ProfileCSS: apply icon or banner rules
ProfileCSS-->>Browser: render Profile links without layout jump
文件级变更
提示与命令与 Sourcery 交互
自定义使用体验访问你的控制面板以便：
获取帮助Original review guide in EnglishReviewer's Guide本 PR 将 Profile 社交链接从固定图标/逐条名称逻辑扩展为可配置的 icon 与 banner 两种模式，使用共享 DOM 和 CSS 支持即时响应式切换，并在显示设置中提供本地持久化、默认值恢复及多语言支持，同时保持旧配置兼容。 Sequence diagram for runtime Profile link style switchingsequenceDiagram
participant User
participant DisplaySettingsIntegrated
participant SettingUtils
participant LocalStorage
participant Document
participant ProfileCSS
User->>DisplaySettingsIntegrated: switchProfileLinkMode(mode)
DisplaySettingsIntegrated->>SettingUtils: setProfileLinkMode(mode)
SettingUtils->>LocalStorage: setItem(profileLinkDisplayMode, mode)
SettingUtils->>Document: applyProfileLinkModeToDocument(mode)
Document->>ProfileCSS: update data-profile-link-mode
ProfileCSS-->>User: Profile links change immediately
Sequence diagram for initial Profile link mode applicationsequenceDiagram
participant Browser
participant Layout
participant LocalStorage
participant Document
participant ProfileCSS
Browser->>Layout: load page
Layout->>LocalStorage: getItem(profileLinkDisplayMode)
LocalStorage-->>Layout: stored mode or null
Layout->>Document: set data-profile-link-mode
Document->>ProfileCSS: apply icon or banner rules
ProfileCSS-->>Browser: render Profile links without layout jump
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
嘿——我发现了 2 个问题
面向 AI Agent 的提示
请处理本次代码审查中的评论：
## 单独评论
### 评论 1
<location path="src/components/widget/Profile.astro" line_range="60-78" />
<code_context>
+ // 图标 / 横幅两种模式共用同一份 DOM，由 html[data-profile-link-mode] 上的
+ // CSS（src/styles/profile.css）切换形态，这样才能在显示设置面板里即时切换。
+ // data-show-name 只对「仅图标」模式有意义：该模式下逐条决定是否显示名称。
+ const showName = item.showName ? "true" : "false";
if (item.url.startsWith("mailto:")) {
- const encodedEmail = encodeMailto(item.url);
- return <a rel="me" aria-label={item.name} href="#" data-encoded-email={encodedEmail} onclick={MAILTO_ONCLICK_SCRIPT},
- class="btn-regular rounded-lg h-10 gap-2 px-3 font-bold active:scale-95">
- <Icon name={item.icon} class="text-[1.5rem]"></Icon>
- {item.name}
- </a>
</code_context>
<issue_to_address>
**issue (broader_impact)：** 在仅图标模式下，恰好只有一个链接且 `showName: false` 的个人资料现在会隐藏链接名称，而被移除的单链接分支始终会渲染名称。这破坏了对有效单链接配置所声称的向后兼容行为。
**触发条件：** 当 `profileConfig.links` 恰好包含一个 `showName` 未设置或为 false 的项目时。
**建议修复：** 保留旧的单链接渲染行为，或者在新的 CSS/标记中明确并实现预期的单链接例外规则。
</issue_to_address>
### 评论 2
<location path="src/layouts/Layout.astro" line_range="559-562" />
<code_context>
+ defaultProfileLinkMode: profileConfig.linkDisplayMode ?? "icon",
+ }}>
+ (function() {
+ var stored = localStorage.getItem("profileLinkDisplayMode");
+ var mode = stored === "icon" || stored === "banner" ? stored : defaultProfileLinkMode;
+ document.documentElement.setAttribute("data-profile-link-mode", mode);
+ })();
+ </script>
+
</code_context>
<issue_to_address>
**issue (bug_risk)：** 存储访问失败会导致个人资料链接模式无法应用到文档。内联脚本读取 `localStorage` 时没有处理 `SecurityError`；当存储不可用或 `setItem` 失败时，`setProfileLinkMode` 会在调用 `applyProfileLinkModeToDocument` 之前返回，因此设置面板可能显示了新模式，但个人资料仍保持旧模式。
**触发条件：** 当浏览器存储被禁用、无法访问或已满时。
**建议修复：** 使用 `try/catch` 包裹存储的读取和写入操作，并独立于持久化是否成功，将模式应用到 `document.documentElement`。
</issue_to_address>Sourcery 评估
等待批准。 需先处理 2 个发现的问题。
阻塞性发现：src/components/widget/Profile.astro:78、src/layouts/Layout.astro:562
Original comment in English
Hey - I've found 2 issues
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location path="src/components/widget/Profile.astro" line_range="60-78" />
<code_context>
+ // 图标 / 横幅两种模式共用同一份 DOM，由 html[data-profile-link-mode] 上的
+ // CSS（src/styles/profile.css）切换形态，这样才能在显示设置面板里即时切换。
+ // data-show-name 只对「仅图标」模式有意义：该模式下逐条决定是否显示名称。
+ const showName = item.showName ? "true" : "false";
if (item.url.startsWith("mailto:")) {
- const encodedEmail = encodeMailto(item.url);
- return <a rel="me" aria-label={item.name} href="#" data-encoded-email={encodedEmail} onclick={MAILTO_ONCLICK_SCRIPT},
- class="btn-regular rounded-lg h-10 gap-2 px-3 font-bold active:scale-95">
- <Icon name={item.icon} class="text-[1.5rem]"></Icon>
- {item.name}
- </a>
</code_context>
<issue_to_address>
**issue (broader_impact):** In icon mode, a profile with exactly one link and `showName: false` now hides the link name, whereas the removed single-link branch always rendered the name. This breaks the claimed backward-compatible behavior for valid single-link configurations.
**Triggers:** When `profileConfig.links` contains exactly one item with `showName` unset or false.
**Suggested fix:** Preserve the old single-link rendering behavior, or explicitly define and implement the intended single-link exception in the new CSS/markup.
</issue_to_address>
### Comment 2
<location path="src/layouts/Layout.astro" line_range="559-562" />
<code_context>
+ defaultProfileLinkMode: profileConfig.linkDisplayMode ?? "icon",
+ }}>
+ (function() {
+ var stored = localStorage.getItem("profileLinkDisplayMode");
+ var mode = stored === "icon" || stored === "banner" ? stored : defaultProfileLinkMode;
+ document.documentElement.setAttribute("data-profile-link-mode", mode);
+ })();
+ </script>
+
</code_context>
<issue_to_address>
**issue (bug_risk):** A storage access failure prevents the profile-link mode from being applied to the document. The inline script reads `localStorage` without handling `SecurityError`, and `setProfileLinkMode` returns before calling `applyProfileLinkModeToDocument` when storage is unavailable or `setItem` fails, so the settings panel can report the new mode while the profile remains in the old mode.
**Triggers:** When browser storage is disabled, inaccessible, or full.
**Suggested fix:** Wrap storage reads and writes in `try/catch`, and apply the mode to `document.documentElement` independently of whether persistence succeeds.
</issue_to_address>Sourcery assessment
Approval pending. 2 findings to address first.
Blocking findings: src/components/widget/Profile.astro:78, src/layouts/Layout.astro:562
回应 review 提出的两个问题： 1. 单链接向后兼容 原版在 links.length == 1 时走单独的分支，恒渲染名称并忽略 showName。 上一版统一成 links.map() 后，showName 为 false/未设的单链接在「仅图标」 模式下退化成了方形纯图标按钮，与所声称的向后兼容不符。现在只有一条链接时 同样置 data-show-name="true"，恢复原有渲染结果。 2. 存储不可用时的健壮性 setProfileLinkMode 原先在 localStorage.setItem 之前就 return，写入抛异常 （被禁用 / 配额超额）时 applyProfileLinkModeToDocument 不会执行，会出现 面板已切换、Profile 仍是旧模式的不一致。改为先应用到文档再持久化，并用 try/catch 包裹写入。getStoredProfileLinkMode 与 Layout.astro 的内联脚本 同样加 try/catch —— 部分浏览器访问 localStorage 这个 getter 本身就会抛 SecurityError，连 `typeof localStorage` 的前置判断都不保险。 Co-Authored-By: Claude Code <noreply@anthropic.com>
This branch has not been deployed
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
1 participant
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.
Profile 组件的社交链接原先只有「全图标」或「按 links[].showName 逐条决定」 两种硬编码形态，现抽象为可切换的显示模式：
Type of change
Checklist
Related Issue
Changes
Profile 组件的社交链接目前只有「全图标」或「按 links[].showName 逐条决定」两种硬编码形态。
本 PR 将其抽象为一个可切换的显示模式：
icon：紧凑方形按钮，只显示图标；单条链接仍可用showName打开名称（与现状完全一致）banner：横向宽按钮、常显名称；换行按内容宽度决定，同一行的按钮再拉伸铺满两种模式共用同一份 DOM，形态由
<html data-profile-link-mode>上的 CSS（新增src/styles/profile.css）切换，因此设置面板里的切换即时生效，无需重渲染组件或刷新页面。同时新增显示设置面板「外观 → Profile 链接样式」一栏，一组按钮切换两种模式，带「恢复默认」，
选择记忆到
localStorage；模式在Layout.astro的内联脚本里于首帧前应用，避免跳变。主要改动：
src/styles/profile.css（基础规则 = 原「图标模式」行为，banner模式在其上覆盖）profileConfig新增可选字段linkDisplayMode（默认"icon"，不填等同"icon"）displaySettingsConfig新增profileLinkModeSwitchablesetting-utils新增getDefault/getStored/setProfileLinkMode，写入<html data-profile-link-mode>DisplaySettingsIntegrated.svelte新增设置项，按钮组用auto-fit网格自适应排列profileLinkMode/profileLinkModeIcon/profileLinkModeBanner（6 种语言）顺带把
Profile.astro里links.length > 1 && ...map(...)加单条特判的重复渲染逻辑统一为一次links.map()，行为等价。How To Test
pnpm install && pnpm devsrc/config/displaySettingsConfig.ts的enable: true，或设环境变量
PUBLIC_DISPLAY_SETTINGS=trueprofileConfig.linkDisplayMode的值profileLinkDisplayMode）linkDisplayMode或设为"icon"，并给某条链接设showName: true：该条仍显示图标 + 名称，其余仅图标 —— 与改动前一致
Screenshots (if applicable)
Additional Notes
linkDisplayMode不填等同"icon"，配合原有showName，渲染结果与改动前一致。showName语义收窄但未破坏：仅在icon模式下生效，banner模式恒显示名称displaySettingsConfig.enable与profileLinkModeSwitchable双重控制，总开关关闭时面板完全不渲染，不增加首屏体积（新增 CSS 约 1 KB）
Sourcery 摘要
新增可运行时切换的 Profile 链接样式，提供向后兼容的默认设置，并持久化保存显示偏好。
新功能：
增强功能：
showName行为，同时确保横幅模式始终显示链接名称。Original summary in English
Sourcery 总结
新增可运行时切换且向后兼容的 Profile 链接样式，并持久化显示偏好。
新功能：
增强功能：
Original summary in English
Summary by Sourcery
Add runtime-switchable, backward-compatible Profile link styles with persisted display preferences.
New Features:
Enhancements: