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/usercenter/components/Login.tsx

@@ -75,7 +75,7 @@ export default function Login({ onDone }: { onDone: () => void }) {
           <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
             <Mark size={32} />
             <div>
-              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, color: 'var(--fg1)', lineHeight: 1 }}>穿山甲</div>
+              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, color: 'var(--fg1)', lineHeight: 1 }}>{t('brandName')}</div>
               <div style={{ fontSize: 8.5, fontWeight: 600, letterSpacing: '0.2em', color: 'var(--accent)', marginTop: 3 }}>PANGOLIN</div>
             </div>
           </div>

web/usercenter/components/Subscription.tsx

@@ -18,7 +18,7 @@ export default function Subscription({ t, mobile }: { t: TFn; mobile: boolean })
   }, [api]);
 
   const clients = [
-    { name: '穿山甲 App', sub: 'iOS / Android / 桌面', icon: 'shield-check', accent: true },
+    { name: `${t('brandName')} App`, sub: 'iOS / Android / 桌面', icon: 'shield-check', accent: true },
     { name: 'Shadowrocket', sub: 'iOS', icon: 'external-link' },
     { name: 'Clash Verge', sub: 'Windows / macOS', icon: 'external-link' },
     { name: 'v2rayN', sub: 'Windows', icon: 'external-link' },

web/usercenter/components/UserCenter.tsx

@@ -18,6 +18,14 @@ import type { Me } from '../lib/api/types';
 type View = 'overview' | 'sub' | 'redeem' | 'invite' | 'settings';
 const ORDER: View[] = ['overview', 'sub', 'redeem', 'invite', 'settings'];
 
+/** redirect 白名单：仅接受单个 '/' 开头、且不以 '//' 或反斜杠开头的本站相对
+ *  路径（防 open redirect，与 app/sso/page.tsx::safeRedirect 一致）；否则返回 null。 */
+function safeRedirect(raw: string | null): string | null {
+  if (!raw) return null;
+  if (raw.charAt(0) !== '/' || raw.charAt(1) === '/' || raw.indexOf('\\') >= 0) return null;
+  return raw;
+}
+
 function useIsMobile() {
   const [m, setM] = useState(false);
   useEffect(() => {
@@ -100,10 +108,22 @@ export default function UserCenter() {
     setView('overview');
   }
 
+  // 登录成功回调：若 URL 带合法 ?redirect=<本站相对路径>（如官网带 ?redirect=/ 过来），
+  // 回跳来源页；否则进用户中心概览。
+  function onLoginDone() {
+    const redirect = safeRedirect(new URLSearchParams(window.location.search).get('redirect'));
+    if (redirect) {
+      window.location.replace(redirect);
+      return;
+    }
+    setAuthed(true);
+    setView('overview');
+  }
+
   // 静态导出无服务端会话:首屏(!ready)与未登录一律直接渲染登录页,避免出现空白
   // 背景(慢网络下用户会看到"空的")。已登录用户(有 refresh)会话续期完成后再切面板。
   if (!ready || !authed) {
-    return <Login onDone={() => { setAuthed(true); setView('overview'); }} />;
+    return <Login onDone={onLoginDone} />;
   }
 
   const nav: [View, string, string][] = [
@@ -148,7 +168,7 @@ export default function UserCenter() {
         <div style={{ maxWidth: 1000, margin: '0 auto', padding: mobile ? '0 16px' : '0 24px', height: mobile ? 54 : 60, display: 'flex', alignItems: 'center', gap: mobile ? 12 : 22 }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
             <Mark size={26} />
-            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16.5, color: 'var(--fg1)' }}>穿山甲</span>
+            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16.5, color: 'var(--fg1)' }}>{t('brandName')}</span>
           </div>
           {!mobile && <nav style={{ display: 'flex', gap: 4, flex: 1 }}>{navBtns}</nav>}
           {mobile && <div style={{ flex: 1 }} />}

web/usercenter/lib/api/http.ts

@@ -17,6 +17,7 @@ import {
   clearSession,
   getAccessToken,
   getRefreshToken,
+  setEmail,
   setSession,
 } from './session';
 
@@ -171,7 +172,11 @@ export class HttpClient implements ApiClient {
     return session;
   }
 
-  getMe = async (): Promise<Me> => mapMe(await this.request<RawMe>('/v1/me'));
+  getMe = async (): Promise<Me> => {
+    const me = mapMe(await this.request<RawMe>('/v1/me'));
+    setEmail(me.email); // 同源官网读取显示用户名；clearSession/logout 时删除
+    return me;
+  };
   getSubscription = () => this.request<SubscriptionInfo>('/v1/me/subscription');
   resetSubscription = () => this.request<SubscriptionInfo>('/v1/me/subscription/reset', { method: 'POST' });
   listDevices = async (): Promise<Device[]> => {

web/usercenter/lib/api/mock.ts

@@ -10,7 +10,7 @@ import {
   SubscriptionInfo,
   TotpSetup,
 } from './types';
-import { setSession, clearSession } from './session';
+import { setSession, clearSession, setEmail } from './session';
 
 const delay = (ms = 420) => new Promise((r) => setTimeout(r, ms));
 
@@ -88,6 +88,7 @@ export class MockClient implements ApiClient {
 
   async getMe(): Promise<Me> {
     await delay(260);
+    setEmail('me@pangolin.vpn'); // 同源官网读取显示用户名；clearSession/logout 时删除
     return {
       email: 'me@pangolin.vpn',
       plan: 'pro',

web/usercenter/lib/api/session.ts

@@ -5,6 +5,17 @@
 import type { Session } from './types';
 
 const REFRESH_KEY = 'pg_uc_refresh';
+// 登录用户邮箱：同源官网(pangolin website)读取以显示用户名。仅邮箱、非敏感凭证。
+const EMAIL_KEY = 'pg_uc_email';
+
+export function setEmail(email: string): void {
+  if (typeof window === 'undefined' || !email) return;
+  try {
+    window.localStorage.setItem(EMAIL_KEY, email);
+  } catch {
+    /* ignore quota / privacy mode */
+  }
+}
 
 let accessToken: string | null = null;
 let accessExpiresAt = 0;
@@ -44,6 +55,7 @@ export function clearSession(): void {
   if (typeof window !== 'undefined') {
     try {
       window.localStorage.removeItem(REFRESH_KEY);
+      window.localStorage.removeItem(EMAIL_KEY);
     } catch {
       /* ignore */
     }

web/usercenter/lib/i18n.ts

@@ -13,6 +13,7 @@ export const STRINGS: Record<string, Entry> = {
   navSettings: { zh: '设置', en: 'Settings', ja: '設定', ko: '설정', ru: 'Настройки', es: 'Ajustes' },
   signOut: { zh: '退出', en: 'Sign out', ja: 'ログアウト', ko: '로그아웃', ru: 'Выйти', es: 'Cerrar sesión' },
   backHome: { zh: '返回主页', en: 'Home', ja: 'ホーム', ko: '홈', ru: 'На главную', es: 'Inicio' },
+  brandName: { zh: '穿山甲', en: 'Pangolin', ja: 'Pangolin', ko: 'Pangolin', ru: 'Pangolin', es: 'Pangolin' },
 
   /* login */
   loginTitle: { zh: '登录用户中心', en: 'Log in to your account', ja: 'アカウントにログイン', ko: '계정에 로그인', ru: 'Вход в аккаунт', es: 'Inicia sesión en tu cuenta' },

web/usercenter/lib/theme.tsx

@@ -27,7 +27,9 @@ export function UIProvider({ children }: { children: React.ReactNode }) {
       const l = window.localStorage.getItem(LANG_KEY) as Lang | null;
       const t = window.localStorage.getItem(THEME_KEY) as Theme | null;
       if (l && (['zh', 'en', 'ja', 'ko', 'ru', 'es'] as Lang[]).includes(l)) setLangState(l);
-      const initial: Theme = t === 'dark' || t === 'light' ? t : window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      // 默认恒浅色：只有用户手动切换过(localStorage 有显式偏好)才用保存值，
+      // 不跟随系统 prefers-color-scheme（避免系统暗色把登录页/用户中心染黑）。
+      const initial: Theme = t === 'dark' || t === 'light' ? t : 'light';
       setThemeState(initial);
     } catch {
       /* ignore */

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 />

web/website/src/i18n/strings.ts

@@ -40,6 +40,12 @@ export const STRINGS: Record<string, Record<Lang, string>> = {
   'nav.login': { zh: '登录', en: 'Log in', ja: 'ログイン', ko: '로그인', ru: 'Войти', es: 'Iniciar sesión' },
   'nav.center': { zh: '用户中心', en: 'Account', ja: 'アカウント', ko: '계정', ru: 'Личный кабинет', es: 'Mi cuenta' },
   'nav.get': { zh: '立即下载', en: 'Get the app', ja: 'アプリを入手', ko: '앱 받기', ru: 'Получить приложение', es: 'Obtener la app' },
+  // 品牌字标：中文显「穿山甲」，其余语言统一显「Pangolin」（英文版 logo 本地化）。
+  'nav.brand': { zh: '穿山甲', en: 'Pangolin', ja: 'Pangolin', ko: 'Pangolin', ru: 'Pangolin', es: 'Pangolin' },
+  // 登录态用户下拉菜单项（3 项 × 6 语）。
+  'menu.center': { zh: '进入用户中心', en: 'Open account center', ja: 'アカウントセンターへ', ko: '계정 센터 열기', ru: 'Личный кабинет', es: 'Ir a mi cuenta' },
+  'menu.switch': { zh: '切换用户', en: 'Switch account', ja: 'アカウントを切替', ko: '계정 전환', ru: 'Сменить аккаунт', es: 'Cambiar de cuenta' },
+  'menu.logout': { zh: '退出登录', en: 'Log out', ja: 'ログアウト', ko: '로그아웃', ru: 'Выйти', es: 'Cerrar sesión' },
 
   'hero.eyebrow': { zh: '极速 · 稳定 · 省心', en: 'Fast · Stable · Effortless', ja: '高速 · 安定 · 快適', ko: '빠름 · 안정 · 간편', ru: 'Быстро · Стабильно · Без забот', es: 'Rápido · Estable · Sin complicaciones' },
   'hero.h1': { zh: '极速畅连，\n网络如丝顺滑', en: 'Faster, smoother,\neverywhere', ja: 'もっと速く、もっと滑らかに、\nどこでも', ko: '더 빠르고 더 매끄럽게,\n어디서나', ru: 'Быстрее, плавнее,\nвезде', es: 'Más rápido, más fluido,\nen todas partes' },
@@ -140,7 +146,7 @@ export const STRINGS: Record<string, Record<Lang, string>> = {
   'docs.2t': { zh: '常见问题', en: 'FAQ', ja: 'よくある質問', ko: '자주 묻는 질문', ru: 'Вопросы и ответы', es: 'Preguntas frecuentes' },
   'docs.2d': { zh: '连接、计费、设备与兑换码的常见疑问。', en: 'Connection, billing, devices and redeem codes.', ja: '接続・請求・デバイス・引き換えコードのよくある疑問。', ko: '연결, 결제, 기기, 등록 코드에 대한 궁금증.', ru: 'Подключение, оплата, устройства и коды активации.', es: 'Conexión, facturación, dispositivos y códigos de canje.' },
   'docs.3t': { zh: '协议与安全', en: 'Protocol & security', ja: 'プロトコルとセキュリティ', ko: '프로토콜 & 보안', ru: 'Протокол и безопасность', es: 'Protocolo y seguridad' },
-  'docs.3d': { zh: 'WireGuard、加密方式与无日志架构说明。', en: 'WireGuard, encryption and our no-logs architecture.', ja: 'WireGuard、暗号化方式、ノーログ設計の解説。', ko: 'WireGuard, 암호화 방식, 노로그 아키텍처 설명.', ru: 'WireGuard, шифрование и наша архитектура без логов.', es: 'WireGuard, cifrado y nuestra arquitectura sin registros.' },
+  'docs.3d': { zh: 'sing-box + REALITY、加密方式与无日志架构说明。', en: 'sing-box + REALITY, encryption and our no-logs architecture.', ja: 'sing-box + REALITY、暗号化方式、ノーログ設計の解説。', ko: 'sing-box + REALITY, 암호화 방식, 노로그 아키텍처 설명.', ru: 'sing-box + REALITY, шифрование и наша архитектура без логов.', es: 'sing-box + REALITY, cifrado y nuestra arquitectura sin registros.' },
   'docs.4t': { zh: '隐私政策', en: 'Privacy policy', ja: 'プライバシーポリシー', ko: '개인정보 처리방침', ru: 'Политика конфиденциальности', es: 'Política de privacidad' },
   'docs.4d': { zh: '我们收集什么、不收集什么，一目了然。', en: 'Exactly what we collect — and what we never do.', ja: '収集するもの・しないものを明確に。', ko: '무엇을 수집하고 무엇을 수집하지 않는지 한눈에.', ru: 'Что мы собираем — и чего не собираем никогда.', es: 'Exactamente qué recopilamos y qué nunca hacemos.' },
   'docs.read': { zh: '阅读', en: 'Read', ja: '読む', ko: '읽기', ru: 'Читать', es: 'Leer' },

web/website/src/layouts/Doc.astro

@@ -0,0 +1,77 @@
+---
+/**
+ * Doc.astro — 文档正文页布局（/docs/* 与 /zh/docs/*）。
+ * 复用官网 Header/Footer 与全站样式（tokens.gen / website / site-extra），
+ * 中间是 .doc-page > .doc-article 可读正文容器。构建期单显一种语言。
+ */
+import '@fontsource/sora/500.css';
+import '@fontsource/sora/600.css';
+import '@fontsource/sora/700.css';
+import '@fontsource/manrope/400.css';
+import '@fontsource/manrope/500.css';
+import '@fontsource/manrope/600.css';
+import '@fontsource/manrope/700.css';
+import '@fontsource/noto-sans-sc/400.css';
+import '@fontsource/noto-sans-sc/500.css';
+import '@fontsource/noto-sans-sc/700.css';
+import '@fontsource/jetbrains-mono/400.css';
+import '@fontsource/jetbrains-mono/500.css';
+
+import '../styles/tokens.gen.css';
+import '../styles/website.css';
+import '../styles/site-extra.css';
+
+import { createT, type Lang } from '../i18n/strings';
+import Header from '../components/Header.jsx';
+import Footer from '../components/Footer.astro';
+
+interface Props { lang: Lang; title: string; desc?: string }
+const { lang, title, desc } = Astro.props;
+const t = createT(lang);
+
+const HTML_LANG: Record<Lang, string> = { zh: 'zh-CN', en: 'en', ja: 'ja', ko: 'ko', ru: 'ru', es: 'es' };
+
+const headerT = {
+  product: t('nav.product'),
+  pricing: t('nav.pricing'),
+  download: t('nav.download'),
+  docs: t('nav.docs'),
+  blog: t('nav.blog'),
+  login: t('nav.login'),
+  center: t('nav.center'),
+  brand: t('nav.brand'),
+  mcenter: t('menu.center'),
+  mswitch: t('menu.switch'),
+  mlogout: t('menu.logout'),
+  get: t('nav.get'),
+  suBtn: t('su.btn'),
+};
+
+// 导航锚点回主页（文档页无同页锚点）：把 #x 改为主页前缀。
+const home = lang === 'zh' ? '/zh/' : '/';
+const backHref = `${home}#docs`;
+const metaTitle = `${title} · ${t('nav.brand')}`;
+---
+<!doctype html>
+<html lang={HTML_LANG[lang]}>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>{metaTitle}</title>
+  {desc && <meta name="description" content={desc} />}
+  <meta name="robots" content="index,follow" />
+  <meta name="theme-color" content="#B96A3D" />
+</head>
+<body>
+  <Header client:load lang={lang} t={headerT} />
+  <main class="doc-page">
+    <div class="wrap">
+      <article class="doc-article">
+        <slot />
+        <a class="doc-back" href={backHref}>&larr; {t('nav.docs')}</a>
+      </article>
+    </div>
+  </main>
+  <Footer t={t} />
+</body>
+</html>

web/website/src/layouts/Site.astro

@@ -57,6 +57,10 @@ const headerT = {
   blog: t('nav.blog'),
   login: t('nav.login'),
   center: t('nav.center'),
+  brand: t('nav.brand'),
+  mcenter: t('menu.center'),
+  mswitch: t('menu.switch'),
+  mlogout: t('menu.logout'),
   get: t('nav.get'),
   suBtn: t('su.btn'),
 };
@@ -91,7 +95,7 @@ const headerT = {
   <WhySignup t={t} />
   <Pricing t={t} lang={lang} />
   <Download t={t} />
-  <Docs t={t} />
+  <Docs t={t} lang={lang} />
   <CtaBand t={t} />
   <Footer t={t} />
 </body>

web/website/src/pages/docs/faq.astro

@@ -0,0 +1,26 @@
+---
+import Doc from '../../layouts/Doc.astro';
+---
+<Doc lang="en" title="FAQ" desc="Common questions about accounts, plans, devices and activation codes.">
+  <div class="doc-eyebrow">Docs</div>
+  <h1>Frequently asked questions</h1>
+  <p class="doc-lede">Short answers to the questions we hear most about accounts, plans, devices and codes.</p>
+
+  <h2>How do I redeem an activation code?</h2>
+  <p>Open the app, go to the account or subscription screen, choose <strong>Redeem code</strong>, paste the code and confirm. Your plan upgrades immediately — no restart needed. Codes are obtained through external channels; there is no checkout on the website or in the app.</p>
+
+  <h2>Which platforms are supported?</h2>
+  <p>Windows, macOS, Android and iOS. One account works across all of them, and your plan and settings follow you between devices.</p>
+
+  <h2>What are the free plan limits?</h2>
+  <p>The free plan gives you 10 minutes of connection time per day on a single basic route, and asks you to watch a short ad before each session. Core encryption and our no-logs promise are included on every plan, free or paid. During the 7-day trial the time limit is lifted.</p>
+
+  <h2>How many devices can I use?</h2>
+  <p>Up to 5 devices on one account at the same time on the Pro plan. Sign in with the same email on each device to keep everything in sync.</p>
+
+  <h2>I forgot my password — what now?</h2>
+  <p>Accounts sign in by email verification code, so there is no fixed password to forget. Just request a fresh code at login and enter it to get back in.</p>
+
+  <h2>Why is there no payment button on the site?</h2>
+  <p>For risk and privacy reasons Pangolin never processes payments in the web or app. You get an activation code through an external channel and redeem it in the client — that keeps the payment flow entirely off our platform.</p>
+</Doc>

web/website/src/pages/docs/privacy.astro

@@ -0,0 +1,27 @@
+---
+import Doc from '../../layouts/Doc.astro';
+---
+<Doc lang="en" title="Privacy policy" desc="Exactly what we collect, what we never collect, and how it is stored.">
+  <div class="doc-eyebrow">Docs</div>
+  <h1>Privacy policy</h1>
+  <p class="doc-lede">Privacy protection is the baseline of this product, not a marketing line. Here is exactly what we do and don't collect, in plain language.</p>
+
+  <h2>What we collect</h2>
+  <p>We keep only the operational minimum needed to run your account and the service:</p>
+  <ul>
+    <li><strong>Account email</strong> — used to sign in, deliver verification codes and tie your plan to you.</li>
+    <li><strong>Device identifier</strong> — an anonymous ID used to enforce the device limit and sync your plan across devices.</li>
+    <li><strong>Usage statistics</strong> — coarse figures such as connection time and data volume, used for billing limits and capacity planning.</li>
+  </ul>
+
+  <h2>What we never collect</h2>
+  <p>We do not log the content of your traffic, the sites or apps you reach, DNS queries, or any browsing history. There is no per-request connection log tied to what you do online. Because we never gather this data, there is nothing of that kind to disclose or lose.</p>
+
+  <h2>How it is stored</h2>
+  <p>The limited data above is stored on our own infrastructure, encrypted in transit, and retained only as long as it is needed to operate your account and the service. Payments happen entirely through external channels, so no payment card details ever touch our systems.</p>
+
+  <div class="doc-card">
+    <h3>Questions?</h3>
+    <p>Reach out through any of the channels listed in the footer and we'll help clarify how your data is handled.</p>
+  </div>
+</Doc>

web/website/src/pages/docs/protocol.astro

@@ -0,0 +1,22 @@
+---
+import Doc from '../../layouts/Doc.astro';
+---
+<Doc lang="en" title="Protocol & security" desc="Our data plane runs on sing-box with the REALITY transport, plus a strict no-logs architecture.">
+  <div class="doc-eyebrow">Docs</div>
+  <h1>Protocol &amp; security</h1>
+  <p class="doc-lede">How we move your traffic quickly while keeping it private — the transport, the encryption, and the no-logs architecture behind it.</p>
+
+  <h2>Data plane: sing-box + REALITY</h2>
+  <p>Our data plane is built on <strong>sing-box</strong> and uses the <strong>REALITY</strong> transport. REALITY performs a genuine TLS handshake against a real destination, so accelerated traffic blends in with ordinary encrypted web traffic instead of standing out. The result is a connection that stays fast and reliable on demanding networks.</p>
+
+  <h2>End-to-end encryption</h2>
+  <p>Every session is encrypted from your device to the node. Encryption is the baseline for all traffic on every plan — it is not an add-on. Keys are negotiated per session, and the client configuration is rendered and delivered by our control plane rather than assembled on the device.</p>
+
+  <h2>No-logs architecture</h2>
+  <p>We do not record what you browse. Nodes forward traffic without keeping content or connection logs, and the system is designed so there is simply nothing sensitive to hand over. What we do keep is the operational minimum needed to run the service — see the <a href="/docs/privacy/">Privacy policy</a> for the exact list.</p>
+
+  <div class="doc-card">
+    <h3>Kill switch</h3>
+    <p>If the tunnel ever drops, the client blocks traffic instantly so your real IP is never exposed while the connection re-establishes.</p>
+  </div>
+</Doc>

web/website/src/pages/docs/quickstart.astro

@@ -0,0 +1,22 @@
+---
+import Doc from '../../layouts/Doc.astro';
+---
+<Doc lang="en" title="Quickstart" desc="Sign up, download and make your first connection in three minutes.">
+  <div class="doc-eyebrow">Docs</div>
+  <h1>Quickstart</h1>
+  <p class="doc-lede">Get from zero to your first fast, stable connection in about three minutes — three steps, no configuration.</p>
+
+  <h2>1. Create an account</h2>
+  <p>Enter your email on the homepage or in the app and confirm the verification code we send you. Registration is free and needs nothing but an email — no payment details, ever. New accounts include a 7-day free trial with full access.</p>
+
+  <h2>2. Download the client</h2>
+  <p>Grab the app for your platform from the <a href="/#download">Download</a> section — Windows, macOS, Android and iOS are supported. One account syncs across every device, up to 5 at once.</p>
+
+  <h2>3. Log in and connect</h2>
+  <p>Open the app, sign in with the same email, and tap the connect button. The app smart-picks the fastest route for you; there is nothing to configure. When you see <strong>Connected</strong>, you're on an accelerated line.</p>
+
+  <div class="doc-card">
+    <h3>Upgrading later</h3>
+    <p>For privacy and risk reasons we never take payment inside the web or app. When you want more, obtain an activation code through an external channel and redeem it in the client to unlock unlimited data and top-speed routes.</p>
+  </div>
+</Doc>

web/website/src/pages/zh/docs/faq.astro

@@ -0,0 +1,26 @@
+---
+import Doc from '../../../layouts/Doc.astro';
+---
+<Doc lang="zh" title="常见问题" desc="关于账户、套餐、设备与激活码的常见疑问。">
+  <div class="doc-eyebrow">文档</div>
+  <h1>常见问题</h1>
+  <p class="doc-lede">关于账户、套餐、设备与兑换码，最常被问到的几个问题，简明作答。</p>
+
+  <h2>如何兑换激活码？</h2>
+  <p>打开 App，进入账户或订阅页，选择<strong>兑换激活码</strong>，粘贴激活码并确认，套餐即刻升级，无需重启。激活码通过外部渠道获取；网页与 App 内均不设收银台。</p>
+
+  <h2>支持哪些平台？</h2>
+  <p>Windows、macOS、Android 与 iOS。一个账户全平台通用，套餐与设置在各设备间同步。</p>
+
+  <h2>免费版有哪些限制？</h2>
+  <p>免费版每天可连接 10 分钟，仅含 1 个基础节点，且每次连接前需观看一段短广告。核心加密与无日志承诺在所有套餐（含免费版）中一视同仁。7 天试用期内不受时长限制。</p>
+
+  <h2>可以用几台设备？</h2>
+  <p>专业版一个账户最多 5 台设备同时在线。各设备用同一邮箱登录即可保持同步。</p>
+
+  <h2>忘记密码了怎么办？</h2>
+  <p>账户采用邮箱验证码登录，没有固定密码需要记忆。登录时重新获取一次验证码、输入即可进入。</p>
+
+  <h2>为什么网页上没有支付按钮？</h2>
+  <p>出于风控与隐私考虑，穿山甲不在网页或 App 内直接收款。你通过外部渠道获取激活码、在客户端内兑换 —— 资金流全程不经过我们的平台。</p>
+</Doc>

web/website/src/pages/zh/docs/privacy.astro

@@ -0,0 +1,27 @@
+---
+import Doc from '../../../layouts/Doc.astro';
+---
+<Doc lang="zh" title="隐私政策" desc="我们收集什么、绝不收集什么，以及如何存储。">
+  <div class="doc-eyebrow">文档</div>
+  <h1>隐私政策</h1>
+  <p class="doc-lede">隐私保护是这款产品的底线，而非营销话术。以下用大白话说清我们收集与绝不收集的内容。</p>
+
+  <h2>我们收集什么</h2>
+  <p>我们只保留运行账户与服务所必需的最小信息：</p>
+  <ul>
+    <li><strong>账户邮箱</strong> —— 用于登录、发送验证码，以及将套餐与你绑定。</li>
+    <li><strong>设备标识</strong> —— 一个匿名 ID，用于限制设备数量、在多设备间同步套餐。</li>
+    <li><strong>用量统计</strong> —— 连接时长、流量等粗粒度数据，用于计费限额与容量规划。</li>
+  </ul>
+
+  <h2>我们绝不收集什么</h2>
+  <p>我们不记录你的流量内容、访问的网站或 App、DNS 查询，也不保留任何浏览历史；不存在与你上网行为绑定的逐条连接日志。因为我们从一开始就不采集这类数据，所以也没有这类数据可供交出或泄露。</p>
+
+  <h2>如何存储</h2>
+  <p>上述有限数据存放在我们自有的基础设施上，传输过程加密，且仅在运行账户与服务所需的期限内保留。收款全部经外部渠道完成，任何银行卡信息都不会触及我们的系统。</p>
+
+  <div class="doc-card">
+    <h3>还有疑问？</h3>
+    <p>通过页脚列出的任一渠道联系我们，我们会进一步说明你的数据是如何被处理的。</p>
+  </div>
+</Doc>

web/website/src/pages/zh/docs/protocol.astro

@@ -0,0 +1,22 @@
+---
+import Doc from '../../../layouts/Doc.astro';
+---
+<Doc lang="zh" title="协议与安全" desc="数据面基于 sing-box + REALITY，配合严格无日志架构。">
+  <div class="doc-eyebrow">文档</div>
+  <h1>协议与安全</h1>
+  <p class="doc-lede">我们如何在保持极速的同时守护隐私 —— 传输方式、加密机制，以及背后的无日志架构。</p>
+
+  <h2>数据面：sing-box + REALITY</h2>
+  <p>我们的数据面基于 <strong>sing-box</strong>，传输采用 <strong>REALITY</strong>。REALITY 会与真实站点完成一次真正的 TLS 握手，使加速流量与普通加密网页流量融为一体、不易被区分，从而在苛刻网络下依然快速稳定。</p>
+
+  <h2>端到端加密</h2>
+  <p>每一次会话都从你的设备到节点全程加密。加密是所有套餐、所有流量的底线，而非附加项。密钥按会话协商，客户端配置由控制面渲染下发，而非在设备本地拼装。</p>
+
+  <h2>无日志架构</h2>
+  <p>我们不记录你浏览了什么。节点只做流量转发，不保留内容或连接日志；整套系统的设计初衷，就是让敏感数据「压根不存在、无从交出」。我们仅保留运行服务所必需的最小运营数据 —— 具体清单见<a href="/zh/docs/privacy/">隐私政策</a>。</p>
+
+  <div class="doc-card">
+    <h3>Kill Switch</h3>
+    <p>一旦隧道中断，客户端立即阻断网络，在连接重建期间杜绝真实 IP 泄露。</p>
+  </div>
+</Doc>

web/website/src/pages/zh/docs/quickstart.astro

@@ -0,0 +1,22 @@
+---
+import Doc from '../../../layouts/Doc.astro';
+---
+<Doc lang="zh" title="快速开始" desc="三分钟完成注册、下载与首次连接。">
+  <div class="doc-eyebrow">文档</div>
+  <h1>快速开始</h1>
+  <p class="doc-lede">三步走，约三分钟即可完成第一次极速、稳定的连接，全程无需任何配置。</p>
+
+  <h2>1. 注册账户</h2>
+  <p>在主页或 App 内填写邮箱，输入收到的验证码即可完成注册。注册免费，只要一个邮箱，无需任何付款信息。新账户还附赠 7 天免费试用，功能不设限。</p>
+
+  <h2>2. 下载客户端</h2>
+  <p>在<a href="/zh/#download">下载</a>区选择对应平台的安装包 —— 支持 Windows、macOS、Android 与 iOS。一个账户多端同步，最多 5 台设备同时在线。</p>
+
+  <h2>3. 登录并连接</h2>
+  <p>打开 App，用同一邮箱登录，点一下连接按钮即可。客户端会智能挑选最快线路，无需手动设置。当界面显示<strong>已连接</strong>，你就已经在加速线路上了。</p>
+
+  <div class="doc-card">
+    <h3>之后如何升级</h3>
+    <p>出于风控与隐私考虑，我们不在网页或 App 内直接收款。想要更多时，通过外部渠道获取激活码，在客户端内兑换即可解锁无限流量与极速线路。</p>
+  </div>
+</Doc>

web/website/src/styles/site-extra.css

@@ -59,6 +59,125 @@
   box-shadow: 0 1px 4px rgba(45, 30, 20, 0.08);
 }
 
+/* 登录态用户下拉菜单：复用 .langwrap/.langsel/.langmenu 视觉，追加用户名截断
+   与菜单内 <button>（切换用户 / 退出登录需 JS，非纯链接）的等价样式。 */
+.usermenu .userbtn {
+  max-width: 168px;
+}
+.usermenu .uname {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.usermenu .langmenu button {
+  width: 100%;
+  text-align: left;
+  border: none;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--fg1);
+  background: transparent;
+  padding: 8px 11px;
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+  transition: background var(--dur-fast) var(--ease-out);
+}
+.usermenu .langmenu button:hover {
+  background: var(--bg-subtle);
+}
+
+/* 文档正文页（/docs/*）：承载标题层级 / 段落 / 列表 / 卡片的可读排版。 */
+.doc-page {
+  padding: 56px 0 88px;
+}
+.doc-article {
+  max-width: 760px;
+}
+.doc-article .doc-eyebrow {
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--accent);
+}
+.doc-article h1 {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 38px;
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+  margin: 12px 0 0;
+}
+.doc-article .doc-lede {
+  font-size: 17px;
+  color: var(--fg2);
+  line-height: 1.6;
+  margin: 14px 0 0;
+}
+.doc-article h2 {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 22px;
+  letter-spacing: -0.01em;
+  margin: 40px 0 0;
+}
+.doc-article h3 {
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 17px;
+  margin: 26px 0 0;
+}
+.doc-article p {
+  font-size: 15.5px;
+  color: var(--fg2);
+  line-height: 1.7;
+  margin: 12px 0 0;
+}
+.doc-article ul,
+.doc-article ol {
+  margin: 12px 0 0;
+  padding-left: 22px;
+  color: var(--fg2);
+}
+.doc-article li {
+  font-size: 15.5px;
+  line-height: 1.7;
+  margin: 6px 0 0;
+}
+.doc-article a {
+  color: var(--accent);
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.doc-article strong {
+  color: var(--fg1);
+  font-weight: 700;
+}
+.doc-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  padding: 22px 24px;
+  box-shadow: var(--shadow-sm);
+  margin: 26px 0 0;
+}
+.doc-card h3 {
+  margin-top: 0;
+}
+.doc-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 44px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--accent);
+}
+
 /* 视觉隐藏（无障碍用，当前未强依赖） */
 .visually-hidden {
   position: absolute;