feat: complete stage 1 infrastructure

src/lib/query/index.ts

@@ -0,0 +1,3 @@
+export * from "./queryClient";
+export * from "./queries";
+export * from "./mutations";

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,
+        })
+      );
+    },
+  });
+};

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(),
+  });
+};

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,
+    },
+  },
+});