DBT/clawgo
1
0
Fork 0
mirror of https://github.com/YspCoder/clawgo.git synced 2026-05-21 23:47:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

webui mobile polish: compact header/status and improve dashboard spacing

Browse Source
This commit is contained in:
DBT
2026-02-26 00:31:11 +00:00
parent 98add491be
commit ba2d68105a
2 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
webui/src/components/Header.tsx
View File

@@ -13,20 +13,20 @@ const Header: React.FC = () => {
}; };
return ( return (
<header className="h-16 border-b border-zinc-800 bg-zinc-900/50 flex items-center justify-between px-6 shrink-0 z-10"> <header className="h-14 md:h-16 border-b border-zinc-800 bg-zinc-900/70 flex items-center justify-between px-3 md:px-6 shrink-0 z-10">
<div className="flex items-center gap-3"> <div className="flex items-center gap-2 md:gap-3 min-w-0">
<button className="md:hidden p-2 rounded-lg hover:bg-zinc-800 text-zinc-300" onClick={() => setSidebarOpen(true)}> <button className="md:hidden p-2 rounded-lg hover:bg-zinc-800 text-zinc-300" onClick={() => setSidebarOpen(true)}>
<Menu className="w-5 h-5" /> <Menu className="w-5 h-5" />
</button> </button>
<div className="w-9 h-9 rounded-xl bg-indigo-500 flex items-center justify-center shadow-lg shadow-indigo-500/20"> <div className="w-8 h-8 md:w-9 md:h-9 rounded-xl bg-indigo-500 flex items-center justify-center shadow-lg shadow-indigo-500/20 shrink-0">
<Terminal className="w-5 h-5 text-white" /> <Terminal className="w-4 h-4 md:w-5 md:h-5 text-white" />
</div> </div>
<span className="font-semibold text-xl tracking-tight">ClawGo</span> <span className="font-semibold text-lg md:text-xl tracking-tight truncate">ClawGo</span>
</div> </div>
<div className="flex items-center gap-6"> <div className="flex items-center gap-2 md:gap-6">
<div className="flex items-center gap-2.5 bg-zinc-900 border border-zinc-800 px-3 py-1.5 rounded-lg"> <div className="flex items-center gap-1.5 md:gap-2.5 bg-zinc-900 border border-zinc-800 px-2 md:px-3 py-1 rounded-lg max-w-[140px] md:max-w-none overflow-hidden">
<span className="text-sm font-medium text-zinc-400">{t('gatewayStatus')}:</span> <span className="hidden md:inline text-sm font-medium text-zinc-400">{t('gatewayStatus')}:</span>
{isGatewayOnline ? ( {isGatewayOnline ? (
<div className="flex items-center gap-1.5 bg-emerald-500/10 text-emerald-400 px-2.5 py-0.5 rounded-md text-xs font-semibold border border-emerald-500/20"> <div className="flex items-center gap-1.5 bg-emerald-500/10 text-emerald-400 px-2.5 py-0.5 rounded-md text-xs font-semibold border border-emerald-500/20">
<div className="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.8)]" /> <div className="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.8)]" />
@@ -40,7 +40,7 @@ const Header: React.FC = () => {
)} )}
</div> </div>
<div className="h-5 w-px bg-zinc-800" /> <div className="hidden md:block h-5 w-px bg-zinc-800" />
<button <button
onClick={toggleLang} onClick={toggleLang}

8
webui/src/pages/Dashboard.tsx
View File

@@ -18,10 +18,10 @@ const Dashboard: React.FC = () => {
}, [nodes]); }, [nodes]);
return ( return (
<div className="p-8 max-w-7xl mx-auto space-y-8"> <div className="p-4 md:p-8 max-w-7xl mx-auto space-y-5 md:space-y-8">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between gap-3">
<h1 className="text-2xl font-semibold tracking-tight">{t('dashboard')}</h1> <h1 className="text-xl md:text-2xl font-semibold tracking-tight">{t('dashboard')}</h1>
<button onClick={refreshAll} className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-sm font-medium transition-colors"> <button onClick={refreshAll} className="flex items-center gap-2 px-3 md:px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-sm font-medium transition-colors shrink-0">
<RefreshCw className="w-4 h-4" /> {t('refreshAll')} <RefreshCw className="w-4 h-4" /> {t('refreshAll')}
</button> </button>
</div> </div>