UI完善

src/App.tsx

@@ -6,10 +6,12 @@ import { Store } from "./pages/store";
 import { Today } from "./pages/today";
 import { PlayLink } from "./pages/play-link";
 import { Setting } from "./pages/setting";
+import { TaskQueue } from "./pages/task-queue";
 import { Debug } from "./pages/debug";
 import { SplashDebug } from "./pages/debug/splash-debug";
 import { DisplayDebug } from "./pages/debug/display-debug";
 import { VersionCardDebug } from "./pages/debug/version-card-debug";
+import { TaskDebug } from "./pages/debug/task-debug";
 
 const pageMap = {
   home: Home,
@@ -17,10 +19,12 @@ const pageMap = {
   today: Today,
   "play-link": PlayLink,
   setting: Setting,
+  "task-queue": TaskQueue,
   debug: Debug,
   "debug-splash": SplashDebug,
   "debug-display": DisplayDebug,
   "debug-version-card": VersionCardDebug,
+  "debug-task": TaskDebug,
 } as const;
 
 function App() {

src/components/StartupPopup.tsx

@@ -0,0 +1,47 @@
+import { useState, useEffect } from "react";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogAction,
+} from "@/components/ui/alert-dialog";
+import { AlertTriangle } from "lucide-react";
+
+const enabled = import.meta.env.VITE_START_POP === "true";
+const title = import.meta.env.VITE_START_POP_TITLE ?? "";
+const info = import.meta.env.VITE_START_POP_INFO ?? "";
+const buttonText = import.meta.env.VITE_START_POP_BOUTTON ?? "确定";
+
+export function StartupPopup() {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (enabled) {
+      setOpen(true);
+    }
+  }, []);
+
+  if (!enabled) return null;
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <div className="mb-2 inline-flex size-10 items-center justify-center rounded-md bg-amber-500/10 sm:group-data-[size=default]/alert-dialog-content:row-span-2">
+            <AlertTriangle className="size-5 text-amber-500" />
+          </div>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{info}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogAction onClick={() => setOpen(false)}>
+            {buttonText}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

src/components/UnderConstruction.tsx

@@ -0,0 +1,23 @@
+import { Hammer } from "lucide-react";
+
+interface UnderConstructionProps {
+  pageName: string;
+  description?: string;
+}
+
+export function UnderConstruction({ pageName, description }: UnderConstructionProps) {
+  return (
+    <div className="flex items-center justify-center h-full">
+      <div className="text-center max-w-sm">
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-foreground/[0.04] mb-5">
+          <Hammer className="w-8 h-8 text-muted-foreground/50" />
+        </div>
+        <h1 className="text-xl font-bold text-foreground mb-2">{pageName}</h1>
+        <p className="text-sm text-muted-foreground mb-1">此页面正在装修中，也许它很快就会与你见面</p>
+        {description && (
+          <p className="text-[13px] text-muted-foreground/60">{description}</p>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/background/BackgroundLayer.tsx

@@ -1,87 +1,73 @@
-import { useEffect } from "react";
+import { useEffect, useRef, useCallback } from "react";
 import { useBackgroundStore } from "@/stores/backgroundStore";
+import { useThemeStore } from "@/stores/themeStore";
 import { useRouteStore } from "@/stores/routeStore";
 import { useDevStore } from "@/stores/devStore";
 
 const DEFAULT_BG = "/background.png";
 
 export function BackgroundLayer() {
-  const { type, image, color, blur, opacity, animationSpeed, fetchConfig } = useBackgroundStore();
+  const { type, image, blur, opacity } = useBackgroundStore();
+  const parallax = useThemeStore((s) => s.parallax);
   const route = useRouteStore((s) => s.current);
   const forceDisableContentBlur = useDevStore((s) => s.forceDisableContentBlur);
   const showContentBlur = route !== "home";
 
+  const bgRef = useRef<HTMLDivElement>(null);
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (!parallax || !bgRef.current) return;
+      const x = (e.clientX / window.innerWidth - 0.5) * 20;
+      const y = (e.clientY / window.innerHeight - 0.5) * 20;
+      bgRef.current.style.transform = `translate(${x}px, ${y}px) scale(1.05)`;
+    },
+    [parallax],
+  );
+
   useEffect(() => {
-    fetchConfig();
-  }, [fetchConfig]);
+    if (!parallax) {
+      if (bgRef.current) bgRef.current.style.transform = "";
+      return;
+    }
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, [parallax, handleMouseMove]);
+
+  const bgUrl = image || DEFAULT_BG;
 
   const getBackgroundStyle = (): React.CSSProperties => {
     const base: React.CSSProperties = {
       position: "fixed",
-      inset: 0,
+      inset: parallax ? -20 : 0,
       zIndex: 0,
       pointerEvents: "none",
       opacity,
+      transition: parallax ? "transform 0.1s ease-out" : undefined,
     };
 
     if (blur > 0) {
       base.filter = `blur(${blur}px)`;
     }
 
-    switch (type) {
-      case "image":
-        return {
-          ...base,
-          backgroundImage: `url(${image || DEFAULT_BG})`,
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-        };
-      case "color":
-        return {
-          ...base,
-          backgroundColor: color || "#1a1a2e",
-          backgroundImage: `url(${DEFAULT_BG})`,
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-        };
-      case "gradient":
-        return {
-          ...base,
-          background: `linear-gradient(135deg, ${color || "#1a1a2e"}, #16213e, #0f3460)`,
-          animation: `gradient-shift ${10 / animationSpeed}s ease infinite`,
-        };
-      case "particles":
-        return {
-          ...base,
-          background: `radial-gradient(circle at 20% 50%, rgba(${color || "26,26,46"}, 0.8) 0%, transparent 50%),
-                       radial-gradient(circle at 80% 20%, rgba(22, 33, 62, 0.6) 0%, transparent 40%),
-                       radial-gradient(circle at 50% 80%, rgba(15, 52, 96, 0.4) 0%, transparent 60%)`,
-          animation: `particles-float ${20 / animationSpeed}s ease-in-out infinite`,
-        };
-      default:
-        return {
-          ...base,
-          backgroundImage: `url(${DEFAULT_BG})`,
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-        };
+    if (type === "color") {
+      return {
+        ...base,
+        backgroundColor: bgUrl,
+      };
     }
+
+    return {
+      ...base,
+      backgroundImage: `url(${bgUrl})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+    };
   };
 
   return (
     <>
-      <style>{`
-        @keyframes gradient-shift {
-          0%, 100% { background-position: 0% 50%; }
-          50% { background-position: 100% 50%; }
-        }
-        @keyframes particles-float {
-          0%, 100% { transform: translateY(0) rotate(0deg); }
-          33% { transform: translateY(-10px) rotate(1deg); }
-          66% { transform: translateY(10px) rotate(-1deg); }
-        }
-      `}</style>
-      <div style={getBackgroundStyle()} />
+      <div ref={bgRef} style={getBackgroundStyle()} />
       <div
         className="content-blur-overlay"
         style={{ opacity: showContentBlur && !forceDisableContentBlur ? 1 : 0 }}

src/components/splash/Splash.tsx

@@ -1,35 +1,33 @@
 import { useEffect, useState } from "react";
-
-const VERSION = "0.1.0";
+import { getVersion } from "@tauri-apps/api/app";
+import { BUILD_MODE } from "@/lib/mode";
 
 export default function Splash() {
-  const [phase, setPhase] = useState<"enter" | "visible" | "exit">("enter");
+  const [phase, setPhase] = useState<"enter" | "visible">("enter");
+  const [version, setVersion] = useState("");
 
   useEffect(() => {
-    const t1 = setTimeout(() => setPhase("visible"), 50);
-    const t2 = setTimeout(() => setPhase("exit"), 3500);
-    return () => { clearTimeout(t1); clearTimeout(t2); };
+    getVersion().then(setVersion);
+    const t = setTimeout(() => setPhase("visible"), 50);
+    return () => clearTimeout(t);
   }, []);
 
   return (
-    <div style={{
-      width: "100%",
-      height: "100%",
-      display: "flex",
-      flexDirection: "column",
-      overflow: "hidden",
-      background: "var(--splash-bg)",
-    }}>
+    <div
+      className="w-full h-full flex flex-col overflow-hidden"
+      style={{
+        background: "var(--splash-bg)",
+      }}
+    >
       {/* Centered logo */}
-      <div style={{
-        flex: 1,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        opacity: phase === "enter" ? 0 : phase === "exit" ? 0 : 1,
-        transform: phase === "enter" ? "translateY(10px)" : phase === "exit" ? "translateY(-10px)" : "translateY(0)",
-        transition: "all 0.7s ease-out",
-      }}>
+      <div
+        className="flex-1 flex items-center justify-center"
+        style={{
+          opacity: phase === "enter" ? 0 : 1,
+          transform: phase === "enter" ? "translateY(10px)" : "translateY(0)",
+          transition: "all 0.7s ease-out",
+        }}
+      >
         <img
           src="/koring-licon.svg"
           alt="Koring Launcher"
@@ -39,32 +37,31 @@ export default function Splash() {
       </div>
 
       {/* Bottom bar */}
-      <div style={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        padding: "0 24px 16px",
-        fontSize: 12,
-        color: "var(--splash-muted)",
-      }}>
+      <div className="flex items-center justify-between px-6 pb-4 text-xs text-muted-foreground">
         <span>Provided by Lingke Koring Studio</span>
-        <span>v{VERSION}</span>
+        <span className="flex items-center gap-1.5">
+          {version && <span>v{version}</span>}
+          {BUILD_MODE !== "run" && (
+            <span
+              className={[
+                "text-[10px] font-bold px-1.5 py-0.5 rounded-full leading-none select-none",
+                BUILD_MODE === "dev"
+                  ? "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400"
+                  : "bg-amber-500/15 text-amber-600 dark:text-amber-400",
+              ].join(" ")}
+            >
+              {BUILD_MODE === "dev" ? "DEV" : "BETA"}
+            </span>
+          )}
+        </span>
       </div>
 
       <style>{`
         :root {
           --splash-bg: #ffffff;
-          --splash-muted: #888888;
         }
         .dark {
           --splash-bg: #1a1a2e;
-          --splash-muted: #888888;
-        }
-        @media (prefers-color-scheme: dark) {
-          :root:not(.light) {
-            --splash-bg: #1a1a2e;
-            --splash-muted: #888888;
-          }
         }
         .splash-logo {
           filter: none;
@@ -72,11 +69,6 @@ export default function Splash() {
         .dark .splash-logo {
           filter: invert(1);
         }
-        @media (prefers-color-scheme: dark) {
-          :root:not(.light) .splash-logo {
-            filter: invert(1);
-          }
-        }
       `}</style>
     </div>
   );

src/components/system/TitleBar.tsx

@@ -245,6 +245,7 @@ export function TitleBar({
           showMinimize={showMinimize}
           showMaximize={showMaximize}
           showClose={showClose}
+          isSub={isSub}
         />
       </div>
     </div>

src/components/system/WindowControls.tsx

@@ -1,18 +1,21 @@
 import { useState, useEffect } from "react";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { BUILD_MODE } from "@/lib/mode";
+import { TaskButton } from "@/components/task/TaskButton";
 import clsx from "clsx";
 
 interface WindowControlsProps {
   showMinimize?: boolean;
   showMaximize?: boolean;
   showClose?: boolean;
+  isSub?: boolean;
 }
 
 export function WindowControls({
   showMinimize = true,
   showMaximize = true,
   showClose = true,
+  isSub = false,
 }: WindowControlsProps) {
   const [isMaximized, setIsMaximized] = useState(false);
   const appWindow = getCurrentWindow();
@@ -49,6 +52,14 @@ export function WindowControls({
           {badgeLabel}
         </span>
       )}
+
+      {/* Task button — hidden in sub mode */}
+      {!isSub && (
+        <div className="mr-0.5">
+          <TaskButton />
+        </div>
+      )}
+
       {showMinimize && (
         <div onClick={handleMinimize} className={btnClass}>
           <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5">

src/components/task/TaskButton.tsx

@@ -0,0 +1,54 @@
+import { useTaskStore } from "@/stores/taskStore";
+import { useRouteStore } from "@/stores/routeStore";
+import { ListTodo } from "lucide-react";
+
+export function TaskButton() {
+  const navigate = useRouteStore((s) => s.navigate);
+  const isRunning = useTaskStore((s) => s.isRunning);
+  const activeTasks = useTaskStore((s) => s.activeTasks);
+  const completedTasks = useTaskStore((s) => s.completedTasks);
+  const tasks = useTaskStore((s) => s.tasks);
+
+  const running = isRunning();
+  const active = activeTasks();
+  const completed = completedTasks();
+  const hasAny = tasks.length > 0;
+
+  if (!hasAny) return null;
+
+  const badgeCount = running ? active.length : completed.length;
+
+  return (
+    <button
+      onClick={() => navigate("task-queue")}
+      className="flex items-center justify-center w-[25px] h-[25px] rounded transition-colors cursor-default hover:bg-black/10 dark:hover:bg-white/15 text-black/70 dark:text-white/70 hover:text-black dark:hover:text-white relative"
+      data-no-drag
+    >
+      {running ? (
+        /* Circular progress indicator */
+        <svg className="w-4 h-4" viewBox="0 0 16 16">
+          <circle
+            cx="8"
+            cy="8"
+            r="6"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeDasharray="37.7"
+            strokeDashoffset="9.4"
+            strokeLinecap="round"
+            className="animate-spin origin-center"
+            style={{ animationDuration: "1.2s" }}
+          />
+        </svg>
+      ) : (
+        <ListTodo className="w-3.5 h-3.5" />
+      )}
+      {badgeCount > 0 && (
+        <span className="absolute -top-1 -right-1 min-w-[14px] h-[14px] flex items-center justify-center rounded-full bg-primary text-primary-foreground text-[9px] font-bold px-1 tabular-nums">
+          {badgeCount}
+        </span>
+      )}
+    </button>
+  );
+}

src/components/task/TaskCard.tsx

@@ -0,0 +1,162 @@
+import { useState } from "react";
+import type { Task } from "@/types/task";
+import { useTaskStore } from "@/stores/taskStore";
+import { Button } from "@/components/ui/button";
+import { Progress, ProgressValue } from "@/components/ui/progress";
+import {
+  ChevronDown,
+  X,
+  Check,
+  AlertCircle,
+  Ban,
+  RefreshCw,
+} from "lucide-react";
+
+const statusConfig: Record<
+  Task["status"],
+  { label: string; color: string; icon: typeof Check; barColor: string }
+> = {
+  pending: { label: "等待中", color: "text-muted-foreground bg-muted/50", icon: RefreshCw, barColor: "bg-muted-foreground/30" },
+  running: { label: "运行中", color: "text-foreground bg-foreground/10", icon: RefreshCw, barColor: "bg-primary" },
+  completed: { label: "已完成", color: "text-green-600 dark:text-green-400 bg-green-500/10", icon: Check, barColor: "bg-green-500" },
+  failed: { label: "失败", color: "text-red-600 dark:text-red-400 bg-red-500/10", icon: AlertCircle, barColor: "bg-red-500" },
+  cancelled: { label: "已取消", color: "text-muted-foreground bg-muted/50", icon: Ban, barColor: "bg-muted-foreground/30" },
+};
+
+function formatTime(ts: number): string {
+  const d = new Date(ts);
+  return d.toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+}
+
+function logLevelColor(level: Task["logs"][number]["level"]): string {
+  switch (level) {
+    case "error": return "text-red-500";
+    case "warn": return "text-amber-500";
+    default: return "text-muted-foreground";
+  }
+}
+
+interface TaskCardProps {
+  task: Task;
+}
+
+export function TaskCard({ task }: TaskCardProps) {
+  const [expanded, setExpanded] = useState(false);
+  const cancelTask = useTaskStore((s) => s.cancelTask);
+  const removeTask = useTaskStore((s) => s.removeTask);
+  const retryTask = useTaskStore((s) => s.retryTask);
+
+  const sc = statusConfig[task.status];
+  const isRunning = task.status === "running";
+  const isPending = task.status === "pending";
+  const isFinished = task.status === "completed" || task.status === "failed" || task.status === "cancelled";
+  const canCancel = isRunning || isPending;
+  const canRetry = task.status === "failed";
+  const hasLogs = task.logs.length > 0;
+  const progressPct =
+    task.progress && task.progress.total > 0
+      ? Math.round((task.progress.current / task.progress.total) * 100)
+      : undefined;
+
+  return (
+    <div className="rounded-xl bg-muted/30 overflow-hidden">
+      <div className="px-4 py-3">
+        <div className="flex items-start gap-3">
+          {/* Content */}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 mb-1">
+              <p className="text-sm font-medium text-foreground truncate">{task.title}</p>
+              <span className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium shrink-0 ${sc.color}`}>
+                {sc.label}
+              </span>
+            </div>
+
+            {task.description && (
+              <p className="text-[12px] text-muted-foreground truncate mb-2">{task.description}</p>
+            )}
+
+            {/* Progress */}
+            {(isRunning || isPending) && (
+              <div className="mt-1">
+                <Progress
+                  value={progressPct ?? (isPending ? 0 : 0)}
+                  className="gap-0"
+                >
+                  <ProgressValue className="text-[11px]" />
+                </Progress>
+                {task.progress?.stage && (
+                  <p className="text-[11px] text-muted-foreground mt-1">{task.progress.stage}</p>
+                )}
+              </div>
+            )}
+
+            {isFinished && task.finishedAt && (
+              <p className="text-[11px] text-muted-foreground/50 mt-1">
+                {new Date(task.finishedAt).toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" })}
+              </p>
+            )}
+          </div>
+
+          {/* Actions */}
+          <div className="flex items-center gap-1 shrink-0">
+            {canCancel && (
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={() => cancelTask(task.id)}
+                className="h-6 w-6 text-muted-foreground hover:text-destructive"
+              >
+                <X className="w-3.5 h-3.5" />
+              </Button>
+            )}
+            {canRetry && (
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={() => retryTask(task.id)}
+                className="h-6 w-6 text-muted-foreground hover:text-foreground"
+              >
+                <RefreshCw className="w-3.5 h-3.5" />
+              </Button>
+            )}
+            {isFinished && (
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={() => removeTask(task.id)}
+                className="h-6 w-6 text-muted-foreground hover:text-foreground"
+              >
+                <X className="w-3.5 h-3.5" />
+              </Button>
+            )}
+            {hasLogs && (
+              <button
+                onClick={() => setExpanded(!expanded)}
+                className="p-1 rounded hover:bg-muted/50 transition-colors"
+              >
+                <ChevronDown
+                  className={`w-3.5 h-3.5 text-muted-foreground transition-transform duration-200 ${expanded ? "rotate-180" : ""}`}
+                />
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Expandable logs */}
+      {expanded && hasLogs && (
+        <div className="px-4 py-2 max-h-[200px] overflow-y-auto bg-black/[0.03] dark:bg-white/[0.03]">
+          {task.logs.map((log, i) => (
+            <div key={i} className="flex items-start gap-2 py-0.5 text-[11px] leading-tight font-mono">
+              <span className="text-muted-foreground/50 shrink-0 tabular-nums">{formatTime(log.time)}</span>
+              <span className={`shrink-0 ${logLevelColor(log.level)}`}>
+                {log.level === "error" ? "ERR" : log.level === "warn" ? "WRN" : "INF"}
+              </span>
+              <span className="text-foreground/80 break-all">{log.message}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/task/index.ts

@@ -0,0 +1,2 @@
+export { TaskButton } from "./TaskButton";
+export { TaskCard } from "./TaskCard";

src/components/ui/alert-dialog.tsx

@@ -0,0 +1,185 @@
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="alert-dialog-action"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}

src/components/ui/progress.tsx

@@ -0,0 +1,81 @@
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  children,
+  value,
+  ...props
+}: ProgressPrimitive.Root.Props) {
+  return (
+    <ProgressPrimitive.Root
+      value={value}
+      data-slot="progress"
+      className={cn("flex flex-wrap gap-3", className)}
+      {...props}
+    >
+      {children}
+      <ProgressTrack>
+        <ProgressIndicator />
+      </ProgressTrack>
+    </ProgressPrimitive.Root>
+  )
+}
+
+function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
+  return (
+    <ProgressPrimitive.Track
+      className={cn(
+        "relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",
+        className
+      )}
+      data-slot="progress-track"
+      {...props}
+    />
+  )
+}
+
+function ProgressIndicator({
+  className,
+  ...props
+}: ProgressPrimitive.Indicator.Props) {
+  return (
+    <ProgressPrimitive.Indicator
+      data-slot="progress-indicator"
+      className={cn("h-full bg-primary transition-all", className)}
+      {...props}
+    />
+  )
+}
+
+function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
+  return (
+    <ProgressPrimitive.Label
+      className={cn("text-sm font-medium", className)}
+      data-slot="progress-label"
+      {...props}
+    />
+  )
+}
+
+function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
+  return (
+    <ProgressPrimitive.Value
+      className={cn(
+        "ml-auto text-sm text-muted-foreground tabular-nums",
+        className
+      )}
+      data-slot="progress-value"
+      {...props}
+    />
+  )
+}
+
+export {
+  Progress,
+  ProgressTrack,
+  ProgressIndicator,
+  ProgressLabel,
+  ProgressValue,
+}

src/components/ui/sheet.tsx

@@ -0,0 +1,135 @@
+import * as React from "react"
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+  return (
+    <SheetPrimitive.Backdrop
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-[110] bg-black/20 transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: SheetPrimitive.Popup.Props & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Popup
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-[110] flex flex-col bg-popover text-sm text-popover-foreground shadow-2xl transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close
+            data-slot="sheet-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-3 right-3"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Popup>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-0.5 p-5", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-5", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn(
+        "font-heading text-base font-medium text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: SheetPrimitive.Description.Props) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

src/layouts/RootLayout.tsx

@@ -1,6 +1,7 @@
 import { type ReactNode } from "react";
 import { BackgroundLayer } from "@/components/background/BackgroundLayer";
 import { SystemLayer } from "@/components/system/SystemLayer";
+import { StartupPopup } from "@/components/StartupPopup";
 import { useA11yStore } from "@/stores/a11yStore";
 import clsx from "clsx";
 
@@ -48,6 +49,9 @@ export function RootLayout({
         showMaximize={showMaximize}
         showClose={showClose}
       />
+
+      {/* Startup popup — only when VITE_START_POP=true */}
+      <StartupPopup />
     </div>
   );
 }

src/pages/debug/components.tsx

@@ -0,0 +1,40 @@
+import { type ReactNode } from "react";
+
+export function GlassCard({ children }: { children: ReactNode }) {
+  return <div className="glass-card px-5 py-4">{children}</div>;
+}
+
+export function SettingRow({
+  label,
+  desc,
+  children,
+}: {
+  label: string;
+  desc: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-4">
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-medium text-foreground">{label}</p>
+        <p className="text-[13px] text-muted-foreground mt-0.5">{desc}</p>
+      </div>
+      <div className="shrink-0">{children}</div>
+    </div>
+  );
+}
+
+export function PageHeader({
+  title,
+  desc,
+}: {
+  title: string;
+  desc: string;
+}) {
+  return (
+    <div className="mb-8">
+      <h1 className="text-xl font-bold text-foreground">{title}</h1>
+      <p className="text-sm text-muted-foreground mt-0.5">{desc}</p>
+    </div>
+  );
+}

src/pages/debug/display-debug.tsx

@@ -0,0 +1,39 @@
+import { useDevStore } from "@/stores/devStore";
+import { Button } from "@/components/ui/button";
+import { GlassCard, SettingRow, PageHeader } from "./components";
+
+export function DisplayDebug() {
+  const { forceDisableContentBlur, setForceDisableContentBlur } = useDevStore();
+
+  return (
+    <div className="max-w-2xl mx-auto p-8">
+      <PageHeader title="显示效果调试" desc="调试背景遮罩、磨砂效果与视觉表现" />
+
+      <div className="space-y-6">
+        <div>
+          <h3 className="text-sm font-semibold text-foreground/40 uppercase tracking-wider mb-3">
+            遮罩控制
+          </h3>
+          <div className="space-y-3">
+            <GlassCard>
+              <SettingRow
+                label="强制关闭背景「强内容模式」"
+                desc="覆盖系统设置，在所有页面禁用背景模糊遮罩，用于对比测试"
+              >
+                <Button
+                  variant={forceDisableContentBlur ? "default" : "outline"}
+                  size="sm"
+                  onClick={() =>
+                    setForceDisableContentBlur(!forceDisableContentBlur)
+                  }
+                >
+                  {forceDisableContentBlur ? "已开启" : "已关闭"}
+                </Button>
+              </SettingRow>
+            </GlassCard>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/debug/index.tsx

@@ -0,0 +1,80 @@
+import { useRouteStore } from "@/stores/routeStore";
+import { Monitor, Paintbrush, CreditCard, ListTodo, ChevronRight, FlaskConical } from "lucide-react";
+
+const debugPages = [
+  {
+    key: "debug-splash" as const,
+    icon: Monitor,
+    title: "启动动画调试",
+    desc: "测试 Splash Screen 的显示、关闭与启动流程模拟",
+    color: "text-blue-500",
+    bg: "bg-blue-500/10",
+  },
+  {
+    key: "debug-display" as const,
+    icon: Paintbrush,
+    title: "显示效果调试",
+    desc: "调试背景遮罩、磨砂效果与视觉表现",
+    color: "text-purple-500",
+    bg: "bg-purple-500/10",
+  },
+  {
+    key: "debug-version-card" as const,
+    icon: CreditCard,
+    title: "版本卡片调试",
+    desc: "测试 VersionCard 在不同模式与更新状态下的表现",
+    color: "text-amber-500",
+    bg: "bg-amber-500/10",
+  },
+  {
+    key: "debug-task" as const,
+    icon: ListTodo,
+    title: "任务队列调试",
+    desc: "测试任务调度、进度条、日志与 Sheet 面板",
+    color: "text-cyan-500",
+    bg: "bg-cyan-500/10",
+  },
+];
+
+export function Debug() {
+  const navigate = useRouteStore((s) => s.navigate);
+
+  return (
+    <div className="max-w-2xl mx-auto p-8">
+      <div className="flex items-center gap-3 mb-8">
+        <div className="p-2.5 rounded-xl bg-foreground/[0.06]">
+          <FlaskConical className="w-5 h-5 text-foreground/60" />
+        </div>
+        <div>
+          <h1 className="text-xl font-bold text-foreground">开发者工具</h1>
+          <p className="text-sm text-muted-foreground">调试启动器的各项功能与视觉效果</p>
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        {debugPages.map((p) => (
+          <button
+            key={p.key}
+            onClick={() => navigate(p.key)}
+            className="glass-card w-full px-5 py-4 text-left hover:scale-[1.01] active:scale-[0.99] transition-transform cursor-pointer group"
+          >
+            <div className="flex items-center gap-4">
+              <div className={`p-2.5 rounded-xl ${p.bg}`}>
+                <p.icon className={`w-5 h-5 ${p.color}`} />
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-foreground">{p.title}</p>
+                <p className="text-[13px] text-muted-foreground mt-0.5">{p.desc}</p>
+              </div>
+              <ChevronRight className="w-4 h-4 text-foreground/20 group-hover:text-foreground/40 transition-colors shrink-0" />
+            </div>
+          </button>
+        ))}
+      </div>
+
+      <p className="text-[12px] text-muted-foreground/50 mt-6 text-center">
+        这些工具仅用于开发调试，不会影响启动器的正常运行
+      </p>
+    </div>
+  );
+}

src/pages/debug/splash-debug.tsx

@@ -0,0 +1,124 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
+import { Play, Square, RotateCw } from "lucide-react";
+import { GlassCard, SettingRow, PageHeader } from "./components";
+
+const openSplash = async () => {
+  try {
+    const existing = await WebviewWindow.getByLabel("splashscreen");
+    if (existing) {
+      await existing.show();
+      await existing.setFocus();
+      return;
+    }
+    const splash = new WebviewWindow("splashscreen", {
+      url: "/splash.html",
+      width: 480,
+      height: 320,
+      decorations: false,
+      transparent: true,
+      center: true,
+      visible: true,
+      resizable: false,
+      minWidth: 480,
+      maxWidth: 480,
+      minHeight: 320,
+      maxHeight: 320,
+    } as any);
+    splash.once("tauri://error", (e) => console.error("Splash window error:", e));
+  } catch (err) {
+    console.error("Failed to open splash:", err);
+  }
+};
+
+const closeSplash = async () => {
+  try {
+    const splash = await WebviewWindow.getByLabel("splashscreen");
+    if (splash) await splash.close();
+  } catch (err) {
+    console.error("Failed to close splash:", err);
+  }
+};
+
+export function SplashDebug() {
+  const [splashVisible, setSplashVisible] = useState(false);
+
+  const handleOpen = async () => {
+    await openSplash();
+    setSplashVisible(true);
+  };
+
+  const handleClose = async () => {
+    await closeSplash();
+    setSplashVisible(false);
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto p-8">
+      <PageHeader title="启动动画调试" desc="测试 Splash Screen 的显示与关闭" />
+
+      <div className="space-y-6">
+        <div>
+          <h3 className="text-sm font-semibold text-foreground/40 uppercase tracking-wider mb-3">
+            启动画面控制
+          </h3>
+          <div className="space-y-3">
+            <GlassCard>
+              <SettingRow
+                label="打开启动画面"
+                desc="立即创建并显示 Splash Screen 窗口（480×320）"
+              >
+                <Button
+                  size="sm"
+                  onClick={handleOpen}
+                  disabled={splashVisible}
+                >
+                  <Play className="w-3.5 h-3.5 mr-1.5" />
+                  打开
+                </Button>
+              </SettingRow>
+            </GlassCard>
+            <GlassCard>
+              <SettingRow
+                label="关闭启动画面"
+                desc="立即关闭当前显示的 Splash Screen 窗口"
+              >
+                <Button
+                  variant="destructive"
+                  size="sm"
+                  onClick={handleClose}
+                  disabled={!splashVisible}
+                >
+                  <Square className="w-3.5 h-3.5 mr-1.5" />
+                  关闭
+                </Button>
+              </SettingRow>
+            </GlassCard>
+            <GlassCard>
+              <SettingRow
+                label="模拟启动流程"
+                desc="打开 Splash → 等待 4 秒 → 自动关闭，模拟真实启动"
+              >
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={async () => {
+                    await handleOpen();
+                    setTimeout(async () => {
+                      await handleClose();
+                    }, 4000);
+                  }}
+                  disabled={splashVisible}
+                >
+                  <RotateCw className="w-3.5 h-3.5 mr-1.5" />
+                  模拟
+                </Button>
+              </SettingRow>
+            </GlassCard>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/debug/task-debug.tsx

@@ -0,0 +1,252 @@
+import { useTaskStore } from "@/stores/taskStore";
+import { useRouteStore } from "@/stores/routeStore";
+import type { TaskType } from "@/types/task";
+import { GlassCard, PageHeader } from "./components";
+import {
+  Download,
+  ArrowDownToLine,
+  RefreshCw,
+  Play,
+  User,
+  Zap,
+  Trash2,
+  ListTodo,
+  AlertCircle,
+  Check,
+  Ban,
+} from "lucide-react";
+
+const taskTypes: { type: TaskType; label: string; icon: typeof Download; color: string; bg: string }[] = [
+  { type: "install", label: "安装", icon: Download, color: "text-blue-500", bg: "bg-blue-500/10" },
+  { type: "download", label: "下载", icon: ArrowDownToLine, color: "text-cyan-500", bg: "bg-cyan-500/10" },
+  { type: "update", label: "更新", icon: RefreshCw, color: "text-purple-500", bg: "bg-purple-500/10" },
+  { type: "launch", label: "启动", icon: Play, color: "text-green-500", bg: "bg-green-500/10" },
+  { type: "auth", label: "认证", icon: User, color: "text-amber-500", bg: "bg-amber-500/10" },
+  { type: "sync", label: "同步", icon: RefreshCw, color: "text-indigo-500", bg: "bg-indigo-500/10" },
+  { type: "custom", label: "自定义", icon: Zap, color: "text-gray-500", bg: "bg-gray-500/10" },
+];
+
+function simulateTask(type: TaskType, title: string, duration: number, shouldFail = false) {
+  useTaskStore.getState().addTask(type, title, `模拟 ${duration / 1000}s 任务`, async (ctx) => {
+    const steps = 20;
+    const interval = duration / steps;
+    for (let i = 0; i <= steps; i++) {
+      if (ctx.abortSignal.aborted) throw new Error("已取消");
+      ctx.updateProgress({ current: i, total: steps, stage: `步骤 ${i}/${steps}` });
+      ctx.addLog("info", `进度 ${Math.round((i / steps) * 100)}%`);
+      if (i === Math.floor(steps / 2)) {
+        ctx.addLog("warn", "中间检查点");
+      }
+      if (shouldFail && i === steps - 2) {
+        ctx.addLog("error", "模拟失败：网络连接超时");
+        throw new Error("网络连接超时");
+      }
+      await new Promise((r) => setTimeout(r, interval));
+    }
+    ctx.addLog("info", "任务完成");
+  });
+}
+
+const statusIcons = {
+  pending: RefreshCw,
+  running: RefreshCw,
+  completed: Check,
+  failed: AlertCircle,
+  cancelled: Ban,
+};
+
+export function TaskDebug() {
+  const tasks = useTaskStore((s) => s.tasks);
+  const clearHistory = useTaskStore((s) => s.clearHistory);
+  const removeTask = useTaskStore((s) => s.removeTask);
+  const navigate = useRouteStore((s) => s.navigate);
+
+  const running = tasks.filter((t) => t.status === "running").length;
+  const pending = tasks.filter((t) => t.status === "pending").length;
+  const completed = tasks.filter((t) => t.status === "completed").length;
+  const failed = tasks.filter((t) => t.status === "failed").length;
+
+  return (
+    <div className="max-w-2xl mx-auto p-8">
+      <PageHeader title="任务队列调试" desc="测试任务调度、进度条、日志与任务队列页面" />
+
+      {/* Stats */}
+      <div className="grid grid-cols-4 gap-3 mb-8">
+        {[
+          { label: "运行中", value: running, color: "text-blue-500" },
+          { label: "等待中", value: pending, color: "text-muted-foreground" },
+          { label: "已完成", value: completed, color: "text-green-500" },
+          { label: "失败", value: failed, color: "text-red-500" },
+        ].map((s) => (
+          <GlassCard key={s.label}>
+            <p className="text-[11px] text-muted-foreground uppercase tracking-wider">{s.label}</p>
+            <p className={`text-2xl font-bold tabular-nums mt-1 ${s.color}`}>{s.value}</p>
+          </GlassCard>
+        ))}
+      </div>
+
+      {/* Quick actions */}
+      <div className="mb-8">
+        <h3 className="text-sm font-semibold text-foreground/40 uppercase tracking-wider mb-3">
+          快速操作
+        </h3>
+        <div className="space-y-3">
+          <GlassCard>
+            <div className="flex items-center justify-between gap-4">
+              <div>
+                <p className="text-sm font-medium text-foreground">打开任务队列</p>
+                <p className="text-[13px] text-muted-foreground mt-0.5">跳转到任务队列页面查看当前任务列表</p>
+              </div>
+              <button
+                onClick={() => navigate("task-queue")}
+                className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-foreground/[0.06] hover:bg-foreground/[0.1] text-sm font-medium transition-colors"
+              >
+                <ListTodo className="w-4 h-4" />
+                打开
+              </button>
+            </div>
+          </GlassCard>
+          <GlassCard>
+            <div className="flex items-center justify-between gap-4">
+              <div>
+                <p className="text-sm font-medium text-foreground">清空所有历史</p>
+                <p className="text-[13px] text-muted-foreground mt-0.5">删除 localStorage 中的任务记录</p>
+              </div>
+              <button
+                onClick={clearHistory}
+                className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-destructive/10 hover:bg-destructive/20 text-destructive text-sm font-medium transition-colors"
+              >
+                <Trash2 className="w-4 h-4" />
+                清空
+              </button>
+            </div>
+          </GlassCard>
+        </div>
+      </div>
+
+      {/* Add tasks by type */}
+      <div className="mb-8">
+        <h3 className="text-sm font-semibold text-foreground/40 uppercase tracking-wider mb-3">
+          添加模拟任务
+        </h3>
+        <div className="space-y-3">
+          {taskTypes.map((tt) => (
+            <GlassCard key={tt.type}>
+              <div className="flex items-center justify-between gap-4">
+                <div className="flex items-center gap-3">
+                  <div className={`p-2 rounded-lg ${tt.bg}`}>
+                    <tt.icon className={`w-4 h-4 ${tt.color}`} />
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium text-foreground">{tt.label}任务</p>
+                    <p className="text-[13px] text-muted-foreground mt-0.5">
+                      模拟 3s 成功任务
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() => simulateTask(tt.type, `模拟${tt.label}任务`, 3000)}
+                    className="inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg bg-foreground/[0.06] hover:bg-foreground/[0.1] text-[12px] font-medium transition-colors"
+                  >
+                    成功
+                  </button>
+                  <button
+                    onClick={() => simulateTask(tt.type, `模拟${tt.label}任务(失败)`, 3000, true)}
+                    className="inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg bg-destructive/10 hover:bg-destructive/20 text-destructive text-[12px] font-medium transition-colors"
+                  >
+                    失败
+                  </button>
+                </div>
+              </div>
+            </GlassCard>
+          ))}
+        </div>
+      </div>
+
+      {/* Batch test */}
+      <div className="mb-8">
+        <h3 className="text-sm font-semibold text-foreground/40 uppercase tracking-wider mb-3">
+          批量测试
+        </h3>
+        <div className="space-y-3">
+          <GlassCard>
+            <div className="flex items-center justify-between gap-4">
+              <div>
+                <p className="text-sm font-medium text-foreground">并行任务测试</p>
+                <p className="text-[13px] text-muted-foreground mt-0.5">同时添加 3 个不同类型任务，验证并行执行</p>
+              </div>
+              <button
+                onClick={() => {
+                  simulateTask("install", "并行安装", 4000);
+                  simulateTask("download", "并行下载", 3000);
+                  simulateTask("sync", "并行同步", 5000);
+                }}
+                className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-foreground/[0.06] hover:bg-foreground/[0.1] text-sm font-medium transition-colors"
+              >
+                <Zap className="w-4 h-4" />
+                运行
+              </button>
+            </div>
+          </GlassCard>
+          <GlassCard>
+            <div className="flex items-center justify-between gap-4">
+              <div>
+                <p className="text-sm font-medium text-foreground">取消任务测试</p>
+                <p className="text-[13px] text-muted-foreground mt-0.5">添加 5s 长任务，可在任务队列中取消</p>
+              </div>
+              <button
+                onClick={() => simulateTask("download", "可取消任务", 5000)}
+                className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-foreground/[0.06] hover:bg-foreground/[0.1] text-sm font-medium transition-colors"
+              >
+                <Ban className="w-4 h-4" />
+                运行
+              </button>
+            </div>
+          </GlassCard>
+        </div>
+      </div>
+
+      {/* Task list */}
+      {tasks.length > 0 && (
+        <div>
+          <h3 className="text-sm font-semibold text-foreground/40 uppercase tracking-wider mb-3">
+            当前任务 ({tasks.length})
+          </h3>
+          <div className="space-y-2">
+            {tasks.map((t) => {
+              const StatusIcon = statusIcons[t.status];
+              return (
+                <GlassCard key={t.id}>
+                  <div className="flex items-center gap-3">
+                    <StatusIcon
+                      className={`w-4 h-4 shrink-0 ${
+                        t.status === "running"
+                          ? "animate-spin text-blue-500"
+                          : t.status === "completed"
+                          ? "text-green-500"
+                          : t.status === "failed"
+                          ? "text-red-500"
+                          : "text-muted-foreground"
+                      }`}
+                    />
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium text-foreground truncate">{t.title}</p>
+                      <p className="text-[11px] text-muted-foreground">{t.type} · {t.status} · {t.logs.length} 条日志</p>
+                    </div>
+                    <button
+                      onClick={() => removeTask(t.id)}
+                      className="p-1 rounded hover:bg-muted/50 transition-colors"
+                    >
+                      <Trash2 className="w-3.5 h-3.5 text-muted-foreground" />
+                    </button>
+                  </div>
+                </GlassCard>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/debug/version-card-debug.tsx

@@ -0,0 +1,174 @@
+import { useDevStore } from "@/stores/devStore";
+import { Button } from "@/components/ui/button";
+import { Slider } from "@/components/ui/slider";
+import { VersionCard } from "@/components/VersionCard";
+import { checkForUpdates } from "@/api/update";
+import { GlassCard, PageHeader } from "./components";
+
+const modeOptions = [
+  { key: "dev", label: "开发版", color: "bg-amber-500" },
+  { key: "beta", label: "测试版", color: "bg-emerald-500" },
+  { key: "run", label: "正式版", color: "bg-blue-500" },
+] as const;
+
+const updateStateOptions = [
+  { key: "latest", label: "最新版" },
+  { key: "hasUpdate", label: "有更新" },
+  { key: "installed", label: "已下载" },
+] as const;
+
+export function VersionCardDebug() {
+  const {
+    previewMode,
+    setPreviewMode,
+    previewUpdateState,
+    setPreviewUpdateState,
+    overlayOpacity,
+    setOverlayOpacity,
+    blurAmount,
+    setBlurAmount,
+  } = useDevStore();
+
+  const resetPreview = () => {
+    setPreviewMode(null);
+    setPreviewUpdateState(null);
+    setOverlayOpacity(30);
+    setBlurAmount(12);
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto p-8">
+      <PageHeader title="版本卡片调试" desc="测试 VersionCard 在不同模式与状态下的表现" />
+
+      <VersionCard
+        className="mb-8"
+        overrideMode={previewMode}
+        overrideState={previewUpdateState}
+        overlayOpacity={overlayOpacity}
+        blurAmount={blurAmount}
+      />
+
+      <div className="space-y-6">
+        <div>
+          <h3 className="text-sm font-semibold text-foreground/40 uppercase tracking-wider mb-3">
+            模式颜色
+          </h3>
+          <GlassCard>
+            <div className="flex items-center gap-2">
+              {modeOptions.map((m) => (
+                <Button
+                  key={m.key}
+                  size="sm"
+                  variant={previewMode === m.key ? "default" : "outline"}
+                  onClick={() =>
+                    setPreviewMode(previewMode === m.key ? null : m.key)
+                  }
+                  className="gap-1.5"
+                >
+                  <span className={`inline-block w-2 h-2 rounded-full ${m.color}`} />
+                  {m.label}
+                </Button>
+              ))}
+            </div>
+          </GlassCard>
+        </div>
+
+        <div>
+          <h3 className="text-sm font-semibold text-foreground/40 uppercase tracking-wider mb-3">
+            更新状态模拟
+          </h3>
+          <GlassCard>
+            <div className="flex items-center gap-2">
+              {updateStateOptions.map((s) => (
+                <Button
+                  key={s.key}
+                  size="sm"
+                  variant={previewUpdateState === s.key ? "default" : "outline"}
+                  onClick={() =>
+                    setPreviewUpdateState(
+                      previewUpdateState === s.key ? null : s.key,
+                    )
+                  }
+                >
+                  {s.label}
+                </Button>
+              ))}
+            </div>
+          </GlassCard>
+        </div>
+
+        <div>
+          <h3 className="text-sm font-semibold text-foreground/40 uppercase tracking-wider mb-3">
+            磨砂层参数
+          </h3>
+          <GlassCard>
+            <div className="space-y-4">
+              <div>
+                <div className="flex items-center justify-between mb-1.5">
+                  <span className="text-[13px] text-muted-foreground">
+                    遮罩透明度
+                  </span>
+                  <span className="text-[13px] text-muted-foreground tabular-nums">
+                    {overlayOpacity}%
+                  </span>
+                </div>
+                <Slider
+                  value={[overlayOpacity]}
+                  onValueChange={(v) =>
+                    setOverlayOpacity(Array.isArray(v) ? v[0] : v)
+                  }
+                  min={0}
+                  max={100}
+                  step={1}
+                />
+              </div>
+              <div>
+                <div className="flex items-center justify-between mb-1.5">
+                  <span className="text-[13px] text-muted-foreground">
+                    模糊强度
+                  </span>
+                  <span className="text-[13px] text-muted-foreground tabular-nums">
+                    {blurAmount}px
+                  </span>
+                </div>
+                <Slider
+                  value={[blurAmount]}
+                  onValueChange={(v) =>
+                    setBlurAmount(Array.isArray(v) ? v[0] : v)
+                  }
+                  min={0}
+                  max={40}
+                  step={1}
+                />
+              </div>
+            </div>
+          </GlassCard>
+        </div>
+
+        <div>
+          <h3 className="text-sm font-semibold text-foreground/40 uppercase tracking-wider mb-3">
+            快捷操作
+          </h3>
+          <GlassCard>
+            <div className="flex items-center justify-between gap-4">
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-foreground">重置与检查</p>
+                <p className="text-[13px] text-muted-foreground mt-0.5">
+                  重置所有预览参数或强制检查更新
+                </p>
+              </div>
+              <div className="flex items-center gap-2 shrink-0">
+                <Button size="sm" variant="outline" onClick={resetPreview}>
+                  重置
+                </Button>
+                <Button size="sm" onClick={() => checkForUpdates()}>
+                  检查更新
+                </Button>
+              </div>
+            </div>
+          </GlassCard>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/setting/personalization/theme-bg.tsx

@@ -1,10 +1,11 @@
 import { useThemeStore, type DarkMode } from "@/stores/themeStore";
 import { useBackgroundStore } from "@/stores/backgroundStore";
-import { useA11yStore } from "@/stores/a11yStore";
 import { Switch } from "@/components/ui/switch";
 import { Slider } from "@/components/ui/slider";
 import { Button } from "@/components/ui/button";
 import clsx from "clsx";
+import { open } from "@tauri-apps/plugin-dialog";
+import { convertFileSrc } from "@tauri-apps/api/core";
 
 function GlassCard({ children }: { children: React.ReactNode }) {
   return <div className="glass-card px-5 py-4">{children}</div>;
@@ -107,11 +108,18 @@ function ThemePreviewCard({ mode, selected, onClick }: { mode: DarkMode; selecte
 
 export function ThemeBgSetting() {
   const { darkMode, setDarkMode, parallax, setParallax } = useThemeStore();
-  const { opacity, setOpacity, blur, setBlur, reset } = useBackgroundStore();
-  const { contentBlurOpacity, setContentBlurOpacity } = useA11yStore();
+  const { image, opacity, setOpacity, blur, setBlur, setImage, reset } = useBackgroundStore();
 
   const handlePickImage = async () => {
-    // TODO: 打开文件选择器
+    const selected = await open({
+      multiple: false,
+      filters: [
+        { name: "图片", extensions: ["png", "jpg", "jpeg", "webp", "gif", "bmp"] },
+      ],
+    });
+    if (selected) {
+      setImage(convertFileSrc(selected));
+    }
   };
 
   const handleReset = async () => {
@@ -146,6 +154,15 @@ export function ThemeBgSetting() {
                   选择图片
                 </Button>
               </SettingRow>
+              {image && image !== "/background.png" && (
+                <div className="mt-3 rounded-lg overflow-hidden border border-border/50">
+                  <img
+                    src={image}
+                    alt="背景预览"
+                    className="w-full h-[120px] object-cover"
+                  />
+                </div>
+              )}
             </GlassCard>
 
             <GlassCard>
@@ -183,23 +200,6 @@ export function ThemeBgSetting() {
               </SettingRow>
             </GlassCard>
 
-            <GlassCard>
-              <div className="flex items-center justify-between gap-4">
-                <div className="flex-1 min-w-0">
-                  <p className="text-sm font-medium text-foreground">强内容遮罩不透明度</p>
-                  <p className="text-[13px] text-muted-foreground mt-0.5">设置页面背景模糊遮罩的不透明度，当前 {contentBlurOpacity}%</p>
-                </div>
-                <Slider
-                  className="w-[180px] shrink-0"
-                  value={[contentBlurOpacity]}
-                  min={0}
-                  max={100}
-                  step={1}
-                  onValueChange={(v) => setContentBlurOpacity(Array.isArray(v) ? v[0] : v)}
-                />
-              </div>
-            </GlassCard>
-
             <GlassCard>
               <SettingRow label="恢复默认" desc="重置所有背景设置为初始状态">
                 <Button variant="destructive" size="sm" onClick={handleReset}>

src/pages/task-queue.tsx

@@ -0,0 +1,88 @@
+import { useTaskStore } from "@/stores/taskStore";
+import { TaskCard } from "@/components/task/TaskCard";
+import { Button } from "@/components/ui/button";
+import { Trash2, Inbox } from "lucide-react";
+
+export function TaskQueue() {
+  const tasks = useTaskStore((s) => s.tasks);
+  const clearHistory = useTaskStore((s) => s.clearHistory);
+
+  const activeTasks = tasks.filter(
+    (t) => t.status === "pending" || t.status === "running",
+  );
+  const completedTasks = tasks.filter(
+    (t) =>
+      t.status === "completed" ||
+      t.status === "failed" ||
+      t.status === "cancelled",
+  );
+  const hasCompleted = completedTasks.length > 0;
+
+  return (
+    <div className="h-full overflow-y-auto px-6 py-5">
+      <div className="max-w-3xl mx-auto">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-5">
+          <div className="flex items-center gap-3">
+            <h1 className="text-xl font-semibold text-foreground">
+              任务队列
+            </h1>
+            {activeTasks.length > 0 && (
+              <span className="px-2 py-0.5 rounded-full bg-primary/10 text-primary text-xs font-medium tabular-nums">
+                {activeTasks.length} 进行中
+              </span>
+            )}
+          </div>
+
+          {hasCompleted && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={clearHistory}
+              className="text-muted-foreground hover:text-destructive"
+            >
+              <Trash2 className="w-3.5 h-3.5 mr-1.5" />
+              清空历史
+            </Button>
+          )}
+        </div>
+
+        {/* Task list */}
+        {tasks.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-24 text-muted-foreground">
+            <Inbox className="w-12 h-12 mb-3 opacity-30" />
+            <p className="text-sm">暂无任务</p>
+          </div>
+        ) : (
+          <div className="space-y-5">
+            {activeTasks.length > 0 && (
+              <div>
+                <h3 className="text-[11px] font-semibold uppercase tracking-wider text-foreground/30 mb-2.5">
+                  进行中
+                </h3>
+                <div className="space-y-2.5">
+                  {activeTasks.map((t) => (
+                    <TaskCard key={t.id} task={t} />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {completedTasks.length > 0 && (
+              <div>
+                <h3 className="text-[11px] font-semibold uppercase tracking-wider text-foreground/30 mb-2.5">
+                  已完成
+                </h3>
+                <div className="space-y-2.5">
+                  {completedTasks.map((t) => (
+                    <TaskCard key={t.id} task={t} />
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/splash.tsx

@@ -1,10 +0,0 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import "./index.css";
-import Splash from "./components/splash/Splash";
-
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <Splash />
-  </StrictMode>
-);

src/stores/backgroundStore.ts

@@ -1,133 +1,74 @@
 import { create } from "zustand";
-import {
-  setImageBackground,
-  setColorBackground,
-  setBackgroundBlur,
-  setBackgroundOpacity,
-  setBackgroundAnimation,
-  getBackgroundConfig,
-  setTheme,
-  resetBackground,
-} from "../api/background";
-import type { AnimationType, Theme, BackgroundConfig } from "../api/background";
 
-interface BackgroundState {
-  type: "image" | "color" | "gradient" | "particles";
-  image?: string;
-  color?: string;
+const STORAGE_KEY = "koring-background";
+
+type BackgroundType = "image" | "color";
+
+interface BackgroundConfig {
+  type: BackgroundType;
+  image: string;
   blur: number;
   opacity: number;
-  animation: AnimationType;
-  animationSpeed: number;
-  theme: Theme;
-  loading: boolean;
-  error: string | null;
-
-  setImage: (url: string, blur?: number, opacity?: number) => Promise<void>;
-  setColor: (color: string) => Promise<void>;
-  setBlur: (blur: number) => Promise<void>;
-  setOpacity: (opacity: number) => Promise<void>;
-  setAnimation: (type: AnimationType, speed?: number) => Promise<void>;
-  setTheme: (theme: Theme) => Promise<void>;
-  fetchConfig: () => Promise<void>;
-  reset: () => Promise<void>;
-  clearError: () => void;
 }
 
-const defaultConfig: BackgroundConfig = {
-  type: "color",
-  color: "#1a1a2e",
+const DEFAULT_CONFIG: BackgroundConfig = {
+  type: "image",
+  image: "/background.png",
   blur: 0,
   opacity: 1,
-  animation: "none",
-  animationSpeed: 1,
-  theme: "dark",
 };
 
+function loadConfig(): BackgroundConfig {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) return { ...DEFAULT_CONFIG, ...JSON.parse(raw) };
+  } catch {}
+  return { ...DEFAULT_CONFIG };
+}
+
+function saveConfig(config: BackgroundConfig) {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
+}
+
+interface BackgroundState extends BackgroundConfig {
+  setImage: (url: string) => void;
+  setColor: (color: string) => void;
+  setBlur: (blur: number) => void;
+  setOpacity: (opacity: number) => void;
+  reset: () => void;
+}
+
 export const useBackgroundStore = create<BackgroundState>((set) => ({
-  ...defaultConfig,
-  loading: false,
-  error: null,
+  ...loadConfig(),
 
-  setImage: async (url, blur, opacity) => {
-    set({ loading: true, error: null });
-    try {
-      const config = await setImageBackground(url, blur, opacity);
-      set({ ...config, loading: false });
-    } catch (e: any) {
-      set({ error: e.message, loading: false });
-    }
+  setImage: (url) => {
+    const next: BackgroundConfig = { type: "image", image: url, blur: 0, opacity: 1 };
+    saveConfig(next);
+    set(next);
   },
 
-  setColor: async (color) => {
-    set({ loading: true, error: null });
-    try {
-      const config = await setColorBackground(color);
-      set({ ...config, loading: false });
-    } catch (e: any) {
-      set({ error: e.message, loading: false });
-    }
+  setColor: (color) => {
+    const next: BackgroundConfig = { type: "color", image: color, blur: 0, opacity: 1 };
+    saveConfig(next);
+    set(next);
   },
 
-  setBlur: async (blur) => {
-    set({ loading: true, error: null });
-    try {
-      const config = await setBackgroundBlur(blur);
-      set({ ...config, loading: false });
-    } catch (e: any) {
-      set({ error: e.message, loading: false });
-    }
+  setBlur: (blur) => {
+    const config = loadConfig();
+    config.blur = blur;
+    saveConfig(config);
+    set({ blur });
   },
 
-  setOpacity: async (opacity) => {
-    set({ loading: true, error: null });
-    try {
-      const config = await setBackgroundOpacity(opacity);
-      set({ ...config, loading: false });
-    } catch (e: any) {
-      set({ error: e.message, loading: false });
-    }
+  setOpacity: (opacity) => {
+    const config = loadConfig();
+    config.opacity = opacity;
+    saveConfig(config);
+    set({ opacity });
   },
 
-  setAnimation: async (type, speed) => {
-    set({ loading: true, error: null });
-    try {
-      const config = await setBackgroundAnimation(type, speed);
-      set({ ...config, loading: false });
-    } catch (e: any) {
-      set({ error: e.message, loading: false });
-    }
+  reset: () => {
+    saveConfig(DEFAULT_CONFIG);
+    set({ ...DEFAULT_CONFIG });
   },
-
-  setTheme: async (theme) => {
-    set({ loading: true, error: null });
-    try {
-      const config = await setTheme(theme);
-      set({ ...config, loading: false });
-    } catch (e: any) {
-      set({ error: e.message, loading: false });
-    }
-  },
-
-  fetchConfig: async () => {
-    set({ loading: true, error: null });
-    try {
-      const config = await getBackgroundConfig();
-      set({ ...config, loading: false });
-    } catch (e: any) {
-      set({ error: e.message, loading: false });
-    }
-  },
-
-  reset: async () => {
-    set({ loading: true, error: null });
-    try {
-      const config = await resetBackground();
-      set({ ...config, loading: false });
-    } catch (e: any) {
-      set({ error: e.message, loading: false });
-    }
-  },
-
-  clearError: () => set({ error: null }),
 }));

src/stores/routeStore.ts

@@ -6,10 +6,12 @@ export type RouteKey =
   | "today"
   | "play-link"
   | "setting"
+  | "task-queue"
   | "debug"
   | "debug-splash"
   | "debug-display"
-  | "debug-version-card";
+  | "debug-version-card"
+  | "debug-task";
 
 export type TitleBarMode = "default" | "sub" | "window";
 
@@ -32,17 +34,21 @@ export const routes: RouteItem[] = [
 
 export const allRoutes: RouteItem[] = [
   ...routes,
+  { key: "task-queue", label: "任务队列", path: "/task-queue", hidden: true },
   { key: "debug", label: "调试", path: "/debug", hidden: true },
   { key: "debug-splash", label: "启动动画调试", path: "/debug/splash", hidden: true },
   { key: "debug-display", label: "显示效果调试", path: "/debug/display", hidden: true },
   { key: "debug-version-card", label: "版本卡片调试", path: "/debug/version-card", hidden: true },
+  { key: "debug-task", label: "任务队列调试", path: "/debug/task", hidden: true },
 ];
 
 const parentMap: Partial<Record<RouteKey, RouteKey>> = {
+  "task-queue": "home",
   debug: "setting",
   "debug-splash": "debug",
   "debug-display": "debug",
   "debug-version-card": "debug",
+  "debug-task": "debug",
 };
 
 const topLevelKeys = new Set(routes.map((r) => r.key));

src/stores/taskStore.ts

@@ -0,0 +1,232 @@
+import { create } from "zustand";
+import type { Task, TaskType, TaskProgress, TaskLog, TaskContext } from "@/types/task";
+
+const STORAGE_KEY = "koring-task-history";
+const MAX_HISTORY = 50;
+
+function generateId(): string {
+  return `task-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+function loadHistory(): Task[] {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed.slice(0, MAX_HISTORY) : [];
+  } catch {
+    return [];
+  }
+}
+
+function saveHistory(tasks: Task[]) {
+  try {
+    const completed = tasks
+      .filter((t) => t.status === "completed" || t.status === "failed" || t.status === "cancelled")
+      .slice(0, MAX_HISTORY);
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(completed));
+  } catch {
+    /* ignore quota errors */
+  }
+}
+
+interface TaskExecutor {
+  (ctx: TaskContext): Promise<void>;
+}
+
+interface TaskState {
+  tasks: Task[];
+  executors: Map<string, TaskExecutor>;
+  abortControllers: Map<string, AbortController>;
+
+  // Derived
+  isRunning: () => boolean;
+  activeTasks: () => Task[];
+  completedTasks: () => Task[];
+  pendingCount: () => number;
+  runningCount: () => number;
+
+  // Actions
+  addTask: (type: TaskType, title: string, description: string | undefined, executor: TaskExecutor) => string;
+  cancelTask: (id: string) => void;
+  removeTask: (id: string) => void;
+  clearHistory: () => void;
+  retryTask: (id: string) => void;
+  _startTask: (id: string) => void;
+}
+
+export const useTaskStore = create<TaskState>((set, get) => ({
+  tasks: loadHistory(),
+  executors: new Map(),
+  abortControllers: new Map(),
+
+  isRunning: () => get().tasks.some((t) => t.status === "running" || t.status === "pending"),
+  activeTasks: () => get().tasks.filter((t) => t.status === "running" || t.status === "pending"),
+  completedTasks: () => get().tasks.filter((t) => t.status === "completed" || t.status === "failed" || t.status === "cancelled"),
+  pendingCount: () => get().tasks.filter((t) => t.status === "pending").length,
+  runningCount: () => get().tasks.filter((t) => t.status === "running").length,
+
+  addTask: (type, title, description, executor) => {
+    const id = generateId();
+    const task: Task = {
+      id,
+      type,
+      title,
+      description,
+      status: "pending",
+      logs: [],
+      createdAt: Date.now(),
+    };
+
+    set((state) => {
+      const tasks = [...state.tasks, task];
+      const executors = new Map(state.executors);
+      executors.set(id, executor);
+      return { tasks, executors };
+    });
+
+    // Auto-start
+    get()._startTask(id);
+    return id;
+  },
+
+  cancelTask: (id) => {
+    const { abortControllers } = get();
+    const controller = abortControllers.get(id);
+    if (controller) {
+      controller.abort();
+    }
+    set((state) => {
+      const tasks = state.tasks.map((t) =>
+        t.id === id && (t.status === "pending" || t.status === "running")
+          ? { ...t, status: "cancelled" as const, finishedAt: Date.now() }
+          : t,
+      );
+      const abortControllers = new Map(state.abortControllers);
+      abortControllers.delete(id);
+      saveHistory(tasks);
+      return { tasks, abortControllers };
+    });
+  },
+
+  removeTask: (id) => {
+    set((state) => {
+      const tasks = state.tasks.filter((t) => t.id !== id);
+      const executors = new Map(state.executors);
+      executors.delete(id);
+      saveHistory(tasks);
+      return { tasks, executors };
+    });
+  },
+
+  clearHistory: () => {
+    set((state) => {
+      const tasks = state.tasks.filter((t) => t.status === "running" || t.status === "pending");
+      saveHistory(tasks);
+      return { tasks };
+    });
+  },
+
+  retryTask: (id) => {
+    const { tasks, executors } = get();
+    const original = tasks.find((t) => t.id === id);
+    const executor = executors.get(id);
+    if (!original || !executor) return;
+
+    const newTask: Task = {
+      ...original,
+      id: generateId(),
+      status: "pending",
+      progress: undefined,
+      logs: [],
+      createdAt: Date.now(),
+      startedAt: undefined,
+      finishedAt: undefined,
+    };
+
+    set((state) => {
+      const tasks = [...state.tasks, newTask];
+      const executors = new Map(state.executors);
+      executors.set(newTask.id, executor);
+      return { tasks, executors };
+    });
+
+    get()._startTask(newTask.id);
+  },
+
+  _startTask: (id: string) => {
+    const { tasks, executors } = get();
+    const task = tasks.find((t) => t.id === id);
+    const executor = executors.get(id);
+    if (!task || task.status !== "pending" || !executor) return;
+
+    const controller = new AbortController();
+    set((state) => {
+      const abortControllers = new Map(state.abortControllers);
+      abortControllers.set(id, controller);
+      const tasks = state.tasks.map((t) =>
+        t.id === id
+          ? { ...t, status: "running" as const, startedAt: Date.now() }
+          : t,
+      );
+      return { tasks, abortControllers };
+    });
+
+    const ctx: TaskContext = {
+      updateProgress: (progress: TaskProgress) => {
+        set((state) => ({
+          tasks: state.tasks.map((t) =>
+            t.id === id ? { ...t, progress } : t,
+          ),
+        }));
+      },
+      addLog: (level: TaskLog["level"], message: string) => {
+        const log: TaskLog = { time: Date.now(), level, message };
+        set((state) => ({
+          tasks: state.tasks.map((t) =>
+            t.id === id ? { ...t, logs: [...t.logs, log] } : t,
+          ),
+        }));
+      },
+      abortSignal: controller.signal,
+    };
+
+    executor(ctx)
+      .then(() => {
+        if (controller.signal.aborted) return;
+        set((state) => {
+          const tasks = state.tasks.map((t) =>
+            t.id === id
+              ? { ...t, status: "completed" as const, finishedAt: Date.now() }
+              : t,
+          );
+          saveHistory(tasks);
+          return { tasks };
+        });
+      })
+      .catch((err) => {
+        if (controller.signal.aborted) return;
+        const message = err instanceof Error ? err.message : String(err);
+        set((state) => {
+          const tasks = state.tasks.map((t) =>
+            t.id === id
+              ? {
+                  ...t,
+                  status: "failed" as const,
+                  finishedAt: Date.now(),
+                  logs: [...t.logs, { time: Date.now(), level: "error" as const, message }],
+                }
+              : t,
+          );
+          saveHistory(tasks);
+          return { tasks };
+        });
+      })
+      .finally(() => {
+        const { abortControllers } = get();
+        const next = new Map(abortControllers);
+        next.delete(id);
+        set({ abortControllers: next });
+      });
+  },
+}));

src/types/task.ts

@@ -0,0 +1,34 @@
+export type TaskType = "install" | "download" | "update" | "launch" | "auth" | "sync" | "custom";
+
+export type TaskStatus = "pending" | "running" | "completed" | "failed" | "cancelled";
+
+export interface TaskLog {
+  time: number;
+  level: "info" | "warn" | "error";
+  message: string;
+}
+
+export interface TaskProgress {
+  current: number;
+  total: number;
+  stage?: string;
+}
+
+export interface Task {
+  id: string;
+  type: TaskType;
+  title: string;
+  description?: string;
+  status: TaskStatus;
+  progress?: TaskProgress;
+  logs: TaskLog[];
+  createdAt: number;
+  startedAt?: number;
+  finishedAt?: number;
+}
+
+export interface TaskContext {
+  updateProgress: (progress: TaskProgress) => void;
+  addLog: (level: TaskLog["level"], message: string) => void;
+  abortSignal: AbortSignal;
+}

src/vite-env.d.ts

@@ -1 +1,12 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_START_POP: string;
+  readonly VITE_START_POP_TITLE: string;
+  readonly VITE_START_POP_INFO: string;
+  readonly VITE_START_POP_BOUTTON: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}