wangjia
e2646346a6
新建 web/usercenter/：Next.js App Router + output:'export' 纯静态导出，
直接复用 design/ui_kits/usercenter React 源码（概览/订阅/兑换/邀请/设置）。
阶段 A（mock，本提交）：
- 复刻五大页面，明/暗 × zh/en 四态；colors_and_type.css 原样链入；
顶栏主题切换 + 语言段控，移动端底部 Tab + 左右滑动切换。
- 设置页新增：偏好(语言/主题) + 设备管理(列表/移除/二次确认+刷新) +
TOTP 2FA(绑定二维码占位+密钥/验证/解禁)，登录二段式 TOTP。
- 数据层 lib/api：ApiClient 抽象 + MockClient/HttpClient 双实现，构建期
NEXT_PUBLIC_API_MODE 切换；统一错误体 {code,message_zh,message_en} → 双语映射。
- 会话：access token 仅内存，refresh header token + localStorage，静默续期，
登出失效（取舍：静态导出无服务端 cookie 能力，详见 README）。
- 安全：构建期注入 SRI(sha384)；_headers 严格 CSP + 安全基线；
红线词扫描(铁律13) CI 红线，零命中。
阶段 B（占位待联调）：HttpClient 已写好域名池+退避重试+401 续期；
TOTP/登录二段式端点占位待 #1 契约增补；me/redeem/devices 切真实链路依赖 #2/#3/#4。
验证：npm run lint / redline / build 均通过，静态产物 out/ 无服务端依赖。
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
// shared.tsx — 公共样式常量与原子（承袭 ucapp.jsx 的 ucCard / ucInput / UCLang）
|
||
import React from 'react';
|
||
import type { Lang } from '../lib/i18n';
|
||
|
||
export const card: React.CSSProperties = {
|
||
background: 'var(--surface)',
|
||
border: '1px solid var(--border)',
|
||
borderRadius: 'var(--radius-xl)',
|
||
boxShadow: 'var(--shadow-sm)',
|
||
};
|
||
|
||
export const input: React.CSSProperties = {
|
||
border: '1.5px solid var(--border-strong)',
|
||
borderRadius: 'var(--radius-md)',
|
||
padding: '12px 14px',
|
||
fontFamily: 'var(--font-sans)',
|
||
fontSize: 14.5,
|
||
color: 'var(--fg1)',
|
||
background: 'var(--surface)',
|
||
outline: 'none',
|
||
width: '100%',
|
||
boxSizing: 'border-box',
|
||
};
|
||
|
||
export function LangSeg({ lang, setLang }: { lang: Lang; setLang: (l: Lang) => void }) {
|
||
return (
|
||
<div style={{ display: 'flex', background: 'var(--bg-subtle)', borderRadius: 999, padding: 3, gap: 2 }}>
|
||
{([['zh', '中文'], ['en', 'EN']] as [Lang, string][]).map(([v, l]) => (
|
||
<button
|
||
key={v}
|
||
onClick={() => setLang(v)}
|
||
aria-pressed={lang === v}
|
||
style={{
|
||
border: 'none',
|
||
cursor: 'pointer',
|
||
borderRadius: 999,
|
||
padding: '5px 12px',
|
||
fontFamily: 'var(--font-sans)',
|
||
fontSize: 12.5,
|
||
fontWeight: 700,
|
||
background: lang === v ? 'var(--accent)' : 'transparent',
|
||
color: lang === v ? 'var(--fg-on-accent)' : 'var(--fg3)',
|
||
}}
|
||
>
|
||
{l}
|
||
</button>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|