ouyangbo/EvoScientist-WebUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(webui): pastel-tinted stat cards on welcome screen

Browse Source 
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
m4
2026-08-10 22:32:34 +08:00
parent 92acc7802e
commit 62005109a4
1 changed files with 61 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/ResearchDashboard.tsx
+61 -28
View File
@@ -175,6 +175,8 @@ export function ResearchDashboard({
label: string;
hint: string;
Icon: typeof Network;
cardClass: string;
tileClass: string;
target: NavTarget;
}> = [
{
@@ -182,6 +184,10 @@ export function ResearchDashboard({
label: "Knowledge",
hint: "Observations EvoScientist has learned.",
Icon: Network,
cardClass:
"border-cyan-100 bg-cyan-50 dark:border-cyan-900/50 dark:bg-cyan-950/40",
tileClass:
"bg-cyan-100 text-cyan-700 dark:bg-cyan-900/60 dark:text-cyan-300",
target: { view: "memory", tab: "knowledge" },
},
{
@@ -189,6 +195,10 @@ export function ResearchDashboard({
label: "Timeline",
hint: "Runs and observations on the activity timeline.",
Icon: Activity,
cardClass:
"border-violet-100 bg-violet-50 dark:border-violet-900/50 dark:bg-violet-950/40",
tileClass:
"bg-violet-100 text-violet-700 dark:bg-violet-900/60 dark:text-violet-300",
target: { view: "memory", tab: "history" },
},
{
@@ -197,6 +207,10 @@ export function ResearchDashboard({
label: "Workspace",
hint: "Total size of files in the current workspace.",
Icon: FolderOpen,
cardClass:
"border-amber-100 bg-amber-50 dark:border-amber-900/50 dark:bg-amber-950/40",
tileClass:
"bg-amber-100 text-amber-700 dark:bg-amber-900/60 dark:text-amber-300",
target: { view: "workspace" },
},
{
@@ -204,6 +218,10 @@ export function ResearchDashboard({
label: "Scheduled",
hint: "Recurring scheduled tasks.",
Icon: Clock,
cardClass:
"border-emerald-100 bg-emerald-50 dark:border-emerald-900/50 dark:bg-emerald-950/40",
tileClass:
"bg-emerald-100 text-emerald-700 dark:bg-emerald-900/60 dark:text-emerald-300",
target: { view: "schedule" },
},
];
@@ -212,34 +230,49 @@ export function ResearchDashboard({
<div className="mt-7 w-full max-w-xl text-left sm:mt-8">
{hasStats && (
<div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
{stats.map(({ value, unit, label, hint, Icon, target }) => (
<button
key={label}
type="button"
onClick={() => onNavigate(target)}
title={hint}
aria-label={`${label}: ${value}${
unit ? ` ${unit}` : ""
}. ${hint}`}
className="hover:border-[var(--brand)]/40 flex min-h-[82px] flex-col items-center justify-center gap-1 rounded-md border border-border bg-[var(--color-surface)] px-2 py-2.5 transition-colors hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
>
<Icon
className="size-4 text-[var(--brand)]"
aria-hidden="true"
/>
<span className="relative inline-block text-base font-bold leading-none text-foreground sm:text-lg">
{value}
{unit && (
<span className="absolute left-full top-0 ml-0.5 text-[9px] font-medium text-muted-foreground/70">
{unit}
</span>
)}
</span>
<span className="text-[11px] leading-none text-muted-foreground">
{label}
</span>
</button>
))}
{stats.map(
({
value,
unit,
label,
hint,
Icon,
cardClass,
tileClass,
target,
}) => (
<button
key={label}
type="button"
onClick={() => onNavigate(target)}
title={hint}
aria-label={`${label}: ${value}${
unit ? ` ${unit}` : ""
}. ${hint}`}
className={`flex min-h-[82px] flex-col items-center justify-center gap-1 rounded-xl border px-2 py-2.5 transition-all hover:-translate-y-0.5 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${cardClass}`}
>
<span
className={`grid size-8 place-items-center rounded-lg ${tileClass}`}
>
<Icon
className="size-4"
aria-hidden="true"
/>
</span>
<span className="relative inline-block text-base font-bold leading-none text-foreground sm:text-lg">
{value}
{unit && (
<span className="absolute left-full top-0 ml-0.5 text-[9px] font-medium text-muted-foreground/70">
{unit}
</span>
)}
</span>
<span className="text-[11px] leading-none text-muted-foreground">
{label}
</span>
</button>
)
)}
</div>
)}