feat(web): 5 项 UI 修复 — 统一浅色/登录回跳/logo locale/用户名下拉/Docs 真页

用户中心:
- 统一浅色:theme.tsx 无偏好时不再跟随系统 prefers-color-scheme:dark(登录页变
  黑真因),恒浅色;保留手动切换。
- 登录回跳:UserCenter 加 safeRedirect 白名单,登录成功按 ?redirect= 回来源页
  (官网带 /,登录后回主页),无则进 overview。
- logo locale:新增 i18n brandName(zh 穿山甲/其余 Pangolin),Login/UserCenter
  /Subscription 三处引用。
- 存 pg_uc_email(getMe 时)/ clearSession 删,供官网读用户名。

官网(全走 CSS class 合 CSP,无内联 style):
- logo locale:i18n nav.brand(zh 穿山甲/其余 Pangolin),Header+Footer。
- 登录态头部显示用户名(读同源 pg_uc_email)+ 下拉菜单(进入用户中心/切换用户/
  退出登录,复用 .langmenu 风格);未登录 Log in 带 ?redirect=/ 回跳。
- Docs 四卡片补真内容页(en+zh:quickstart/faq/protocol/privacy + Doc.astro
  布局),卡片改回 <a href>;Protocol 改正 sing-box+REALITY(去 WireGuard)。

验证:同源闸绿 · 两端 build 过 · redline 0 · Header 零内联 style · 无 WireGuard。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

web/website/src/components/Docs.astro

@@ -1,15 +1,18 @@
 ---
 import Icon from './Icon.astro';
-import type { T } from '../i18n/strings';
+import type { T, Lang } from '../i18n/strings';
 
-interface Props { t: T }
-const { t } = Astro.props;
+interface Props { t: T; lang: Lang }
+const { t, lang } = Astro.props;
+
+// 中文走 /zh/docs/*，其余语言暂共用英文文档（/docs/*）。
+const base = lang === 'zh' ? '/zh/docs' : '/docs';
 
 const docs = [
-  { icon: 'rocket', t: 'docs.1t', d: 'docs.1d' },
-  { icon: 'circle-help', t: 'docs.2t', d: 'docs.2d' },
-  { icon: 'shield-check', t: 'docs.3t', d: 'docs.3d' },
-  { icon: 'lock', t: 'docs.4t', d: 'docs.4d' },
+  { icon: 'rocket', t: 'docs.1t', d: 'docs.1d', slug: 'quickstart' },
+  { icon: 'circle-help', t: 'docs.2t', d: 'docs.2d', slug: 'faq' },
+  { icon: 'shield-check', t: 'docs.3t', d: 'docs.3d', slug: 'protocol' },
+  { icon: 'lock', t: 'docs.4t', d: 'docs.4d', slug: 'privacy' },
 ];
 ---
 <section id="docs">
@@ -20,13 +23,13 @@ const docs = [
   </div>
   <div class="wrap">
     <div class="docs-grid">
-      {/* 文档页未就绪:卡片暂作信息展示(非链接),写好真实文档后改回 <a href> + 恢复「阅读」。 */}
       {docs.map((d) => (
-        <div class="doc">
+        <a class="doc" href={`${base}/${d.slug}/`}>
           <div class="ico"><Icon name={d.icon} /></div>
           <h3>{t(d.t)}</h3>
           <p>{t(d.d)}</p>
-        </div>
+          <span class="ln">{t('docs.read')}<Icon name="arrow-right" /></span>
+        </a>
       ))}
     </div>
   </div>

web/website/src/components/Footer.astro

@@ -12,7 +12,7 @@ const { t } = Astro.props;
       <div>
         <div class="nm">
           <Brand variant="footer" size={28} />
-          穿山甲
+          {t('nav.brand')}
         </div>
         <p class="tag">{t('ft.tag')}</p>
       </div>

web/website/src/components/Header.jsx

@@ -30,18 +30,37 @@ export default function Header({ lang = 'zh', t = {} }) {
   const [open, setOpen] = useState(false);
   const [scrolled, setScrolled] = useState(false);
   const [langOpen, setLangOpen] = useState(false);
+  const [userOpen, setUserOpen] = useState(false);
   const [loggedIn, setLoggedIn] = useState(false);
+  const [email, setEmail] = useState('');
   const langRef = useRef(null);
+  const userRef = useRef(null);
 
-  // 与用户中心同源：登录后 localStorage 存 pg_uc_refresh → 显示「用户中心」入口。
+  // 登录后回跳主页：用户中心带 ?redirect=/（配合 usercenter 登录成功后回跳）。
+  const loginHref = `${SITE.usercenter}?redirect=/`;
+  // 用户名截断显示：优先邮箱 @ 前部分，缺失时回退通用词。
+  const displayName = (email && email.split('@')[0]) || 'Account';
+
+  // 与用户中心同源：登录后 localStorage 存 pg_uc_refresh（+ pg_uc_email）→ 显示用户名下拉。
   useEffect(() => {
     try {
       setLoggedIn(!!localStorage.getItem('pg_uc_refresh'));
+      setEmail(localStorage.getItem('pg_uc_email') || '');
     } catch {
       setLoggedIn(false);
     }
   }, []);
 
+  // 清登录态并跳转（切换用户 = 回登录页；退出 = 回主页）。
+  const clearSession = () => {
+    try {
+      localStorage.removeItem('pg_uc_refresh');
+      localStorage.removeItem('pg_uc_email');
+    } catch { /* ignore */ }
+  };
+  const onSwitch = () => { clearSession(); window.location.href = loginHref; };
+  const onLogout = () => { clearSession(); window.location.href = '/'; };
+
   useEffect(() => {
     if (!langOpen) return;
     const onDoc = (e) => { if (langRef.current && !langRef.current.contains(e.target)) setLangOpen(false); };
@@ -51,6 +70,15 @@ export default function Header({ lang = 'zh', t = {} }) {
     return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); };
   }, [langOpen]);
 
+  useEffect(() => {
+    if (!userOpen) return;
+    const onDoc = (e) => { if (userRef.current && !userRef.current.contains(e.target)) setUserOpen(false); };
+    const onKey = (e) => { if (e.key === 'Escape') setUserOpen(false); };
+    document.addEventListener('mousedown', onDoc);
+    document.addEventListener('keydown', onKey);
+    return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); };
+  }, [userOpen]);
+
   useEffect(() => {
     const onScroll = () => setScrolled(window.scrollY > 8);
     onScroll();
@@ -77,7 +105,7 @@ export default function Header({ lang = 'zh', t = {} }) {
       <div class="wrap row">
         <a class="brand" href="#top">
           <Mark />
-          <span class="nm">穿山甲</span>
+          <span class="nm">{t.brand || 'Pangolin'}</span>
         </a>
         <nav class="nav">
           {nav.map(([href, label]) => (
@@ -113,9 +141,29 @@ export default function Header({ lang = 'zh', t = {} }) {
             )}
           </div>
           {loggedIn ? (
-            <a class="linklogin" href={SITE.usercenter}>{t.center}</a>
+            <div ref={userRef} class="langwrap usermenu">
+              <button
+                type="button"
+                class="langsel userbtn"
+                onClick={() => setUserOpen((o) => !o)}
+                aria-haspopup="menu"
+                aria-expanded={userOpen}
+              >
+                <span class="uname">{displayName}</span>
+                <svg class="caret" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                  <path d="M6 9l6 6 6-6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              </button>
+              {userOpen && (
+                <div class="langmenu" role="menu">
+                  <a role="menuitem" href={SITE.usercenter}>{t.mcenter}</a>
+                  <button role="menuitem" type="button" onClick={onSwitch}>{t.mswitch}</button>
+                  <button role="menuitem" type="button" onClick={onLogout}>{t.mlogout}</button>
+                </div>
+              )}
+            </div>
           ) : (
-            <a class="linklogin" href={SITE.usercenter}>{t.login}</a>
+            <a class="linklogin" href={loginHref}>{t.login}</a>
           )}
           <a class="btn btn-primary" href="#download">
             <Download />