更新前端Scheme类型定义。

src/models.ts

@@ -1,3 +1,8 @@
+import { MaterialDesign2SchemeStorage } from './material-2-scheme';
+import { MaterialDesign3SchemeStorage } from './material-3-scheme';
+import { QSchemeStorage } from './q-scheme';
+import { SwatchSchemeStorage } from './swatch_scheme';
+
 export type Option = {
   label: string;
   value: string | number | null;
@@ -35,3 +40,9 @@ export type ColorShifting = {
   chroma: number;
   lightness: number;
 };
+
+export type SchemeStorage =
+  | QSchemeStorage
+  | SwatchSchemeStorage
+  | MaterialDesign2SchemeStorage
+  | MaterialDesign3SchemeStorage;

src/stores/schemes.ts

@@ -4,6 +4,7 @@ import { atomWithStorage } from 'jotai/utils';
 import { isEqual, reduce } from 'lodash-es';
 import { useCallback, useMemo } from 'react';
 import { v4 } from 'uuid';
+import { SchemeContent, SchemeStorage, SchemeType } from '../models';
 
 type ColorSet = {
   normal?: string | null;
@@ -38,10 +39,10 @@ export type SchemeSet = {
   darkScheme: Scheme;
 };
 
-const schemesAtom = atomWithStorage<SchemeSet[]>('schemes', []);
+const schemesAtom = atomWithStorage<SchemeContent<SchemeStorage>[]>('schemes', []);
 export const activeSchemeAtom = atomWithStorage<string | null>('activeScheme', null);
 
-export function useSchemeList(): Pick<SchemeSet, 'id' | 'name' | 'createdAt'>[] {
+export function useSchemeList(): Pick<SchemeContent<SchemeStorage>, 'id' | 'name' | 'createdAt'>[] {
   const schemes = useAtomValue(schemesAtom);
   const sortedSchemes = useMemo(
     () =>
@@ -54,19 +55,23 @@ export function useSchemeList(): Pick<SchemeSet, 'id' | 'name' | 'createdAt'>[]
   return sortedSchemes;
 }
 
-export function useScheme(id: string): SchemeSet | null {
+export function useScheme(id: string): SchemeContent<SchemeStorage> | null {
   const schemes = useAtomValue(schemesAtom);
   const scheme = useMemo(() => schemes.find((s) => isEqual(id, s.id)) ?? null, [schemes, id]);
   return scheme;
 }
 
-export function useActiveScheme(): SchemeSet | null {
+export function useActiveScheme(): SchemeContent<SchemeStorage> | null {
   const activeSchemeId = useAtomValue(activeSchemeAtom);
   const activeScheme = useScheme(activeSchemeId ?? 'UNEXISTS');
   return activeScheme;
 }
 
-export function useCreateScheme(): (name: string, description?: string) => string {
+export function useCreateScheme(): (
+  name: string,
+  type: SchemeType,
+  description?: string,
+) => string {
   const updateSchemes = useSetAtom(schemesAtom);
   const createSchemeAction = useCallback(
     (name: string, description?: string) => {
@@ -78,8 +83,8 @@ export function useCreateScheme(): (name: string, description?: string) => strin
           name,
           createdAt: dayjs().toISOString(),
           description: description ?? null,
-          lightScheme: {},
+          type,
-          darkScheme: {},
+          schemeStorage: {},
         },
       ]);
       return newId;
@@ -90,10 +95,12 @@ export function useCreateScheme(): (name: string, description?: string) => strin
   return createSchemeAction;
 }
 
-export function useUpdateScheme(id: string): (updater: (prev: SchemeSet) => SchemeSet) => void {
+export function useUpdateScheme(
+  id: string,
+): (updater: (prev: SchemeContent<SchemeStorage>) => SchemeContent<SchemeStorage>) => void {
   const updateSchemes = useSetAtom(schemesAtom);
   const updateAction = useCallback(
-    (updater: (prev: SchemeSet) => SchemeSet) => {
+    (updater: (prev: SchemeContent<SchemeStorage>) => SchemeContent<SchemeStorage>) => {
       updateSchemes((prev) =>
         reduce(
           prev,