fix: unify mobile lang toggle and right-align ossheroes mobile nav

- www: lang toggle shows only the target language (EN/中文) with whitespace-nowrap to stop mobile wrapping
- ossheroes: replace 中/EN dual buttons with a single icon+label toggle matching the www style; update i18n.ts apply() accordingly
- ossheroes: right-align mobile navbar items (incl. past-rankings dropdown); desktop layout unchanged

Author: sunshineg

apps/ossheroes/src/components/Navbar.astro

@@ -42,9 +42,21 @@ const pastYears = getPastYears();
         <li class="nav-item">
           <a href="https://opensource.win/" class="nav-link" data-i18n-zh="回到官网" data-i18n-en="Main Site">回到官网</a>
         </li>
-        <!-- 语言切换：中 / EN，与官网共用 localStorage key osw-language -->
-        <li class="nav-item lang-switch" aria-label="Language / 语言">
-          <button type="button" class="lang-btn" data-lang-switch="zh" onclick="window.OSW_I18N && OSW_I18N.set('zh')">中</button><span class="lang-sep" aria-hidden="true">/</span><button type="button" class="lang-btn" data-lang-switch="en" onclick="window.OSW_I18N && OSW_I18N.set('en')">EN</button>
+        <!-- 语言切换：单按钮显示目标语言，与官网共用 localStorage key osw-language -->
+        <li class="nav-item lang-switch">
+          <button
+            type="button"
+            class="lang-btn"
+            data-lang-en="中文"
+            data-lang-zh="EN"
+            data-aria-en="切换到中文"
+            data-aria-zh="Switch to English"
+            aria-label="Switch to English"
+            onclick="window.OSW_I18N && OSW_I18N.set(document.documentElement.lang === 'zh-CN' ? 'en' : 'zh')"
+          >
+            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 8 6 6" /><path d="m4 14 6-6 2-3" /><path d="M2 5h12" /><path d="M7 2h1" /><path d="m22 22-5-10-5 10" /><path d="M14 18h6" /></svg>
+            <span data-lang-label>EN</span>
+          </button>
         </li>
       </ul>
     </div>

apps/ossheroes/src/scripts/i18n.ts

@@ -64,11 +64,14 @@ function apply(lang: Lang) {
   for (let i = 0; i < nodes.length; i++) {
     nodes[i].innerHTML = nodes[i].getAttribute(attr) ?? '';
   }
-  const btns = document.querySelectorAll('[data-lang-switch]');
-  for (let j = 0; j < btns.length; j++) {
-    const active = btns[j].getAttribute('data-lang-switch') === lang;
-    btns[j].classList.toggle('active', active);
-    btns[j].setAttribute('aria-pressed', active ? 'true' : 'false');
+  /* 单按钮语言切换：按钮文案为目标语言（中文页显示 EN，英文页显示 中文） */
+  const toggle = document.querySelector<HTMLButtonElement>('.lang-btn[data-lang-en]');
+  if (toggle) {
+    const label = toggle.querySelector('[data-lang-label]');
+    const text = toggle.getAttribute(`data-lang-${lang}`);
+    if (label && text) label.textContent = text;
+    const ariaLabel = toggle.getAttribute(`data-aria-${lang}`);
+    if (ariaLabel) toggle.setAttribute('aria-label', ariaLabel);
   }
 }
 

apps/ossheroes/src/styles/global.css

@@ -136,6 +136,7 @@ a:hover {
 .navbar-nav {
   display: flex;
   flex-direction: column;
+  align-items: flex-end;
   list-style: none;
   margin: 0;
   padding: 0.5rem 0;
@@ -185,6 +186,7 @@ a:hover {
   border: 1px solid var(--osw-border);
   border-radius: 0;
   min-width: 10rem;
+  text-align: right;
 }
 .nav-dropdown.open .dropdown-menu {
   display: block;
@@ -221,6 +223,7 @@ a:hover {
     right: 0;
     top: 100%;
     z-index: 1000;
+    text-align: left;
   }
 }
 
@@ -639,33 +642,32 @@ a.user-item:hover .nickname {
   line-height: 1.8;
 }
 
-/* 导航语言切换：中 / EN */
+/* 导航语言切换：单按钮显示目标语言，与官网首页 #lang-toggle 同款观感 */
 .lang-switch {
-  display: flex;
-  align-items: center;
   padding: 0.5rem;
-  gap: 2px;
 }
 .lang-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
   background: none;
-  border: 1px solid transparent;
+  border: none;
   border-radius: 0;
   color: var(--osw-muted);
   font-family: var(--osw-font);
   font-size: 14px;
-  padding: 0 4px;
+  padding: 0;
   cursor: pointer;
+  white-space: nowrap;
+  transition: color 0.2s;
 }
 .lang-btn:hover,
 .lang-btn:focus {
   color: var(--osw-primary);
 }
-.lang-btn.active {
-  color: var(--osw-primary);
-  border-color: var(--osw-border);
-}
-.lang-sep {
-  color: var(--osw-border);
+.lang-btn svg {
+  width: 1rem;
+  height: 1rem;
 }
 
 /* 详情页顶部终端风页面头部：grid 背景 + 径向辉光 + 扫描线 + 描边大字，零图片素材 */

apps/www/src/pages/index.astro

@@ -243,9 +243,9 @@ const jsonLd = {
           </div>
 
           <div class="flex items-center gap-4">
-            <button id="lang-toggle" type="button" class="inline-flex items-center font-mono text-muted-foreground hover:text-primary transition-colors text-sm px-3 py-2" data-lang-en="EN / 中文" data-lang-zh="中文 / EN" data-aria-en="Switch to Chinese" data-aria-zh="切换到英文" aria-label="Switch to Chinese">
+            <button id="lang-toggle" type="button" class="inline-flex items-center whitespace-nowrap font-mono text-muted-foreground hover:text-primary transition-colors text-sm px-3 py-2" data-lang-en="中文" data-lang-zh="EN" data-aria-en="Switch to Chinese" data-aria-zh="切换到英文" aria-label="Switch to Chinese">
               <svg aria-hidden="true" class="mr-2 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 8 6 6" /><path d="m4 14 6-6 2-3" /><path d="M2 5h12" /><path d="M7 2h1" /><path d="m22 22-5-10-5 10" /><path d="M14 18h6" /></svg>
-              <span data-lang-label>EN / 中文</span>
+              <span data-lang-label>中文</span>
             </button>
 
             <a href={`${SITE}heroes/`} class="inline-flex items-center justify-center border bg-background text-sm px-4 py-2 font-mono text-foreground hover:bg-accent hover:text-accent-foreground transition-colors hidden sm:inline-flex">