feat(web): show user id on profile page

[P2K0]

⚠️ 提交说明 / PR Notice

Important

• 请提供人工撰写的简洁摘要，避免直接粘贴未经整理的 AI 输出。

📝 变更描述 / Description

修复新版个人资料页不显示用户 ID 的问题。

1. 当前个人资料接口返回的数据中已经包含 profile.id，但新版 profile header 只展示了角色、用户名、邮箱和用户组等信息，用户无法直接在个人资料页查看自己的用户 ID。
2. 本次改动在个人资料页顶部的身份标签区域增加一个可复制的 User ID 标签，直接使用现有的 profile.id 渲染，不需要改动后端接口，也不会影响用户资料编辑、认证绑定或安全设置逻辑。

🚀 变更类型 / Type of change

• 🐛 Bug 修复 (Bug fix) - 请关联对应 Issue，避免将设计取舍、理解偏差或预期不一致直接归类为 bug
• ✨ 新功能 (New feature) - 重大特性建议先通过 Issue 沟通
• ⚡ 性能优化 / 重构 (Refactor)
• 📝 文档更新 (Documentation)

🔗 关联任务 / Related Issue

• Closes 新版主题的个人资料没显示用户ID，api对接比较麻烦 #5048
• Closes 新版 UI 请求增加用户资料页面显示自己的 uid #4594

✅ 提交前检查项 / Checklist

• 人工确认: 我已亲自整理并撰写此描述，没有直接粘贴未经处理的 AI 输出。
• 非重复提交: 我已搜索现有的 Issues 与 PRs，确认不是重复提交。
• Bug fix 说明: 若此 PR 标记为 Bug fix，我已提交或关联对应 Issue，且不会将设计取舍、预期不一致或理解偏差直接归类为 bug。
• 变更理解: 我已理解这些更改的工作原理及可能影响。
• 范围聚焦: 本 PR 未包含任何与当前任务无关的代码改动。
• 本地验证: 已在本地运行并通过测试或手动验证，维护者可以据此复核结果。
• 安全合规: 代码中无敏感凭据，且符合项目代码规范。

📸 运行证明 / Proof of Work

Summary by CodeRabbit

Release Notes

• New Features
  • Added a User ID badge to the profile header, displayed alongside the role badge. The badge shows your unique user identifier and includes copy-to-clipboard functionality for easy reference and sharing.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f32f7926-2f9d-4ada-91ff-1829c770ab7c

📥 Commits

Reviewing files that changed from the base of the PR and between d496e5d and b533193.

📒 Files selected for processing (1)

• web/default/src/features/profile/components/profile-header.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• web/default/src/features/profile/components/profile-header.tsx

---

Walkthrough

The profile header component now displays a user ID badge next to the existing role badge. The new badge shows a translated "User ID {profile.id}" label, uses the info variant, and supports copy-to-clipboard for the ID.

Changes

User ID Display in Profile

Layer / File(s)	Summary
User ID badge in profile header web/default/src/features/profile/components/profile-header.tsx	StatusBadge component added to display the user's ID with translation support and copy-to-clipboard functionality, positioned alongside the role badge.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I’m a rabbit with a badge so small, 🐇🏷️
I show your ID for one and all,
Tap to copy, quick and spry,
A little click—your ID flies by! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat(web): show user id on profile page' directly and clearly describes the main change: adding user ID display to the profile page.
Linked Issues check	✅ Passed	The PR successfully addresses both linked issues by adding a copyable User ID badge to the profile header component, enabling users to view their UID for integrations and cc-switch configuration.
Out of Scope Changes check	✅ Passed	All changes are directly related to the linked issues; only the profile-header component is modified to add the User ID badge display.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}