✨ 添加收藏和下载队列

src/components/DownloadCard/index.tsx

@@ -0,0 +1,61 @@
+import { Component } from 'solid-js';
+import { Progress } from '@/components/ui/progress';
+import { Button } from '@/components/ui/button';
+import { Pause, Play, X } from 'lucide-solid';
+import { DownloadTask } from '@/types/download';
+import { useDownloadsStore } from '@/features/downloads/store';
+
+const DownloadCard: Component<{ download: DownloadTask }> = (props) => {
+  const { pauseDownload, resumeDownload, cancelDownload } = useDownloadsStore();
+
+  return (
+    <div class="flex items-center gap-3 p-4 bg-card rounded-lg border border-border/40">
+      <img src={props.download.icon} alt={props.download.name} class="w-12 h-12 rounded-lg" />
+      <div class="flex-1">
+        <div class="flex items-center justify-between mb-2">
+          <h3 class="font-medium">{props.download.name}</h3>
+          <div class="text-sm text-muted-foreground">
+            {props.download.status === 'queued' ? '排队中' : 
+              props.download.status === 'downloading' && props.download.speed ? 
+                `${props.download.speed} - ` : ''}
+            {props.download.status !== 'queued' && props.download.size}
+          </div>
+        </div>
+        <div class="flex items-center gap-2">
+          <Progress value={props.download.progress} class="flex-1" />
+          <span class="text-sm text-muted-foreground">{props.download.progress}%</span>
+          {(props.download.status === 'downloading' || props.download.status === 'queued') && (
+            <Button 
+              size="icon" 
+              variant="ghost" 
+              class='h-8 w-8 px-2'
+              onClick={() => pauseDownload(props.download.category, props.download.pkgname)}
+            >
+              <Pause size={16} />
+            </Button>
+          )}
+          {props.download.status === 'paused' && (
+            <Button 
+              size="icon" 
+              variant="ghost" 
+              class='h-8 w-8 px-2'
+              onClick={() => resumeDownload(props.download.category, props.download.pkgname)}
+            >
+              <Play size={16} />
+            </Button>
+          )}
+          <Button 
+            size="icon" 
+            variant="ghost" 
+            class="text-destructive h-8 w-8 px-2"
+            onClick={() => cancelDownload(props.download.category, props.download.pkgname)}
+          >
+            <X size={16} />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DownloadCard;

src/components/Sidebar/index.tsx

@@ -24,12 +24,12 @@ const menuItems = [
   },
   {
     title: '我的收藏',
-    url: '/',
+    url: '/collections',
     icon: () => <Heart size={20} />
   },
   {
     title: '下载列表',
-    url: '/',
+    url: '/downloads',
     icon: () => <Download size={20} />
   }
 ];

src/components/TitleBar/store.ts

@@ -5,8 +5,11 @@ export const useTitleBarStore = () => {
   const location = useLocation();
   let lastScrollPosition = 0;
 
+  // 定义可返回的路由前缀列表
+  const BACK_ROUTE_PREFIXES = ['/app', '/search', '/collectionDetail'] as const;
+  
   const canGoBack = () => {
-    return location.pathname.startsWith('/app');
+    return BACK_ROUTE_PREFIXES.some(prefix => location.pathname.startsWith(prefix));
   };
 
   const saveScrollPosition = () => {

src/components/ui/checkbox.tsx

@@ -0,0 +1,63 @@
+import type { ValidComponent } from "solid-js"
+import { Match, splitProps, Switch } from "solid-js"
+
+import * as CheckboxPrimitive from "@kobalte/core/checkbox"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+
+import { cn } from "@/lib/utils"
+
+type CheckboxRootProps<T extends ValidComponent = "div"> =
+  CheckboxPrimitive.CheckboxRootProps<T> & {
+    class?: string | undefined
+    onCheckedChange?: (checked: boolean) => void
+  }
+
+const Checkbox = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, CheckboxRootProps<T>>
+) => {
+  const [local, others] = splitProps(props as CheckboxRootProps, ["class"])
+  return (
+    <CheckboxPrimitive.Root
+      class={cn("items-top group relative flex space-x-2", local.class)}
+      {...others}
+    >
+      <CheckboxPrimitive.Input class="peer" />
+      <CheckboxPrimitive.Control class="size-4 shrink-0 rounded-sm border border-primary ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 data-[checked]:border-none data-[indeterminate]:border-none data-[checked]:bg-primary data-[indeterminate]:bg-primary data-[checked]:text-primary-foreground data-[indeterminate]:text-primary-foreground">
+        <CheckboxPrimitive.Indicator>
+          <Switch>
+            <Match when={!others.indeterminate}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="size-4"
+              >
+                <path d="M5 12l5 5l10 -10" />
+              </svg>
+            </Match>
+            <Match when={others.indeterminate}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="size-4"
+              >
+                <path d="M5 12l14 0" />
+              </svg>
+            </Match>
+          </Switch>
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Control>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

src/components/ui/dialog.tsx

@@ -0,0 +1,141 @@
+import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js"
+import { splitProps } from "solid-js"
+
+import * as DialogPrimitive from "@kobalte/core/dialog"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal: Component<DialogPrimitive.DialogPortalProps> = (props) => {
+  const [, rest] = splitProps(props, ["children"])
+  return (
+    <DialogPrimitive.Portal {...rest}>
+      <div class="fixed inset-0 z-50 flex items-start justify-center sm:items-center">
+        {props.children}
+      </div>
+    </DialogPrimitive.Portal>
+  )
+}
+
+type DialogOverlayProps<T extends ValidComponent = "div"> =
+  DialogPrimitive.DialogOverlayProps<T> & { class?: string | undefined }
+
+const DialogOverlay = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, DialogOverlayProps<T>>
+) => {
+  const [, rest] = splitProps(props as DialogOverlayProps, ["class"])
+  return (
+    <DialogPrimitive.Overlay
+      class={cn(
+        "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
+        props.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+type DialogContentProps<T extends ValidComponent = "div"> =
+  DialogPrimitive.DialogContentProps<T> & {
+    class?: string | undefined
+    children?: JSX.Element
+  }
+
+const DialogContent = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, DialogContentProps<T>>
+) => {
+  const [, rest] = splitProps(props as DialogContentProps, ["class", "children"])
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        class={cn(
+          "fixed left-1/2 top-1/2 z-50 grid max-h-screen w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto border bg-background p-6 shadow-lg duration-200 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] sm:rounded-lg",
+          props.class
+        )}
+        {...rest}
+      >
+        {props.children}
+        <DialogPrimitive.CloseButton class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[expanded]:bg-accent data-[expanded]:text-muted-foreground">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="size-4"
+          >
+            <path d="M18 6l-12 12" />
+            <path d="M6 6l12 12" />
+          </svg>
+          <span class="sr-only">Close</span>
+        </DialogPrimitive.CloseButton>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+const DialogHeader: Component<ComponentProps<"div">> = (props) => {
+  const [, rest] = splitProps(props, ["class"])
+  return (
+    <div class={cn("flex flex-col space-y-1.5 text-center sm:text-left", props.class)} {...rest} />
+  )
+}
+
+const DialogFooter: Component<ComponentProps<"div">> = (props) => {
+  const [, rest] = splitProps(props, ["class"])
+  return (
+    <div
+      class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", props.class)}
+      {...rest}
+    />
+  )
+}
+
+type DialogTitleProps<T extends ValidComponent = "h2"> = DialogPrimitive.DialogTitleProps<T> & {
+  class?: string | undefined
+}
+
+const DialogTitle = <T extends ValidComponent = "h2">(
+  props: PolymorphicProps<T, DialogTitleProps<T>>
+) => {
+  const [, rest] = splitProps(props as DialogTitleProps, ["class"])
+  return (
+    <DialogPrimitive.Title
+      class={cn("text-lg font-semibold leading-none tracking-tight", props.class)}
+      {...rest}
+    />
+  )
+}
+
+type DialogDescriptionProps<T extends ValidComponent = "p"> =
+  DialogPrimitive.DialogDescriptionProps<T> & {
+    class?: string | undefined
+  }
+
+const DialogDescription = <T extends ValidComponent = "p">(
+  props: PolymorphicProps<T, DialogDescriptionProps<T>>
+) => {
+  const [, rest] = splitProps(props as DialogDescriptionProps, ["class"])
+  return (
+    <DialogPrimitive.Description
+      class={cn("text-sm text-muted-foreground", props.class)}
+      {...rest}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription
+}

src/components/ui/input.tsx

@@ -0,0 +1,20 @@
+import { Component, JSX, splitProps } from "solid-js";
+import { cn } from "@/lib/utils";
+
+export interface InputProps extends JSX.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input: Component<InputProps> = (props) => {
+  const [, inputProps] = splitProps(props, ["class"]);
+
+  return (
+    <input
+      class={cn(
+        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        props.class
+      )}
+      {...inputProps}
+    />
+  );
+};
+
+export { Input };

src/components/ui/label.tsx

@@ -0,0 +1,19 @@
+import type { Component, ComponentProps } from "solid-js"
+import { splitProps } from "solid-js"
+
+import { cn } from "@/lib/utils"
+
+const Label: Component<ComponentProps<"label">> = (props) => {
+  const [local, others] = splitProps(props, ["class"])
+  return (
+    <label
+      class={cn(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        local.class
+      )}
+      {...others}
+    />
+  )
+}
+
+export { Label }

src/components/ui/progress.tsx

@@ -0,0 +1,34 @@
+import type { Component, JSX, ValidComponent } from "solid-js"
+import { splitProps } from "solid-js"
+
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import * as ProgressPrimitive from "@kobalte/core/progress"
+
+import { Label } from "@/components/ui/label"
+
+type ProgressRootProps<T extends ValidComponent = "div"> =
+  ProgressPrimitive.ProgressRootProps<T> & { children?: JSX.Element }
+
+const Progress = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, ProgressRootProps<T>>
+) => {
+  const [local, others] = splitProps(props as ProgressRootProps, ["children"])
+  return (
+    <ProgressPrimitive.Root {...others}>
+      {local.children}
+      <ProgressPrimitive.Track class="relative h-2 w-full overflow-hidden rounded-full bg-secondary">
+        <ProgressPrimitive.Fill class="h-full w-[var(--kb-progress-fill-width)] flex-1 bg-primary transition-all" />
+      </ProgressPrimitive.Track>
+    </ProgressPrimitive.Root>
+  )
+}
+
+const ProgressLabel: Component<ProgressPrimitive.ProgressLabelProps> = (props) => {
+  return <ProgressPrimitive.Label as={Label} {...props} />
+}
+
+const ProgressValueLabel: Component<ProgressPrimitive.ProgressValueLabelProps> = (props) => {
+  return <ProgressPrimitive.ValueLabel as={Label} {...props} />
+}
+
+export { Progress, ProgressLabel, ProgressValueLabel }

src/components/ui/tabs.tsx

@@ -0,0 +1,87 @@
+import type { ValidComponent } from "solid-js"
+import { splitProps } from "solid-js"
+
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import * as TabsPrimitive from "@kobalte/core/tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+type TabsListProps<T extends ValidComponent = "div"> = TabsPrimitive.TabsListProps<T> & {
+  class?: string | undefined
+}
+
+const TabsList = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, TabsListProps<T>>
+) => {
+  const [local, others] = splitProps(props as TabsListProps, ["class"])
+  return (
+    <TabsPrimitive.List
+      class={cn(
+        "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+        local.class
+      )}
+      {...others}
+    />
+  )
+}
+
+type TabsTriggerProps<T extends ValidComponent = "button"> = TabsPrimitive.TabsTriggerProps<T> & {
+  class?: string | undefined
+}
+
+const TabsTrigger = <T extends ValidComponent = "button">(
+  props: PolymorphicProps<T, TabsTriggerProps<T>>
+) => {
+  const [local, others] = splitProps(props as TabsTriggerProps, ["class"])
+  return (
+    <TabsPrimitive.Trigger
+      class={cn(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[selected]:bg-background data-[selected]:text-foreground data-[selected]:shadow-sm",
+        local.class
+      )}
+      {...others}
+    />
+  )
+}
+
+type TabsContentProps<T extends ValidComponent = "div"> = TabsPrimitive.TabsContentProps<T> & {
+  class?: string | undefined
+}
+
+const TabsContent = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, TabsContentProps<T>>
+) => {
+  const [local, others] = splitProps(props as TabsContentProps, ["class"])
+  return (
+    <TabsPrimitive.Content
+      class={cn(
+        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        local.class
+      )}
+      {...others}
+    />
+  )
+}
+
+type TabsIndicatorProps<T extends ValidComponent = "div"> = TabsPrimitive.TabsIndicatorProps<T> & {
+  class?: string | undefined
+}
+
+const TabsIndicator = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, TabsIndicatorProps<T>>
+) => {
+  const [local, others] = splitProps(props as TabsIndicatorProps, ["class"])
+  return (
+    <TabsPrimitive.Indicator
+      class={cn(
+        "duration-250ms absolute transition-all data-[orientation=horizontal]:-bottom-px data-[orientation=vertical]:-right-px data-[orientation=horizontal]:h-[2px] data-[orientation=vertical]:w-[2px]",
+        local.class
+      )}
+      {...others}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsIndicator }