Initial commit

src/components/layout/status-bar-tasks.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import { Clock } from "lucide-react"
+import { useTaskContext } from "@/contexts/task-context"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+function Spinner({ className }: { className?: string }) {
+  return (
+    <div
+      className={`animate-spin rounded-full border-[1.5px] border-current border-t-transparent ${className}`}
+    />
+  )
+}
+
+export function StatusBarTasks() {
+  const { tasks } = useTaskContext()
+
+  if (tasks.length === 0) return null
+
+  const runningTask = tasks.find(
+    (t) => t.status === "running" || t.status === "pending"
+  )
+
+  return (
+    <div className="flex items-center gap-2">
+      {runningTask && (
+        <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+          <span className="truncate max-w-40">
+            {runningTask.label || runningTask.description}
+          </span>
+          <Skeleton className="h-1 w-28 rounded bg-primary/80" />
+          <Spinner className="h-3 w-3 shrink-0" />
+        </div>
+      )}
+      <Popover>
+        <PopoverTrigger asChild>
+          <button className="flex items-center gap-1 hover:text-foreground transition-colors">
+            {!runningTask && <Clock className="h-3 w-3" />}
+            {tasks.length > 1 && <span>{tasks.length}</span>}
+          </button>
+        </PopoverTrigger>
+        <PopoverContent side="top" align="end" className="w-72 p-3">
+          <div className="text-xs font-medium mb-2">任务</div>
+          <div className="space-y-2 max-h-48 overflow-y-auto">
+            {tasks.map((task) => (
+              <div key={task.id} className="space-y-1">
+                <div className="flex items-center gap-2 text-xs">
+                  {task.status === "running" ? (
+                    <Spinner className="h-3 w-3 text-blue-500" />
+                  ) : (
+                    <Clock className="h-3 w-3 text-muted-foreground" />
+                  )}
+                  <span className="truncate flex-1">{task.label}</span>
+                </div>
+                {task.status === "running" && task.progress != null && (
+                  <div className="h-1 rounded-full bg-muted ml-5">
+                    <div
+                      className="h-full rounded-full bg-blue-500 transition-all"
+                      style={{ width: `${task.progress}%` }}
+                    />
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}