fix(web): redesign auth and settings UI using system design tokens and high-fidelity styles
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
WeiCHEN
committed by
weichen
weichen
co-authored by
Cursor
Cursor
parent
eedf2d17e0
commit
e8b9347d8d
@@ -23,32 +23,80 @@ export const DevRoleSwitcher: React.FC<DevRoleSwitcherProps> = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-4 right-4 z-40 select-none">
|
||||
<div className="bg-slate-900/95 border border-amber-500/40 rounded-2xl shadow-2xl backdrop-blur-md overflow-hidden text-slate-100 transition-all max-w-xs">
|
||||
<div
|
||||
style={{
|
||||
position: 'fixed',
|
||||
bottom: '16px',
|
||||
right: '16px',
|
||||
zIndex: 50,
|
||||
fontFamily: 'var(--font-sans)',
|
||||
userSelect: 'none',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '280px',
|
||||
backgroundColor: 'var(--bg-panel, #131820)',
|
||||
borderRadius: '12px',
|
||||
border: '1px solid var(--border-strong)',
|
||||
boxShadow: 'var(--shadow-lg)',
|
||||
overflow: 'hidden',
|
||||
backdropFilter: 'blur(8px)',
|
||||
}}
|
||||
>
|
||||
{/* 折叠收起顶栏 */}
|
||||
<div
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="px-3 py-2 bg-gradient-to-r from-amber-950/60 to-slate-900 flex items-center justify-between gap-3 cursor-pointer hover:bg-amber-950/80 transition"
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
backgroundColor: 'var(--bg-subtle, #1A212C)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
cursor: 'pointer',
|
||||
borderBottom: expanded ? '1px solid var(--border)' : 'none',
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-1.5 text-xs font-semibold text-amber-400">
|
||||
<Sparkles className="w-3.5 h-3.5" />
|
||||
<span>研发调试切人</span>
|
||||
<span className="text-[10px] font-mono px-1 rounded bg-amber-500/20 text-amber-300">
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
|
||||
<Sparkles size={14} style={{ color: 'var(--amber-500)' }} />
|
||||
<span style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-strong)' }}>
|
||||
DEV 调试切人
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '10px',
|
||||
padding: '1px 5px',
|
||||
borderRadius: '4px',
|
||||
backgroundColor: 'rgba(242, 169, 59, 0.15)',
|
||||
color: 'var(--amber-500)',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
DEV ONLY
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 text-[11px] text-slate-400">
|
||||
<span className="text-cyan-400 font-medium">{currentUser.name}</span>
|
||||
{expanded ? <ChevronDown className="w-3.5 h-3.5" /> : <ChevronUp className="w-3.5 h-3.5" />}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '11px', color: 'var(--text-muted)' }}>
|
||||
<span style={{ color: 'var(--brand-500)', fontWeight: 600 }}>{currentUser.name}</span>
|
||||
{expanded ? <ChevronDown size={14} /> : <ChevronUp size={14} />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 展开的快速切换列表 */}
|
||||
{expanded && (
|
||||
<div className="p-2 space-y-1 border-t border-slate-800 bg-slate-950/90 max-h-60 overflow-y-auto">
|
||||
<div className="text-[10px] text-slate-400 px-2 py-0.5">
|
||||
测试说明：点击一键切换身份，实测立项、负责人指派与单文档覆盖拦截效果：
|
||||
<div
|
||||
style={{
|
||||
padding: '8px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '4px',
|
||||
maxHeight: '220px',
|
||||
overflowY: 'auto',
|
||||
backgroundColor: 'var(--bg-card, #151B25)',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '10px', color: 'var(--text-faint)', padding: '2px 4px' }}>
|
||||
点击一键切换身份，实测立项、指派与文档权限：
|
||||
</div>
|
||||
{allUsers.map((u) => {
|
||||
const isCurrent = u.id === currentUser.id;
|
||||
@@ -56,21 +104,28 @@ export const DevRoleSwitcher: React.FC<DevRoleSwitcherProps> = ({
|
||||
<button
|
||||
key={u.id}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
onSwitchUser(u);
|
||||
onClick={() => onSwitchUser(u)}
|
||||
style={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '6px 10px',
|
||||
borderRadius: '6px',
|
||||
fontSize: '12px',
|
||||
backgroundColor: isCurrent ? 'rgba(79, 107, 255, 0.12)' : 'transparent',
|
||||
border: isCurrent ? '1px solid rgba(79, 107, 255, 0.3)' : '1px solid transparent',
|
||||
color: isCurrent ? 'var(--brand-500)' : 'var(--text)',
|
||||
cursor: 'pointer',
|
||||
textAlign: 'left',
|
||||
}}
|
||||
className={`w-full flex items-center justify-between px-2.5 py-1.5 rounded-lg text-xs transition ${
|
||||
isCurrent
|
||||
? 'bg-amber-500/20 text-amber-300 border border-amber-500/40 font-semibold'
|
||||
: 'text-slate-300 hover:bg-slate-800 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<UserCheck className="w-3.5 h-3.5 text-slate-400" />
|
||||
<span>{u.name}</span>
|
||||
<span className="text-[10px] text-slate-400 font-mono">({u.position})</span>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<UserCheck size={13} style={{ color: isCurrent ? 'var(--brand-500)' : 'var(--text-muted)' }} />
|
||||
<span style={{ fontWeight: isCurrent ? 600 : 400 }}>{u.name}</span>
|
||||
<span style={{ fontSize: '10px', color: 'var(--text-faint)' }}>({u.position})</span>
|
||||
</div>
|
||||
{isCurrent && <Check className="w-3.5 h-3.5 text-amber-400" />}
|
||||
{isCurrent && <Check size={13} style={{ color: 'var(--brand-500)' }} />}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
|
||||
Reference in New Issue
Block a user