feat: build account dashboard and settings workspace

src/store/settings.ts

@@ -0,0 +1,127 @@
+import { createStore } from "zustand/vanilla";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+export type HostOption = {
+  label: string;
+  host: string;
+  source: "local" | "remote";
+};
+
+type CacheSection = "accounts" | "records" | "logs";
+type DensityMode = "comfortable" | "compact";
+
+type SettingsState = {
+  persistAccounts: boolean;
+  persistRecords: boolean;
+  persistLogs: boolean;
+  autoScrollLogs: boolean;
+  showLogTimestamps: boolean;
+  densityMode: DensityMode;
+  logFontSize: number;
+  sidebarWidth: number;
+  localHosts: HostOption[];
+  remoteHosts: HostOption[];
+  setPersistSection: (section: CacheSection, value: boolean) => void;
+  clearPersistedSection: (section: CacheSection) => void;
+  clearAllPersistedData: () => void;
+  setAutoScrollLogs: (value: boolean) => void;
+  setShowLogTimestamps: (value: boolean) => void;
+  setDensityMode: (value: DensityMode) => void;
+  setLogFontSize: (value: number) => void;
+  setSidebarWidth: (value: number) => void;
+  addLocalHost: (host: Omit<HostOption, "source">) => void;
+  removeLocalHost: (host: string) => void;
+  setRemoteHosts: (hosts: Omit<HostOption, "source">[]) => void;
+};
+
+const accountStorageKey = "account-storage";
+
+const uniqueHosts = (hosts: HostOption[]) => {
+  const map = new Map<string, HostOption>();
+
+  for (const item of hosts) {
+    if (!map.has(item.host)) {
+      map.set(item.host, item);
+    }
+  }
+
+  return Array.from(map.values());
+};
+
+export const getMergedHosts = (
+  localHosts: HostOption[],
+  remoteHosts: HostOption[],
+) => {
+  return uniqueHosts([...localHosts, ...remoteHosts]);
+};
+
+export const settingsStore = createStore<SettingsState>()(
+  persist(
+    (set, get) => ({
+      persistAccounts: true,
+      persistRecords: true,
+      persistLogs: true,
+      autoScrollLogs: true,
+      showLogTimestamps: false,
+      densityMode: "comfortable",
+      logFontSize: 12,
+      sidebarWidth: 320,
+      localHosts: [
+        { label: "默认站点", host: "cqcst.leykeji.com", source: "local" },
+      ],
+      remoteHosts: [],
+      setPersistSection: (section, value) => {
+        if (section === "accounts") set({ persistAccounts: value });
+        if (section === "records") set({ persistRecords: value });
+        if (section === "logs") set({ persistLogs: value });
+      },
+      clearPersistedSection: (section) => {
+        if (section === "accounts") {
+          localStorage.removeItem(accountStorageKey);
+        }
+
+        if (section === "records") {
+          set({ persistRecords: false });
+          queueMicrotask(() => set({ persistRecords: true }));
+        }
+
+        if (section === "logs") {
+          set({ persistLogs: false });
+          queueMicrotask(() => set({ persistLogs: true }));
+        }
+      },
+      clearAllPersistedData: () => {
+        localStorage.removeItem(accountStorageKey);
+        get().clearPersistedSection("records");
+        get().clearPersistedSection("logs");
+      },
+      setAutoScrollLogs: (value) => set({ autoScrollLogs: value }),
+      setShowLogTimestamps: (value) => set({ showLogTimestamps: value }),
+      setDensityMode: (value) => set({ densityMode: value }),
+      setLogFontSize: (value) => set({ logFontSize: value }),
+      setSidebarWidth: (value) => set({ sidebarWidth: value }),
+      addLocalHost: (host) =>
+        set((state) => ({
+          localHosts: uniqueHosts([
+            { ...host, source: "local" },
+            ...state.localHosts,
+            ...state.remoteHosts,
+          ]).filter((item) => item.source === "local"),
+        })),
+      removeLocalHost: (host) =>
+        set((state) => ({
+          localHosts: state.localHosts.filter((item) => item.host !== host),
+        })),
+      setRemoteHosts: (hosts) =>
+        set({
+          remoteHosts: uniqueHosts(
+            hosts.map((item) => ({ ...item, source: "remote" as const })),
+          ),
+        }),
+    }),
+    {
+      name: "settings-storage",
+      storage: createJSONStorage(() => localStorage),
+    },
+  ),
+);