feat: complete stage 1 infrastructure

2025-10-16 10:00:22 +08:00
parent 95e2d84655
commit cc0b7053aa
31 changed files with 2350 additions and 9 deletions
--- a/components.json
+++ b/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
--- a/docs/REFACTORING_MASTER_PLAN.md
+++ b/docs/REFACTORING_MASTER_PLAN.md
@@ -870,7 +870,7 @@ export function useDragSort(
 | 阶段       | 目标           | 工期         | 产出                         |
 | ---------- | -------------- | ------------ | ---------------------------- |
 | **阶段 0** | 准备环境       | 1 天         | 依赖安装、配置完成           |
-| **阶段 1** | 搭建基础设施   | 2-3 天       | API 层、Query Hooks 完成     |
+| **阶段 1** | 搭建基础设施（✅ 已完成） | 2-3 天       | API 层、Query Hooks 完成     |
 | **阶段 2** | 重构核心功能   | 3-4 天       | App.tsx、ProviderList 完成   |
 | **阶段 3** | 重构设置和辅助 | 2-3 天       | SettingsDialog、通知系统完成 |
 | **阶段 4** | 清理和优化     | 1-2 天       | 旧代码删除、优化完成         |
@@ -1006,12 +1006,12 @@ pnpm typecheck  # 确保类型检查通过

 #### 任务清单

- [ ] 创建工具函数 (`lib/utils.ts`)
- [ ] 添加基础 UI 组件 (Button, Dialog, Input, Form 等)
- [ ] 创建 Query Client 配置
- [ ] 封装 API 层 (providers, settings, mcp)
- [ ] 创建 Query Hooks (queries, mutations)
- [ ] 创建 Zod Schemas
+- [x] 创建工具函数 (`lib/utils.ts`)
+- [x] 添加基础 UI 组件 (Button, Dialog, Input, Form 等)
+- [x] 创建 Query Client 配置
+- [x] 封装 API 层 (providers, settings, mcp)
+- [x] 创建 Query Hooks (queries, mutations)
+- [x] 创建 Zod Schemas

 #### 详细步骤

--- a/package.json
+++ b/package.json
@@ -35,20 +35,37 @@
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
    "@tailwindcss/vite": "^4.1.13",
+    "@tanstack/react-query": "^5.90.3",
    "@tauri-apps/api": "^2.8.0",
    "@tauri-apps/plugin-dialog": "^2.4.0",
    "@tauri-apps/plugin-process": "^2.0.0",
    "@tauri-apps/plugin-store": "^2.0.0",
    "@tauri-apps/plugin-updater": "^2.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
    "codemirror": "^6.0.2",
    "i18next": "^25.5.2",
    "jsonc-parser": "^3.2.1",
    "lucide-react": "^0.542.0",
+    "next-themes": "^0.4.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.65.0",
    "react-i18next": "^16.0.0",
    "smol-toml": "^1.4.2",
-    "tailwindcss": "^4.1.13"
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.13",
+    "zod": "^4.1.12"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,117 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="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">
+        <X className="h-4 w-4" />
+        <span className="sr-only">关闭</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+};
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -0,0 +1,165 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form";
+import { cn } from "@/lib/utils";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const id = itemContext.id;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+const FormItemContext = React.createContext<{ id: string }>(
+  {} as { id: string }
+);
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <LabelPrimitive.Root
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = LabelPrimitive.Root.displayName;
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { formItemId, formDescriptionId, formMessageId } = useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={`${formDescriptionId} ${formMessageId}`}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error?.message ?? children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  useFormField,
+};
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cn } from "@/lib/utils";
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className
+    )}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,122 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectPrimitive.ScrollUpButton className="flex cursor-default items-center justify-center bg-popover py-1">
+        <ChevronUp className="h-4 w-4" />
+      </SelectPrimitive.ScrollUpButton>
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectPrimitive.ScrollDownButton className="flex cursor-default items-center justify-center bg-popover py-1">
+        <ChevronDown className="h-4 w-4" />
+      </SelectPrimitive.ScrollDownButton>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+};
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -0,0 +1,22 @@
+import { Toaster as SonnerToaster } from "sonner";
+
+export function Toaster() {
+  return (
+    <SonnerToaster
+      position="top-right"
+      richColors
+      theme="system"
+      toastOptions={{
+        classNames: {
+          toast: "group rounded-md border bg-background text-foreground shadow-lg",
+          title: "text-sm font-semibold",
+          description: "text-sm text-muted-foreground",
+          closeButton:
+            "absolute right-2 top-2 rounded-full p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+          actionButton:
+            "rounded-md bg-primary px-3 py-1 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90",
+        },
+      }}
+    />
+  );
+}
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { cn } from "@/lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    ref={ref}
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-input shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -0,0 +1,52 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex min-w-[120px] items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all hover:text-foreground 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-[state=active]:bg-background data-[state=active]:text-foreground data-[state=inactive]:opacity-60",
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };
--- a/src/lib/api/index.ts
+++ b/src/lib/api/index.ts
@@ -0,0 +1,6 @@
+export type { AppType } from "./types";
+export { providersApi } from "./providers";
+export { settingsApi } from "./settings";
+export { mcpApi } from "./mcp";
+export { usageApi } from "./usage";
+export { vscodeApi } from "./vscode";
--- a/src/lib/api/mcp.ts
+++ b/src/lib/api/mcp.ts
@@ -0,0 +1,69 @@
+import { invoke } from "@tauri-apps/api/core";
+import type {
+  McpConfigResponse,
+  McpServer,
+  McpServerSpec,
+  McpStatus,
+} from "@/types";
+import type { AppType } from "./types";
+
+export const mcpApi = {
+  async getStatus(): Promise<McpStatus> {
+    return await invoke("get_claude_mcp_status");
+  },
+
+  async readConfig(): Promise<string | null> {
+    return await invoke("read_claude_mcp_config");
+  },
+
+  async upsertServer(
+    id: string,
+    spec: McpServerSpec | Record<string, any>
+  ): Promise<boolean> {
+    return await invoke("upsert_claude_mcp_server", { id, spec });
+  },
+
+  async deleteServer(id: string): Promise<boolean> {
+    return await invoke("delete_claude_mcp_server", { id });
+  },
+
+  async validateCommand(cmd: string): Promise<boolean> {
+    return await invoke("validate_mcp_command", { cmd });
+  },
+
+  async getConfig(app: AppType = "claude"): Promise<McpConfigResponse> {
+    return await invoke("get_mcp_config", { app });
+  },
+
+  async upsertServerInConfig(
+    app: AppType,
+    id: string,
+    spec: McpServer,
+    options?: { syncOtherSide?: boolean }
+  ): Promise<boolean> {
+    const payload = {
+      app,
+      id,
+      spec,
+      ...(options?.syncOtherSide !== undefined
+        ? { syncOtherSide: options.syncOtherSide }
+        : {}),
+    };
+    return await invoke("upsert_mcp_server_in_config", payload);
+  },
+
+  async deleteServerInConfig(
+    app: AppType,
+    id: string,
+    options?: { syncOtherSide?: boolean }
+  ): Promise<boolean> {
+    const payload = {
+      app,
+      id,
+      ...(options?.syncOtherSide !== undefined
+        ? { syncOtherSide: options.syncOtherSide }
+        : {}),
+    };
+    return await invoke("delete_mcp_server_in_config", payload);
+  },
+};
--- a/src/lib/api/providers.ts
+++ b/src/lib/api/providers.ts
@@ -0,0 +1,75 @@
+import { invoke } from "@tauri-apps/api/core";
+import type { Provider } from "@/types";
+import type { AppType } from "./types";
+
+export interface ProviderSortUpdate {
+  id: string;
+  sortIndex: number;
+}
+
+export const providersApi = {
+  async getAll(appType: AppType): Promise<Record<string, Provider>> {
+    return await invoke("get_providers", { app_type: appType, app: appType });
+  },
+
+  async getCurrent(appType: AppType): Promise<string> {
+    return await invoke("get_current_provider", {
+      app_type: appType,
+      app: appType,
+    });
+  },
+
+  async add(provider: Provider, appType: AppType): Promise<boolean> {
+    return await invoke("add_provider", {
+      provider,
+      app_type: appType,
+      app: appType,
+    });
+  },
+
+  async update(provider: Provider, appType: AppType): Promise<boolean> {
+    return await invoke("update_provider", {
+      provider,
+      app_type: appType,
+      app: appType,
+    });
+  },
+
+  async delete(id: string, appType: AppType): Promise<boolean> {
+    return await invoke("delete_provider", {
+      id,
+      app_type: appType,
+      app: appType,
+    });
+  },
+
+  async switch(id: string, appType: AppType): Promise<boolean> {
+    return await invoke("switch_provider", {
+      id,
+      app_type: appType,
+      app: appType,
+    });
+  },
+
+  async importDefault(appType: AppType): Promise<boolean> {
+    return await invoke("import_default_config", {
+      app_type: appType,
+      app: appType,
+    });
+  },
+
+  async updateTrayMenu(): Promise<boolean> {
+    return await invoke("update_tray_menu");
+  },
+
+  async updateSortOrder(
+    updates: ProviderSortUpdate[],
+    appType: AppType
+  ): Promise<boolean> {
+    return await invoke("update_providers_sort_order", {
+      updates,
+      app_type: appType,
+      app: appType,
+    });
+  },
+};
--- a/src/lib/api/settings.ts
+++ b/src/lib/api/settings.ts
@@ -0,0 +1,52 @@
+import { invoke } from "@tauri-apps/api/core";
+import type { Settings } from "@/types";
+import type { AppType } from "./types";
+
+export const settingsApi = {
+  async get(): Promise<Settings> {
+    return await invoke("get_settings");
+  },
+
+  async save(settings: Settings): Promise<boolean> {
+    return await invoke("save_settings", { settings });
+  },
+
+  async restart(): Promise<boolean> {
+    return await invoke("restart_app");
+  },
+
+  async checkUpdates(): Promise<void> {
+    await invoke("check_for_updates");
+  },
+
+  async isPortable(): Promise<boolean> {
+    return await invoke("is_portable_mode");
+  },
+
+  async getConfigDir(appType: AppType): Promise<string> {
+    return await invoke("get_config_dir", {
+      app_type: appType,
+      app: appType,
+    });
+  },
+
+  async openConfigFolder(appType: AppType): Promise<void> {
+    await invoke("open_config_folder", { app_type: appType, app: appType });
+  },
+
+  async selectConfigDirectory(defaultPath?: string): Promise<string | null> {
+    return await invoke("pick_directory", { default_path: defaultPath });
+  },
+
+  async getClaudeCodeConfigPath(): Promise<string> {
+    return await invoke("get_claude_code_config_path");
+  },
+
+  async getAppConfigPath(): Promise<string> {
+    return await invoke("get_app_config_path");
+  },
+
+  async openAppConfigFolder(): Promise<void> {
+    await invoke("open_app_config_folder");
+  },
+};
--- a/src/lib/api/types.ts
+++ b/src/lib/api/types.ts
@@ -0,0 +1 @@
+export type AppType = "claude" | "codex";
--- a/src/lib/api/usage.ts
+++ b/src/lib/api/usage.ts
@@ -0,0 +1,15 @@
+import { invoke } from "@tauri-apps/api/core";
+import type { UsageResult } from "@/types";
+import type { AppType } from "./types";
+
+export const usageApi = {
+  async query(providerId: string, appType: AppType): Promise<UsageResult> {
+    return await invoke("query_provider_usage", {
+      provider_id: providerId,
+      providerId: providerId,
+      app_type: appType,
+      app: appType,
+      appType,
+    });
+  },
+};
--- a/src/lib/api/vscode.ts
+++ b/src/lib/api/vscode.ts
@@ -0,0 +1,113 @@
+import { invoke } from "@tauri-apps/api/core";
+import type { CustomEndpoint } from "@/types";
+import type { AppType } from "./types";
+
+export interface EndpointLatencyResult {
+  url: string;
+  latency: number | null;
+  status?: number;
+  error?: string;
+}
+
+export const vscodeApi = {
+  async getLiveProviderSettings(appType: AppType) {
+    return await invoke("read_live_provider_settings", {
+      app_type: appType,
+      app: appType,
+      appType,
+    });
+  },
+
+  async testApiEndpoints(
+    urls: string[],
+    options?: { timeoutSecs?: number }
+  ): Promise<EndpointLatencyResult[]> {
+    return await invoke("test_api_endpoints", {
+      urls,
+      timeout_secs: options?.timeoutSecs,
+    });
+  },
+
+  async getCustomEndpoints(
+    appType: AppType,
+    providerId: string
+  ): Promise<CustomEndpoint[]> {
+    return await invoke("get_custom_endpoints", {
+      app_type: appType,
+      app: appType,
+      appType,
+      provider_id: providerId,
+      providerId,
+    });
+  },
+
+  async addCustomEndpoint(
+    appType: AppType,
+    providerId: string,
+    url: string
+  ): Promise<void> {
+    await invoke("add_custom_endpoint", {
+      app_type: appType,
+      app: appType,
+      appType,
+      provider_id: providerId,
+      providerId,
+      url,
+    });
+  },
+
+  async removeCustomEndpoint(
+    appType: AppType,
+    providerId: string,
+    url: string
+  ): Promise<void> {
+    await invoke("remove_custom_endpoint", {
+      app_type: appType,
+      app: appType,
+      appType,
+      provider_id: providerId,
+      providerId,
+      url,
+    });
+  },
+
+  async updateEndpointLastUsed(
+    appType: AppType,
+    providerId: string,
+    url: string
+  ): Promise<void> {
+    await invoke("update_endpoint_last_used", {
+      app_type: appType,
+      app: appType,
+      appType,
+      provider_id: providerId,
+      providerId,
+      url,
+    });
+  },
+
+  async exportConfigToFile(filePath: string) {
+    return await invoke("export_config_to_file", {
+      file_path: filePath,
+      filePath,
+    });
+  },
+
+  async importConfigFromFile(filePath: string) {
+    return await invoke("import_config_from_file", {
+      file_path: filePath,
+      filePath,
+    });
+  },
+
+  async saveFileDialog(defaultName: string): Promise<string | null> {
+    return await invoke("save_file_dialog", {
+      default_name: defaultName,
+      defaultName,
+    });
+  },
+
+  async openFileDialog(): Promise<string | null> {
+    return await invoke("open_file_dialog");
+  },
+};
--- a/src/lib/query/index.ts
+++ b/src/lib/query/index.ts
@@ -0,0 +1,3 @@
+export * from "./queryClient";
+export * from "./queries";
+export * from "./mutations";
--- a/src/lib/query/mutations.ts
+++ b/src/lib/query/mutations.ts
@@ -0,0 +1,155 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import {
+  providersApi,
+  settingsApi,
+  type AppType,
+} from "@/lib/api";
+import type { Provider, Settings } from "@/types";
+
+export const useAddProviderMutation = (appType: AppType) => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation({
+    mutationFn: async (providerInput: Omit<Provider, "id">) => {
+      const newProvider: Provider = {
+        ...providerInput,
+        id: crypto.randomUUID(),
+        createdAt: Date.now(),
+      };
+      await providersApi.add(newProvider, appType);
+      return newProvider;
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["providers", appType] });
+      await providersApi.updateTrayMenu();
+      toast.success(
+        t("notifications.providerAdded", {
+          defaultValue: "供应商已添加",
+        })
+      );
+    },
+    onError: (error: Error) => {
+      toast.error(
+        t("notifications.addFailed", {
+          defaultValue: "添加供应商失败: {{error}}",
+          error: error.message,
+        })
+      );
+    },
+  });
+};
+
+export const useUpdateProviderMutation = (appType: AppType) => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation({
+    mutationFn: async (provider: Provider) => {
+      await providersApi.update(provider, appType);
+      return provider;
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["providers", appType] });
+      toast.success(
+        t("notifications.updateSuccess", {
+          defaultValue: "供应商更新成功",
+        })
+      );
+    },
+    onError: (error: Error) => {
+      toast.error(
+        t("notifications.updateFailed", {
+          defaultValue: "更新供应商失败: {{error}}",
+          error: error.message,
+        })
+      );
+    },
+  });
+};
+
+export const useDeleteProviderMutation = (appType: AppType) => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation({
+    mutationFn: async (providerId: string) => {
+      await providersApi.delete(providerId, appType);
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["providers", appType] });
+      await providersApi.updateTrayMenu();
+      toast.success(
+        t("notifications.deleteSuccess", {
+          defaultValue: "供应商已删除",
+        })
+      );
+    },
+    onError: (error: Error) => {
+      toast.error(
+        t("notifications.deleteFailed", {
+          defaultValue: "删除供应商失败: {{error}}",
+          error: error.message,
+        })
+      );
+    },
+  });
+};
+
+export const useSwitchProviderMutation = (appType: AppType) => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation({
+    mutationFn: async (providerId: string) => {
+      return await providersApi.switch(providerId, appType);
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["providers", appType] });
+      await providersApi.updateTrayMenu();
+      toast.success(
+        t("notifications.switchSuccess", {
+          defaultValue: "切换供应商成功",
+          appName: t(`apps.${appType}`, { defaultValue: appType }),
+        })
+      );
+    },
+    onError: (error: Error) => {
+      toast.error(
+        t("notifications.switchFailed", {
+          defaultValue: "切换供应商失败: {{error}}",
+          error: error.message,
+        })
+      );
+    },
+  });
+};
+
+export const useSaveSettingsMutation = () => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation({
+    mutationFn: async (settings: Settings) => {
+      await settingsApi.save(settings);
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["settings"] });
+      toast.success(
+        t("notifications.settingsSaved", {
+          defaultValue: "设置已保存",
+        })
+      );
+    },
+    onError: (error: Error) => {
+      toast.error(
+        t("notifications.settingsSaveFailed", {
+          defaultValue: "保存设置失败: {{error}}",
+          error: error.message,
+        })
+      );
+    },
+  });
+};
--- a/src/lib/query/queries.ts
+++ b/src/lib/query/queries.ts
@@ -0,0 +1,79 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { providersApi, settingsApi, type AppType } from "@/lib/api";
+import type { Provider, Settings } from "@/types";
+
+const sortProviders = (
+  providers: Record<string, Provider>
+): Record<string, Provider> => {
+  const sortedEntries = Object.values(providers)
+    .sort((a, b) => {
+      const indexA = a.sortIndex ?? Number.MAX_SAFE_INTEGER;
+      const indexB = b.sortIndex ?? Number.MAX_SAFE_INTEGER;
+      if (indexA !== indexB) {
+        return indexA - indexB;
+      }
+
+      const timeA = a.createdAt ?? 0;
+      const timeB = b.createdAt ?? 0;
+      if (timeA === timeB) {
+        return a.name.localeCompare(b.name, "zh-CN");
+      }
+      return timeA - timeB;
+    })
+    .map((provider) => [provider.id, provider] as const);
+
+  return Object.fromEntries(sortedEntries);
+};
+
+export interface ProvidersQueryData {
+  providers: Record<string, Provider>;
+  currentProviderId: string;
+}
+
+export const useProvidersQuery = (
+  appType: AppType
+): UseQueryResult<ProvidersQueryData> => {
+  return useQuery({
+    queryKey: ["providers", appType],
+    queryFn: async () => {
+      let providers: Record<string, Provider> = {};
+      let currentProviderId = "";
+
+      try {
+        providers = await providersApi.getAll(appType);
+      } catch (error) {
+        console.error("获取供应商列表失败:", error);
+      }
+
+      try {
+        currentProviderId = await providersApi.getCurrent(appType);
+      } catch (error) {
+        console.error("获取当前供应商失败:", error);
+      }
+
+      if (Object.keys(providers).length === 0) {
+        try {
+          const success = await providersApi.importDefault(appType);
+          if (success) {
+            providers = await providersApi.getAll(appType);
+            currentProviderId = await providersApi.getCurrent(appType);
+          }
+        } catch (error) {
+          console.error("导入默认配置失败:", error);
+        }
+      }
+
+      return {
+        providers: sortProviders(providers),
+        currentProviderId,
+      };
+    },
+  });
+};
+
+export const useSettingsQuery = (): UseQueryResult<Settings> => {
+  return useQuery({
+    queryKey: ["settings"],
+    queryFn: async () => settingsApi.get(),
+  });
+};
--- a/src/lib/query/queryClient.ts
+++ b/src/lib/query/queryClient.ts
@@ -0,0 +1,14 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnWindowFocus: false,
+      staleTime: 1000 * 60 * 5,
+    },
+    mutations: {
+      retry: false,
+    },
+  },
+});
--- a/src/lib/schemas/mcp.ts
+++ b/src/lib/schemas/mcp.ts
@@ -0,0 +1,24 @@
+import { z } from "zod";
+
+const mcpServerSpecSchema = z.object({
+  type: z.enum(["stdio", "http"]).optional(),
+  command: z.string().trim().min(1, "请输入可执行命令").optional(),
+  args: z.array(z.string()).optional(),
+  env: z.record(z.string(), z.string()).optional(),
+  cwd: z.string().optional(),
+  url: z.string().url("请输入有效的 URL").optional(),
+  headers: z.record(z.string(), z.string()).optional(),
+});
+
+export const mcpServerSchema = z.object({
+  id: z.string().min(1, "请输入服务器 ID"),
+  name: z.string().optional(),
+  description: z.string().optional(),
+  tags: z.array(z.string()).optional(),
+  homepage: z.string().url().optional(),
+  docs: z.string().url().optional(),
+  enabled: z.boolean().optional(),
+  server: mcpServerSpecSchema,
+});
+
+export type McpServerFormData = z.infer<typeof mcpServerSchema>;
--- a/src/lib/schemas/provider.ts
+++ b/src/lib/schemas/provider.ts
@@ -0,0 +1,23 @@
+import { z } from "zod";
+
+export const providerSchema = z.object({
+  name: z.string().min(1, "请填写供应商名称"),
+  websiteUrl: z
+    .string()
+    .url("请输入有效的网址")
+    .optional()
+    .or(z.literal("")),
+  settingsConfig: z
+    .string()
+    .min(1, "请填写配置内容")
+    .refine((value) => {
+      try {
+        JSON.parse(value);
+        return true;
+      } catch {
+        return false;
+      }
+    }, "配置 JSON 格式错误"),
+});
+
+export type ProviderFormData = z.infer<typeof providerSchema>;
--- a/src/lib/schemas/settings.ts
+++ b/src/lib/schemas/settings.ts
@@ -0,0 +1,21 @@
+import { z } from "zod";
+
+const directorySchema = z
+  .string()
+  .trim()
+  .min(1, "路径不能为空")
+  .optional()
+  .or(z.literal(""));
+
+export const settingsSchema = z.object({
+  showInTray: z.boolean(),
+  minimizeToTrayOnClose: z.boolean(),
+  enableClaudePluginIntegration: z.boolean().optional(),
+  claudeConfigDir: directorySchema.nullable().optional(),
+  codexConfigDir: directorySchema.nullable().optional(),
+  language: z.enum(["en", "zh"]).optional(),
+  customEndpointsClaude: z.record(z.string(), z.unknown()).optional(),
+  customEndpointsCodex: z.record(z.string(), z.unknown()).optional(),
+});
+
+export type SettingsFormData = z.infer<typeof settingsSchema>;
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,7 +13,11 @@
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
  },
  "include": ["src/**/*"],
  "references": [{ "path": "./tsconfig.node.json" }]
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -1,3 +1,4 @@
+import path from "node:path";
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
@@ -14,6 +15,11 @@ export default defineConfig({
    port: 3000,
    strictPort: true,
  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
  clearScreen: false,
  envPrefix: ["VITE_", "TAURI_"],
 });