63 lines
3.4 KiB
TypeScript
63 lines
3.4 KiB
TypeScript
import ThemeToggle from '@/components/ThemeToggle'
|
|
|
|
interface Props {
|
|
displayName: string
|
|
isAdmin: boolean
|
|
backLabel?: string
|
|
}
|
|
|
|
export default function HeaderUI({ displayName, isAdmin, backLabel }: Props) {
|
|
return (
|
|
<header style={{
|
|
position: 'sticky', top: 0, zIndex: 50, height: 56,
|
|
background: 'var(--bg-card)', borderBottom: '1px solid var(--border)',
|
|
}}>
|
|
<div className="header-inner" style={{ height: '100%', padding: '0 clamp(16px, 3vw, 48px)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
{/* 左侧 */}
|
|
{backLabel ? (
|
|
<a href="/" style={{ display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none', color: 'var(--text-secondary)', fontSize: 15 }}>
|
|
<span>←</span>
|
|
<div style={{ width: 26, height: 26, background: '#2563eb', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, color: '#fff' }}>◎</div>
|
|
<span style={{ fontWeight: 700, color: 'var(--text)' }}>{backLabel}</span>
|
|
</a>
|
|
) : (
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 18, fontWeight: 700, color: 'var(--text)' }}>
|
|
<div style={{ width: 30, height: 30, background: '#2563eb', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, color: '#fff' }}>◎</div>
|
|
OA 统一门户
|
|
</div>
|
|
)}
|
|
|
|
{/* 右侧 */}
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
|
{isAdmin && (
|
|
<a href="/admin/create-user" style={{ fontSize: 13, color: 'var(--text-secondary)', textDecoration: 'none', marginRight: 8 }}>用户管理</a>
|
|
)}
|
|
<ThemeToggle />
|
|
<div style={{ width: 1, height: 24, background: 'var(--border)', margin: '0 4px' }}></div>
|
|
<a href="/profile" style={{
|
|
display: 'flex', alignItems: 'center', gap: 7, padding: '4px 14px 4px 4px',
|
|
border: '1px solid var(--border)', borderRadius: 20, textDecoration: 'none', background: 'var(--bg-card)',
|
|
}}>
|
|
<span style={{ width: 26, height: 26, borderRadius: '50%', background: '#2563eb', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, color: '#fff', fontWeight: 600 }}>{displayName.charAt(0).toUpperCase()}</span>
|
|
<span style={{ fontSize: 13, color: 'var(--text)' }}>{displayName}</span>
|
|
</a>
|
|
<form action="/api/auth/logout" method="POST" style={{ display: 'inline' }}>
|
|
<button type="submit" className="lo" title="退出登录" style={{
|
|
width: 36, height: 36, borderRadius: 8, border: '1px solid var(--border)',
|
|
background: 'var(--bg-card)', cursor: 'pointer', display: 'flex',
|
|
alignItems: 'center', justifyContent: 'center', color: 'var(--text-secondary)',
|
|
transition: 'all 0.15s',
|
|
}}>
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
|
|
<polyline points="16 17 21 12 16 7"/>
|
|
<line x1="21" y1="12" x2="9" y2="12"/>
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|