boos/BoosAPI
2
0
Fork 2
Code Issues Pull Requests Packages Projects Releases Wiki Activity

polish topbar user experience

Browse Source
This commit is contained in:
boos
2026-06-06 17:31:41 +08:00
parent 13756adc9d
commit 188e457e7f
3 changed files with 296 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/App.tsx
+84 -19
View File
@@ -1,5 +1,6 @@
import React, { Suspense, lazy, useState, useEffect, useRef } from 'react';
import { Routes, Route, NavLink, Navigate, useLocation } from 'react-router-dom';
import { gsap } from 'gsap';
import { ToastProvider, useToast } from './components/Toast.js';
import SearchModal from './components/SearchModal.js';
import NotificationPanel from './components/NotificationPanel.js';
@@ -459,6 +460,7 @@ function RouteLoadingFallback() {
function AppShell() {
const { language, toggleLanguage, t } = useI18n();
const location = useLocation();
const topbarRef = useRef<HTMLElement>(null);
const [authed, setAuthed] = useState(() => getSessionToken('admin') !== null);
const [userAuthed, setUserAuthed] = useState(() => getSessionToken('user') !== null);
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
@@ -489,9 +491,52 @@ function AppShell() {
? (systemPrefersDark ? 'dark' : 'light')
: themeMode;
const rawDisplayName = (userProfile.name || '').trim();
const displayName = rawDisplayName ? (rawDisplayName === '管理员' ? t('管理员') : rawDisplayName) : t('管理员');
const accountRoleLabel = profileAudience === 'admin' ? t('管理员') : t('普通用户');
const displayName = rawDisplayName ? (rawDisplayName === '管理员' ? t('管理员') : rawDisplayName) : accountRoleLabel;
const resolvedThemeLabel = resolvedTheme === 'dark' ? t('深色') : t('浅色');
const avatarUrl = buildDicebearAvatarUrl(userProfile.avatarStyle, userProfile.avatarSeed);
useEffect(() => {
const root = topbarRef.current;
if (!root) return undefined;
const mm = gsap.matchMedia();
mm.add(
{
reduceMotion: '(prefers-reduced-motion: reduce)',
isDesktop: '(min-width: 900px)',
},
(context) => {
const conditions = context.conditions || {};
const items = Array.from(root.querySelectorAll<HTMLElement>('.topbar-motion-item'));
if (conditions.reduceMotion) {
gsap.set(items, {
autoAlpha: 1,
clearProps: 'transform,opacity,visibility',
});
return undefined;
}
const tween = gsap.fromTo(
items,
{ autoAlpha: 0, y: conditions.isDesktop ? -8 : -4, scale: 0.985 },
{
autoAlpha: 1,
y: 0,
scale: 1,
duration: 0.34,
ease: 'power2.out',
stagger: 0.032,
clearProps: 'transform,opacity,visibility',
},
);
return () => tween.kill();
},
);
return () => mm.revert();
}, []);
useEffect(() => {
setUserProfile(resolveStoredProfile(profileAudience));
}, [profileAudience]);
@@ -758,10 +803,10 @@ function AppShell() {
] : topNavItems;
return (
<>
<header className="topbar">
<header ref={topbarRef} className="topbar">
{isMobile && (
<button
className="topbar-icon-btn"
className="topbar-icon-btn topbar-motion-item"
aria-label={t('打开导航')}
onClick={() => setDrawerOpen(true)}
type="button"
@@ -771,13 +816,16 @@ function AppShell() {
</svg>
</button>
)}
<div className="topbar-logo">
<div className="topbar-logo topbar-motion-item">
<span className="topbar-logo-mark">
<img src="/logo.png" alt="BossAI" />
</span>
<span className="topbar-logo-text">BossAI</span>
<span className="topbar-logo-copy">
<span className="topbar-logo-text">BossAI</span>
<span className="topbar-logo-subtitle">{isUserPage ? t('用户工作台') : t('管理控制台')}</span>
</span>
</div>
<nav className="topbar-nav">
<nav className="topbar-nav topbar-motion-item">
{currentTopNavItems.map((item) => (
<NavLink key={item.to} to={item.to} end className={({ isActive }) => `topbar-nav-item ${isActive ? 'active' : ''}`}>
{t(item.label)}
@@ -786,20 +834,19 @@ function AppShell() {
</nav>
<div className="topbar-right">
<button
className="topbar-icon-btn"
className="topbar-icon-btn topbar-language-btn topbar-motion-item"
aria-label={language === 'zh' ? 'Switch to English' : '切换到中文'}
onClick={toggleLanguage}
style={{ minWidth: 36, fontSize: 12, fontWeight: 700 }}
>
{language === 'zh' ? 'EN' : '中'}
</button>
<button className="topbar-search-trigger" aria-label={t('搜索 (Ctrl+K)')} onClick={() => setShowSearch(true)}>
<button className="topbar-search-trigger topbar-motion-item" aria-label={t('搜索 (Ctrl+K)')} onClick={() => setShowSearch(true)}>
<svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
<span className="topbar-search-label">{t('搜索')}</span>
<kbd className="topbar-search-kbd">Ctrl K</kbd>
</button>
<div style={{ position: 'relative' }}>
<button ref={notifBtnRef} className="topbar-icon-btn" aria-label={t('通知')} onClick={() => setShowNotifications(!showNotifications)}>
<button ref={notifBtnRef} className="topbar-icon-btn topbar-motion-item" aria-label={t('通知')} onClick={() => setShowNotifications(!showNotifications)}>
<svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
{unreadCount > 0 && (
<span className="topbar-badge">
@@ -811,7 +858,7 @@ function AppShell() {
</div>
<div ref={themeMenuRef} style={{ position: 'relative' }}>
<button
className="topbar-icon-btn"
className="topbar-icon-btn topbar-motion-item"
aria-label={themeMode === 'system'
? `${t('跟随系统')} (${resolvedThemeLabel})`
: (themeMode === 'light' ? t('浅色模式') : t('深色模式'))}
@@ -857,8 +904,8 @@ function AppShell() {
<div ref={userMenuRef} style={{ position: 'relative' }}>
<button
type="button"
className="topbar-avatar"
aria-label={displayName}
className="topbar-user-trigger topbar-motion-item"
aria-label={`${t('账户菜单')}: ${displayName}`}
aria-haspopup="menu"
aria-expanded={showUserMenu}
onClick={() => {
@@ -866,14 +913,32 @@ function AppShell() {
setShowThemeMenu(false);
}}
>
<img
src={avatarUrl}
alt={displayName}
style={{ width: '100%', height: '100%', borderRadius: '50%', objectFit: 'cover' }}
/>
<span className="topbar-user-avatar">
<img
src={avatarUrl}
alt={displayName}
/>
</span>
<span className="topbar-user-copy">
<span className="topbar-user-name">{displayName}</span>
<span className="topbar-user-role">{accountRoleLabel}</span>
</span>
<svg className={`topbar-user-chevron ${showUserMenu ? 'open' : ''}`} width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 9l6 6 6-6" />
</svg>
</button>
{userMenuPresence.shouldRender && (
<div className={`user-dropdown ${userMenuPresence.isVisible ? '' : 'is-closing'}`.trim()}>
<div className={`user-dropdown user-dropdown-profile ${userMenuPresence.isVisible ? '' : 'is-closing'}`.trim()}>
<div className="user-dropdown-header">
<span className="user-dropdown-avatar">
<img src={avatarUrl} alt={displayName} />
</span>
<span className="user-dropdown-identity">
<strong>{displayName}</strong>
<span>{accountRoleLabel} / {resolvedThemeLabel}</span>
</span>
</div>
<div className="user-dropdown-divider" />
<button
className="user-dropdown-item"
onClick={() => {
src/web/i18n.tsx
+3
View File
@@ -7,6 +7,9 @@ const LANGUAGE_STORAGE_KEY = 'app_language';
const zhToEn: Record<string, string> = {
'管理员': 'Admin',
'管理控制台': 'Admin Console',
'用户工作台': 'User Workspace',
'账户菜单': 'Account Menu',
'登录令牌无效': 'Invalid admin token',
'当前 IP 不在管理白名单中': 'Current IP is not in admin allowlist',
'当前识别到的管理端 IP（由服务端判定）：': 'Current recognized admin IP (server-side detected):',
src/web/index.css
+209 -6
View File
@@ -11515,6 +11515,7 @@ body::before {
.topbar {
height: var(--topbar-height);
padding: 0 22px;
gap: 14px;
border-bottom: 1px solid var(--console-line);
background:
linear-gradient(180deg, color-mix(in srgb, var(--console-panel-solid) 90%, transparent), color-mix(in srgb, var(--console-panel-solid) 78%, transparent));
@@ -11532,7 +11533,7 @@ body::before {
.topbar-logo {
min-width: 168px;
gap: 11px;
margin-right: 20px;
margin-right: 4px;
}
.topbar-logo-mark {
@@ -11571,13 +11572,39 @@ body::before {
color: var(--console-ink);
}
.topbar-nav {
.topbar-logo-copy {
min-width: 0;
display: grid;
gap: 1px;
}
.topbar-logo-subtitle {
display: block;
max-width: 92px;
overflow: hidden;
color: var(--color-text-muted);
font-size: 10.5px;
font-weight: 650;
line-height: 1.1;
text-overflow: ellipsis;
white-space: nowrap;
}
.topbar-nav {
flex: 1 1 auto;
min-width: 0;
max-width: min(680px, 48vw);
gap: 3px;
padding: 4px;
border: 1px solid var(--console-line);
border-radius: 999px;
background: color-mix(in srgb, var(--color-bg-card) 70%, transparent);
overflow-x: auto;
scrollbar-width: none;
}
.topbar-nav::-webkit-scrollbar {
display: none;
}
.topbar-nav a,
@@ -11609,7 +11636,8 @@ body::before {
.topbar-icon-btn,
.topbar-search-trigger,
.topbar-avatar {
.topbar-avatar,
.topbar-user-trigger {
border: 1px solid var(--console-line);
background: color-mix(in srgb, var(--color-bg-card) 76%, transparent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
@@ -11617,7 +11645,8 @@ body::before {
[data-theme="dark"] .topbar-icon-btn,
[data-theme="dark"] .topbar-search-trigger,
[data-theme="dark"] .topbar-avatar {
[data-theme="dark"] .topbar-avatar,
[data-theme="dark"] .topbar-user-trigger {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
@@ -11625,15 +11654,22 @@ body::before {
color: var(--color-text-secondary);
}
.topbar-language-btn {
min-width: 36px;
font-size: 12px;
font-weight: 760;
}
.topbar-icon-btn:hover,
.topbar-search-trigger:hover {
.topbar-search-trigger:hover,
.topbar-user-trigger:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--color-primary) 26%, var(--console-line));
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card));
}
.topbar-search-trigger {
min-width: 188px;
min-width: 178px;
border-radius: 999px;
}
@@ -11649,6 +11685,140 @@ body::before {
overflow: hidden;
}
.topbar-user-trigger {
min-width: 148px;
max-width: 214px;
height: 38px;
display: inline-grid;
grid-template-columns: 30px minmax(0, 1fr) 14px;
align-items: center;
gap: 9px;
padding: 3px 9px 3px 4px;
border-radius: 999px;
color: var(--color-text-primary);
cursor: pointer;
transition: transform 0.16s ease, border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
appearance: none;
-webkit-appearance: none;
}
.topbar-user-trigger:focus-visible {
outline: 2px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
outline-offset: 2px;
}
.topbar-user-avatar,
.user-dropdown-avatar {
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--console-line));
border-radius: 999px;
background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card));
}
.topbar-user-avatar {
width: 30px;
height: 30px;
}
.topbar-user-avatar img,
.user-dropdown-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.topbar-user-copy {
min-width: 0;
display: grid;
gap: 1px;
text-align: left;
}
.topbar-user-name,
.topbar-user-role {
display: block;
overflow: hidden;
line-height: 1.1;
text-overflow: ellipsis;
white-space: nowrap;
}
.topbar-user-name {
color: var(--color-text-primary);
font-size: 12.5px;
font-weight: 780;
}
.topbar-user-role {
color: var(--color-text-muted);
font-size: 10.5px;
font-weight: 650;
}
.topbar-user-chevron {
color: var(--color-text-muted);
transition: transform 0.16s ease, color 0.16s ease;
}
.topbar-user-trigger:hover .topbar-user-chevron,
.topbar-user-chevron.open {
color: var(--color-primary);
}
.topbar-user-chevron.open {
transform: rotate(180deg);
}
.user-dropdown-profile {
min-width: 230px;
}
.user-dropdown-header {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 9px 10px;
}
.user-dropdown-avatar {
width: 34px;
height: 34px;
flex: 0 0 auto;
}
.user-dropdown-identity {
min-width: 0;
display: grid;
gap: 2px;
}
.user-dropdown-identity strong,
.user-dropdown-identity span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-dropdown-identity strong {
color: var(--color-text-primary);
font-size: 13px;
font-weight: 780;
}
.user-dropdown-identity span {
color: var(--color-text-muted);
font-size: 11.5px;
}
.user-dropdown-divider {
height: 1px;
margin: 2px 4px 4px;
background: var(--console-line);
}
.app-layout {
background: transparent;
}
@@ -12230,9 +12400,14 @@ textarea:focus {
min-width: auto;
}
.topbar-logo-subtitle {
display: none;
}
.topbar-nav {
border-color: transparent;
background: transparent;
max-width: none;
}
.topbar-nav a,
@@ -12240,6 +12415,16 @@ textarea:focus {
padding-inline: 9px;
}
.topbar-user-trigger {
min-width: 42px;
grid-template-columns: 30px 14px;
padding-right: 8px;
}
.topbar-user-copy {
display: none;
}
.login-surface {
grid-template-columns: 1fr;
}
@@ -12264,6 +12449,7 @@ textarea:focus {
.topbar {
padding-inline: 12px;
gap: 8px;
}
.topbar-logo-mark {
@@ -12280,6 +12466,23 @@ textarea:focus {
min-width: 38px;
}
.topbar-user-trigger {
min-width: 36px;
width: 36px;
height: 36px;
grid-template-columns: 30px;
gap: 0;
padding: 2px;
}
.topbar-user-chevron {
display: none;
}
.user-dropdown-profile {
min-width: 220px;
}
.console-hero {
grid-template-columns: 1fr;
padding: 18px;