feat(ui): topbar settings, hide dev badge, premium fleet cards

Collapse the redundant left workspace nav (overview is already the home
surface) and move Settings into the top bar. Hide placeholder `dev`
version badges. Restyle fleet cards with softer elevation, status
summary chips, hover sheen, and reduced-motion-safe entrance motion.
This commit is contained in:
chick
2026-07-21 23:14:37 +08:00
parent 9ea8021cce
commit 7d0363d275
4 changed files with 238 additions and 110 deletions
+25 -20
View File
@@ -399,6 +399,13 @@ function Page({
);
}
function displayConsoleVersion(version: string | undefined): string | undefined {
if (!version) return undefined;
const trimmed = version.trim();
if (!trimmed || trimmed.toLowerCase() === 'dev' || trimmed === '0.0.0') return undefined;
return trimmed;
}
export function AppShell({
pathname,
version = 'dev',
@@ -585,8 +592,9 @@ export function AppShell({
eventStreamClient ?? defaultEventStreamClient,
);
const currentSection = section(route);
const consoleVersion = displayConsoleVersion(version);
return (
<div className="app-shell" data-route={route.kind}>
<div className="app-shell" data-route={route.kind} data-section={currentSection ?? 'other'}>
<a className="skip-link" href="#main-content">
</a>
@@ -594,26 +602,23 @@ export function AppShell({
<a className="product-name" href="/fleet">
SimAdmin
</a>
<span className="connection-status"></span>
<span> {version}</span>
<div className="topbar-actions">
<span className="connection-status"></span>
{consoleVersion ? (
<span className="version-badge" aria-label={`控制台版本 ${consoleVersion}`}>
v{consoleVersion}
</span>
) : null}
<a
className="topbar-settings"
href="/settings/system"
aria-current={currentSection === 'settings' ? 'page' : undefined}
>
</a>
</div>
</header>
<div className="app-layout">
<nav className="global-navigation" aria-label="全局导航">
<ul>
{(
[
['fleet', '/fleet', '实例总览'],
['settings', '/settings/system', '设置'],
] as const
).map(([key, href, label]) => (
<li key={key}>
<a href={href} aria-current={currentSection === key ? 'page' : undefined}>
{label}
</a>
</li>
))}
</ul>
</nav>
<div className="app-layout app-layout-single">
<main id="main-content" tabIndex={-1}>
{routeInstanceId && instanceLoading ? (
<p role="status"></p>