1

src/components/custom-world-agent/CustomWorldAgentOperationBanner.tsx

@@ -35,37 +35,41 @@ export function CustomWorldAgentOperationBanner({
   const isFailed = visibleOperation.status === 'failed';
   const isRunning =
     visibleOperation.status === 'running' || visibleOperation.status === 'queued';
+  // 操作横幅直接复用平台状态横幅，亮暗主题都从同一套 token 取色。
+  const bannerToneClass = isFailed
+    ? 'platform-banner--danger'
+    : isRunning
+      ? 'platform-banner--info'
+      : 'platform-banner--success';
+  const progressFillStyle = isFailed
+    ? { background: 'linear-gradient(90deg, #fb7185 0%, #f43f5e 100%)' }
+    : isRunning
+      ? { background: 'var(--platform-button-primary-fill)' }
+      : { background: 'linear-gradient(90deg, #86efac 0%, #34d399 100%)' };
 
   return (
     <div
-      className={`platform-remap-surface rounded-[1.4rem] border px-4 py-4 ${
-        isFailed
-          ? 'border-rose-400/20 bg-[#111318]/95'
-          : isRunning
-            ? 'border-emerald-300/20 bg-[#111318]/95'
-            : 'border-emerald-300/20 bg-[#111318]/95'
-      }`}
+      className={`platform-remap-surface platform-banner rounded-[1.4rem] px-4 py-4 ${bannerToneClass}`}
     >
       <div className="flex items-center justify-between gap-3">
-        <div className="text-sm font-semibold text-white">
+        <div className="text-sm font-semibold">
           {visibleOperation.phaseLabel}
         </div>
-        <div className="text-xs text-zinc-300">
+        <div className="text-xs opacity-80">
           {Math.max(0, Math.min(100, Math.round(visibleOperation.progress)))}%
         </div>
       </div>
       {visibleOperation.error ? (
-        <div className="mt-2 text-sm text-zinc-200">
+        <div className="mt-2 text-sm opacity-90">
           {visibleOperation.error}
         </div>
       ) : null}
-      <div className="mt-3 h-2 overflow-hidden rounded-full bg-white/10">
+      <div className="platform-progress-track mt-3 h-2 overflow-hidden rounded-full">
         <div
-          className={`h-full rounded-full transition-[width] duration-300 ${
-            isFailed ? 'bg-rose-300' : 'bg-emerald-300'
-          }`}
+          className="h-full rounded-full transition-[width] duration-300"
           style={{
             width: `${Math.max(8, Math.min(100, visibleOperation.progress))}%`,
+            ...progressFillStyle,
           }}
         />
       </div>