wooo/awoooi
1
1
Fork 0
Code Issues 2 Pull Requests 1 Actions 3 Packages Projects Releases Wiki Activity

feat(ui): apply professional Nothing.tech aesthetics to Live Ops Space
Some checks failed
CD Pipeline / workflow-shape (push) Successful in 0s
Details
CD Pipeline / cancel-stale-cd (push) Has been skipped
Details
CD Pipeline / tests (push) Successful in 1m1s
Details
CD Pipeline / build-and-deploy (push) Successful in 4m38s
Details
CD Pipeline / post-deploy-checks (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Your Name
2026-07-03 15:08:30 +08:00
parent f48acaff1c
commit 803a90f14a
1 changed files with 59 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
apps/web/src/app/[locale]/openclaw/live-ops-space/page.tsx
View File

@@ -110,11 +110,11 @@ function stateLabel(t: ReturnType<typeof useTranslations>, state: string): strin
} }
function stateClass(state: string): string { function stateClass(state: string): string {
if (state === "working") return "border-[#4a90d9] bg-[#eef5ff] text-[#1f5b9b]"; if (state === "working") return "border-[#4a90d9] bg-white/70 backdrop-blur-[20px] text-[#4a90d9] shadow-[0_0_15px_rgba(74,144,217,0.4)]";
if (state === "verified") return "border-[#8fc29a] bg-[#f0faf2] text-[#17602a]"; if (state === "verified") return "border-[#8fc29a] bg-white/70 backdrop-blur-[20px] text-[#17602a]";
if (state === "blocked") return "border-[#e2a29b] bg-[#fff0ef] text-[#9f2f25]"; if (state === "blocked") return "border-[#e2a29b] bg-white/70 backdrop-blur-[20px] text-[#9f2f25]";
if (state === "waiting") return "border-[#d9b36f] bg-[#fff7e8] text-[#8a5a08]"; if (state === "waiting") return "border-[#d9b36f] bg-white/70 backdrop-blur-[20px] text-[#8a5a08]";
return "border-[#d8d3c7] bg-white text-[#5f5b52]"; return "border-[#d8d3c7] bg-white/70 backdrop-blur-[20px] text-[#5f5b52]";
} }
function stateFromWorkItemStatus(status: string): string { function stateFromWorkItemStatus(status: string): string {
@@ -289,13 +289,13 @@ export default function OpenClawLiveOpsSpacePage({
<div <div
key={zone.zone_id} key={zone.zone_id}
data-testid="openclaw-zone" data-testid="openclaw-zone"
className="absolute flex h-14 w-28 -translate-x-1/2 -translate-y-1/2 rotate-[-2deg] items-center gap-2 border border-[#cbd4d8] bg-white/95 px-2 shadow-[0_10px_24px_rgba(54,72,88,0.12)] backdrop-blur" className="absolute flex h-14 w-32 -translate-x-1/2 -translate-y-1/2 rotate-[-2deg] items-center gap-2 rounded-xl border border-white/40 bg-white/70 px-2.5 shadow-[0_8px_32px_rgba(31,38,135,0.07)] backdrop-blur-[20px]"
style={{ left: `${zone.position.x}%`, top: `${zone.position.y}%` }} style={{ left: `${zone.position.x}%`, top: `${zone.position.y}%` }}
> >
<span className="flex h-8 w-8 shrink-0 items-center justify-center border border-[#d8d3c7] bg-[#f7f8f7] text-[#4a90d9]"> <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-white/50 bg-white/40 text-[#4a90d9] shadow-sm backdrop-blur-md">
<Icon className="h-4 w-4" aria-hidden="true" /> <Icon className="h-4 w-4" aria-hidden="true" />
</span> </span>
<span className="min-w-0 truncate text-[11px] font-semibold text-[#34302a]"> <span className="min-w-0 truncate font-mono text-[11px] font-semibold tracking-tight text-[#34302a]">
{zone.label} {zone.label}
</span> </span>
</div> </div>
@@ -307,7 +307,7 @@ export default function OpenClawLiveOpsSpacePage({
key={item.work_item_id} key={item.work_item_id}
data-testid="openclaw-work-token" data-testid="openclaw-work-token"
className={cn( className={cn(
"openclaw-work-token absolute h-8 w-20 -translate-x-1/2 -translate-y-1/2 border px-2 py-1 text-[10px] font-semibold shadow-[0_8px_20px_rgba(54,72,88,0.16)]", "openclaw-work-token absolute h-8 w-24 -translate-x-1/2 -translate-y-1/2 rounded-full border px-3 py-1 text-[10px] font-semibold shadow-[0_8px_20px_rgba(54,72,88,0.12)] flex items-center justify-center",
stateClass(stateFromWorkItemStatus(item.status)), stateClass(stateFromWorkItemStatus(item.status)),
)} )}
style={{ style={{
@@ -316,7 +316,7 @@ export default function OpenClawLiveOpsSpacePage({
animationDelay: `${index * 0.35}s`, animationDelay: `${index * 0.35}s`,
}} }}
> >
<span className="block truncate">{item.work_item_id}</span> <span className="block truncate font-mono tracking-wider">{item.work_item_id}</span>
</div> </div>
))} ))}
@@ -324,34 +324,39 @@ export default function OpenClawLiveOpsSpacePage({
<div <div
key={agent.agent_id} key={agent.agent_id}
data-testid="openclaw-agent-avatar" data-testid="openclaw-agent-avatar"
className="openclaw-agent absolute -translate-x-1/2 -translate-y-1/2" className="openclaw-agent absolute -translate-x-1/2 -translate-y-1/2 flex flex-col items-center"
style={{ style={{
left: `${agent.position.x}%`, left: `${agent.position.x}%`,
top: `${agent.position.y}%`, top: `${agent.position.y}%`,
animationDelay: `${index * 0.28}s`, animationDelay: `${index * 0.28}s`,
}} }}
> >
<div <div className="relative">
className={cn( {agent.state === "working" && (
"relative flex h-14 w-14 items-center justify-center border-2 bg-white shadow-[0_16px_30px_rgba(54,72,88,0.2)]", <div className="openclaw-working-ripple absolute inset-0 rounded-full border-2 border-[#4a90d9]" />
stateClass(agent.state),
)} )}
> <div
<span
className={cn( className={cn(
"absolute -right-1 -top-1 h-3 w-3 border border-white", "relative z-10 flex h-14 w-14 items-center justify-center rounded-full border-2 shadow-[0_16px_30px_rgba(54,72,88,0.15)] transition-all duration-300",
agent.state === "blocked" stateClass(agent.state),
? "bg-[#d95f4f]"
: agent.state === "verified"
? "bg-[#4f9b62]"
: agent.state === "working"
? "bg-[#4a90d9]"
: "bg-[#f0bd69]",
)} )}
/> >
<Bot className="h-6 w-6" aria-hidden="true" /> <span
className={cn(
"absolute -right-0 -top-0 h-3.5 w-3.5 rounded-full border-2 border-white",
agent.state === "blocked"
? "bg-[#d95f4f] animate-pulse"
: agent.state === "verified"
? "bg-[#4f9b62]"
: agent.state === "working"
? "bg-[#4a90d9] animate-pulse"
: "bg-[#f0bd69]",
)}
/>
<Bot className={cn("h-6 w-6", agent.state === "working" ? "animate-bounce-slow text-[#4a90d9]" : "")} aria-hidden="true" />
</div>
</div> </div>
<div className="mt-1 max-w-28 truncate border border-[#d8d3c7] bg-white px-1.5 py-0.5 text-center text-[10px] font-semibold text-[#34302a] shadow-sm"> <div className="mt-2 max-w-32 truncate rounded-md border border-white/50 bg-white/70 px-2 py-1 text-center font-mono text-[10px] font-semibold text-[#34302a] shadow-sm backdrop-blur-[10px]">
{agent.label} {agent.label}
</div> </div>
</div> </div>
@@ -553,6 +558,32 @@ export default function OpenClawLiveOpsSpacePage({
opacity: 0; opacity: 0;
} }
} }
@keyframes openclaw-ripple {
0% {
transform: scale(0.8);
opacity: 1;
}
100% {
transform: scale(2.4);
opacity: 0;
}
}
.openclaw-working-ripple {
animation: openclaw-ripple 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes openclaw-bounce-slow {
0%, 100% {
transform: translateY(-8%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
.animate-bounce-slow {
animation: openclaw-bounce-slow 2s infinite;
}
.openclaw-flow-packet { .openclaw-flow-packet {
animation: openclaw-flow-packet 5.8s ease-in-out infinite; animation: openclaw-flow-packet 5.8s ease-in-out infinite;
will-change: transform, opacity; will-change: transform, opacity;