feat: icon-button dropdown language switcher (kimi style) - #90
Merged
Conversation
把 www 与 ossheroes 导航的「EN / 简 / 繁」三文字链接替换为 packages/ui 共享的 LangSwitcher 组件（kimi 风格）：单个翻译图标按钮 + 暗色圆角下拉菜单，完整语言名 + 当前语言 ✓（aria-current），沿用 localePath 跳转 + localStorage('osw-language') 契约。支持 aria-expanded 同步、点击外部 / Esc 关闭，解决移动端三链接并排拥挤折行问题。
There was a problem hiding this comment.
Pull request overview
This PR introduces a shared language switcher UI component to replace the existing inline “EN / 简 / 繁” links in the www and ossheroes navigations, improving layout on small screens while preserving the existing locale URL/SEO behavior.
Changes:
- Added
packages/ui/src/LangSwitcher.astro: icon-button dropdown language switcher with static “current locale” rendering and a small client-side toggle script. - Updated
apps/wwwHome navigation andapps/ossheroesNavbar to use the sharedLangSwitchercomponent. - Removed now-unused ossheroes global CSS styles for the old
.lang-btnlanguage links.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/ui/src/LangSwitcher.astro | New shared dropdown language switcher component (markup, styles, and toggle behavior). |
| packages/ui/package.json | Exports the new LangSwitcher.astro entry from the UI package. |
| apps/www/src/components/Home.astro | Replaces inline language link trio with the shared LangSwitcher. |
| apps/ossheroes/src/components/Navbar.astro | Replaces inline language link trio with the shared LangSwitcher. |
| apps/ossheroes/src/styles/global.css | Removes obsolete language-switch button/link styling for the previous UI. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
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
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.
概述
把 www 与 ossheroes 导航的「EN / 简 / 繁」三文字并排链接替换为 kimi 风格的单图标按钮 + 下拉菜单，解决移动端拥挤折行问题。
改动
packages/ui/src/LangSwitcher.astro共享组件：aria-currentlocalePath生成对应语言 URL、hreflang+rel="alternate"、onclick 写localStorage('osw-language')aria-haspopup/aria-expanded同步、ul/li 结构、点击外部 / Esc 关闭、焦点样式--osw-*设计 token，菜单相对按钮右对齐且不超视口apps/www首页导航与apps/ossheroesNavbar 替换为共享组件global.css中废弃的.lang-btn样式验证
pnpm --filter www build✅ /pnpm --filter ossheroes build✅（1380 页）verify:urls/verify:seo✅