polish topbar user experience

src/web/App.tsx

@@ -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-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);
               }}
             >
+              <span className="topbar-user-avatar">
                 <img
                   src={avatarUrl}
                   alt={displayName}
-                style={{ width: '100%', height: '100%', borderRadius: '50%', objectFit: 'cover' }}
                 />
+              </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

@@ -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

@@ -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;