fix(web): 语言下拉换自定义菜单(原生 select 弹层被系统定位/漂移)

原生 <select> 的选项弹层由 OS 定位(macOS 锚在选中项上、整体偏移=漂移),CSS 控
不了。改成自控下拉:按钮(复用药丸样式)+ 绝对定位菜单(top:100%,right:0)+ 点外/
Esc 关闭 + 选中高亮。用户中心 LangSeg 与官网 Header 同款;官网选项用 <a href> 导航
(SEO 友好)、用户中心用 setLang。两端 build 通过。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013nMthbVEmQquxBRKb9Fj8u

scripts/ci/combine-site.sh

@@ -22,22 +22,20 @@ rm -rf "${DIST}/user"
 mkdir -p "${DIST}/user"
 cp -R "${UC}/." "${DIST}/user/"
 
-# 2) 合并 _headers:用户中心路径规则前缀 /user,置于官网规则【之前】。
-#    ⚠️ CF Pages _headers 对同一 header 取【首个匹配规则】的值(实测:若 /user/* 排
-#    在官网 /* 之后,/user/ 页会命中在前的 /* 官网严格 CSP → 内联样式/连 API 被拦、
-#    页面裸奔)。故 /user/* 必须在 /* 之前才能让用户中心 CSP 生效。
-#    删掉并入产物里那份会被 CF 忽略的 /user/_headers,避免误导。
+# 2) 合并 _headers 的 CSP。⚠️ CF Pages _headers 是【叠加】的:/* 与 /user/* 都匹配
+#    /user/,两条 CSP 都会下发,浏览器对多条 CSP 取【交集(最严)】→ 官网严格 CSP
+#    的「style-src 无 unsafe-inline / connect-src 'self'」赢,用户中心的内联样式被拦、
+#    连 API 被拦 → 页面裸奔且登录失败。故在 /user/* 里用 `! Content-Security-Policy`
+#    先【删掉】/* 继承来的官网 CSP,再设用户中心自己的(须排在 /* 之后:先加后删)。
+#    其余安全头(HSTS/X-Frame/…)/* 与用户中心一致,沿用 /* 即可,不重复。
 rm -f "${DIST}/user/_headers"
-# 行首 '/'(路径规则)前缀 /user;'#' 注释与缩进的 header 行不动。
-sed -E 's#^/#/user/#' "${UC}/_headers" > "${DIST}/_uc_headers.tmp"
 {
-  echo "# ==== 用户中心(/user/*)独立 CSP,须置于官网 /* 之前(CF Pages 首个匹配 header 生效)===="
-  cat "${DIST}/_uc_headers.tmp"
   echo ""
-  cat "${DIST}/_headers"
-} > "${DIST}/_headers.new"
-mv "${DIST}/_headers.new" "${DIST}/_headers"
-rm -f "${DIST}/_uc_headers.tmp"
+  echo "# ==== 用户中心(/user/*):删掉官网 /* 继承的 CSP,换用用户中心自己的 ===="
+  echo "/user/*"
+  echo "  ! Content-Security-Policy"
+  grep -iE '^[[:space:]]*Content-Security-Policy:' "${UC}/_headers"
+} >> "${DIST}/_headers"
 
 echo "==> combine-site: done — 用户中心并入 ${DIST}/user/,_headers 已按 /user/* 分域合并"
 ls -la "${DIST}/user" | head

web/usercenter/components/shared.tsx

@@ -1,5 +1,6 @@
 // shared.tsx — 公共样式常量与原子（承袭 ucapp.jsx 的 ucCard / ucInput / UCLang）
-import React from 'react';
+'use client';
+import React, { useEffect, useRef, useState } from 'react';
 import type { Lang } from '../lib/i18n';
 
 export const card: React.CSSProperties = {
@@ -22,34 +23,110 @@ export const input: React.CSSProperties = {
   boxSizing: 'border-box',
 };
 
+const LANGS: [Lang, string][] = [
+  ['en', 'English'], ['zh', '中文'], ['ja', '日本語'],
+  ['ko', '한국어'], ['ru', 'Русский'], ['es', 'Español'],
+];
+
+// 自定义下拉:原生 <select> 的弹层由系统定位(macOS 锚在选中项、会"漂移"),
+// 改成自控菜单(按钮 + 绝对定位列表),不漂移、样式统一、跨端一致。
 export function LangSeg({ lang, setLang }: { lang: Lang; setLang: (l: Lang) => void }) {
-  // 6 语言用原生下拉（段控横排会挤）。默认 en。
-  const langs: [Lang, string][] = [
-    ['en', 'English'], ['zh', '中文'], ['ja', '日本語'],
-    ['ko', '한국어'], ['ru', 'Русский'], ['es', 'Español'],
-  ];
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!open) return;
+    const onDoc = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false); };
+    document.addEventListener('mousedown', onDoc);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDoc);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  const current = LANGS.find(([v]) => v === lang)?.[1] ?? String(lang);
   return (
-    <select
-      value={lang}
-      onChange={(e) => setLang(e.target.value as Lang)}
-      aria-label="Language"
-      style={{
-        // 圆角矩形 + 柔和边框(原纯 --border 太生硬)。
-        border: '1px solid color-mix(in oklab, var(--border), transparent 55%)',
-        cursor: 'pointer',
-        borderRadius: 10,
-        padding: '5px 10px',
-        fontFamily: 'var(--font-sans)',
-        fontSize: 12.5,
-        fontWeight: 700,
-        background: 'var(--bg-subtle)',
-        color: 'var(--fg2)',
-        boxShadow: '0 1px 2px rgba(45, 30, 20, 0.05)',
-      }}
-    >
-      {langs.map(([v, l]) => (
-        <option key={v} value={v}>{l}</option>
-      ))}
-    </select>
+    <div ref={ref} style={{ position: 'relative', display: 'inline-block' }}>
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-label="Language"
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: 6,
+          border: '1px solid color-mix(in oklab, var(--border), transparent 55%)',
+          cursor: 'pointer',
+          borderRadius: 10,
+          padding: '5px 10px',
+          fontFamily: 'var(--font-sans)',
+          fontSize: 12.5,
+          fontWeight: 700,
+          background: 'var(--bg-subtle)',
+          color: 'var(--fg2)',
+          boxShadow: '0 1px 2px rgba(45, 30, 20, 0.05)',
+        }}
+      >
+        <span>{current}</span>
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" aria-hidden="true"
+          style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 140ms' }}>
+          <path d="M6 9l6 6 6-6" stroke="currentColor" strokeWidth="2.4"
+            strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </button>
+      {open && (
+        <div
+          role="listbox"
+          style={{
+            position: 'absolute',
+            top: 'calc(100% + 6px)',
+            right: 0,
+            minWidth: 132,
+            background: 'var(--surface)',
+            border: '1px solid var(--border)',
+            borderRadius: 12,
+            boxShadow: '0 10px 30px rgba(20, 12, 6, 0.22)',
+            padding: 5,
+            zIndex: 60,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1,
+          }}
+        >
+          {LANGS.map(([v, l]) => {
+            const on = v === lang;
+            return (
+              <button
+                key={v}
+                type="button"
+                role="option"
+                aria-selected={on}
+                onClick={() => { setLang(v); setOpen(false); }}
+                style={{
+                  textAlign: 'left',
+                  border: 'none',
+                  cursor: 'pointer',
+                  background: on ? 'var(--accent-subtle, var(--bg-subtle))' : 'transparent',
+                  color: on ? 'var(--accent)' : 'var(--fg1)',
+                  fontWeight: on ? 700 : 500,
+                  fontFamily: 'var(--font-sans)',
+                  fontSize: 13,
+                  padding: '8px 11px',
+                  borderRadius: 8,
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {l}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
   );
 }

web/website/src/components/Header.jsx

@@ -3,7 +3,7 @@
  * 迁自 design/ui_kits/website/index.html 的 <header> + site.js 的菜单/滚动毛玻璃逻辑。
  * 语言切换由原型的 JS 文本替换改为「路由跳转」(zh=/, en=/en/)，单显不并排（铁律 6）。
  */
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Download, Menu } from 'lucide-react';
 import { SITE } from '../config/site';
 
@@ -29,6 +29,17 @@ function Mark() {
 export default function Header({ lang = 'zh', t = {} }) {
   const [open, setOpen] = useState(false);
   const [scrolled, setScrolled] = useState(false);
+  const [langOpen, setLangOpen] = useState(false);
+  const langRef = useRef(null);
+
+  useEffect(() => {
+    if (!langOpen) return;
+    const onDoc = (e) => { if (langRef.current && !langRef.current.contains(e.target)) setLangOpen(false); };
+    const onKey = (e) => { if (e.key === 'Escape') setLangOpen(false); };
+    document.addEventListener('mousedown', onDoc);
+    document.addEventListener('keydown', onKey);
+    return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); };
+  }, [langOpen]);
 
   useEffect(() => {
     const onScroll = () => setScrolled(window.scrollY > 8);
@@ -64,16 +75,36 @@ export default function Header({ lang = 'zh', t = {} }) {
           ))}
         </nav>
         <div class="right">
-          <select
-            class="langsel"
-            value={lang}
-            onChange={(e) => { window.location.href = langHref(e.target.value); }}
-            aria-label="Language"
-          >
-            {langs.map(([code, label]) => (
-              <option key={code} value={code}>{label}</option>
-            ))}
-          </select>
+          <div ref={langRef} style={{ position: 'relative', display: 'inline-block' }}>
+            <button
+              type="button"
+              class="langsel"
+              onClick={() => setLangOpen((o) => !o)}
+              aria-haspopup="listbox"
+              aria-expanded={langOpen}
+              aria-label="Language"
+              style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}
+            >
+              <span>{(langs.find(([c]) => c === lang) || ['', 'English'])[1]}</span>
+              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" aria-hidden="true"
+                style={{ transform: langOpen ? 'rotate(180deg)' : 'none', transition: 'transform 140ms' }}>
+                <path d="M6 9l6 6 6-6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            </button>
+            {langOpen && (
+              <div role="listbox" style={{ position: 'absolute', top: 'calc(100% + 6px)', right: 0, minWidth: 132, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 12, boxShadow: '0 10px 30px rgba(20, 12, 6, 0.22)', padding: 5, zIndex: 60, display: 'flex', flexDirection: 'column', gap: 1 }}>
+                {langs.map(([code, label]) => {
+                  const on = code === lang;
+                  return (
+                    <a key={code} role="option" aria-selected={on} href={langHref(code)}
+                      style={{ textAlign: 'left', textDecoration: 'none', background: on ? 'var(--accent-subtle, var(--bg-subtle))' : 'transparent', color: on ? 'var(--accent)' : 'var(--fg1)', fontWeight: on ? 700 : 500, fontFamily: 'var(--font-sans)', fontSize: 13, padding: '8px 11px', borderRadius: 8, whiteSpace: 'nowrap' }}>
+                      {label}
+                    </a>
+                  );
+                })}
+              </div>
+            )}
+          </div>
           <a class="linklogin" href={SITE.usercenter}>{t.login}</a>
           <a class="btn btn-primary" href="#download">
             <Download />