YANG JIANKUAN
49ca1f6e1f
- OAuth 流程透传 redirect 参数，登录后回到触发页面而非固定跳 Dashboard - 服务端校验 redirect 为相对路径，防止 Open Redirect 攻击 - 隐藏 Apple 登录按钮和邮箱注册入口 - Dark Mode 切换改为下拉菜单样式 - 提取 useClickOutside hook 消除重复代码 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
83 lines
2.9 KiB
TypeScript
83 lines
2.9 KiB
TypeScript
import { useState, useRef, useCallback } from 'react';
|
|
import { useTheme } from '../lib/theme';
|
|
import { useI18n, type TranslationKey } from '../lib/i18n';
|
|
import { useClickOutside } from '../hooks/useClickOutside';
|
|
|
|
const themes: Array<{ key: 'light' | 'dark' | 'system'; icon: JSX.Element }> = [
|
|
{
|
|
key: 'light',
|
|
icon: (
|
|
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<circle cx="12" cy="12" r="5" /><path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
key: 'dark',
|
|
icon: (
|
|
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
key: 'system',
|
|
icon: (
|
|
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<rect x="2" y="3" width="20" height="14" rx="2" /><path d="M8 21h8m-4-4v4" />
|
|
</svg>
|
|
),
|
|
},
|
|
];
|
|
|
|
export default function ThemeToggle() {
|
|
const { theme, setTheme } = useTheme();
|
|
const { t } = useI18n();
|
|
const [open, setOpen] = useState(false);
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
useClickOutside(ref, useCallback(() => setOpen(false), []), open);
|
|
|
|
const current = themes.find(th => th.key === theme)!;
|
|
|
|
return (
|
|
<div ref={ref} className="relative">
|
|
<button
|
|
onClick={() => setOpen(!open)}
|
|
className="flex items-center gap-1 px-2 py-1.5 rounded-lg text-xs font-medium transition-all duration-150 cursor-pointer hover:bg-bg-tertiary"
|
|
style={{ color: 'var(--text-secondary)' }}
|
|
aria-label="Switch theme"
|
|
>
|
|
{current.icon}
|
|
</button>
|
|
|
|
{open && (
|
|
<div
|
|
className="absolute top-full right-0 mt-1.5 min-w-[140px] rounded-xl py-1 z-50 animate-slide-down"
|
|
style={{
|
|
background: 'var(--bg-elevated)',
|
|
border: '1px solid var(--border-default)',
|
|
boxShadow: 'var(--shadow-lg)',
|
|
}}
|
|
>
|
|
{themes.map(th => (
|
|
<button
|
|
key={th.key}
|
|
onClick={() => { setTheme(th.key); setOpen(false); }}
|
|
className="flex items-center gap-2.5 w-full px-3 py-2 text-[13px] transition-colors cursor-pointer rounded-lg mx-0.5"
|
|
style={{
|
|
width: 'calc(100% - 4px)',
|
|
color: theme === th.key ? 'var(--text-primary)' : 'var(--text-secondary)',
|
|
fontWeight: theme === th.key ? 500 : 400,
|
|
background: theme === th.key ? 'var(--bg-tertiary)' : 'transparent',
|
|
}}
|
|
>
|
|
<span className="leading-none">{th.icon}</span>
|
|
{t(`theme.${th.key}` as TranslationKey)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|