重构创建Scheme功能支持多种Scheme类型选择。

src/models.ts

@@ -27,6 +27,16 @@ export type ColorDescription = {
 };
 
 export type SchemeType = 'q_scheme' | 'swatch_scheme' | 'material_2' | 'material_3';
+export type SchemeTypeOption = {
+  label: string;
+  value: SchemeType;
+};
+export const SchemeTypeOptions: SchemeTypeOption[] = [
+  { label: 'Q Scheme', value: 'q_scheme' },
+  { label: 'Swatch Scheme', value: 'swatch_scheme' },
+  { label: 'Material Design 2 Scheme', value: 'material_2' },
+  { label: 'Material Design 3 Scheme', value: 'material_3' },
+];
 export type SchemeContent<SchemeStorage> = {
   id: string;
   name: string;

src/pages/NewScheme.module.css

@@ -25,4 +25,7 @@
       }
     }
   }
+  .custom_segment {
+    font-size: var(--font-size-s);
+  }
 }

src/pages/NewScheme.tsx

@@ -1,13 +1,16 @@
 import cx from 'clsx';
 import { isEmpty, isNil } from 'lodash-es';
-import { useActionState } from 'react';
+import { useActionState, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { VSegmentedControl } from '../components/VSegmentedControl';
+import { SchemeTypeOption, SchemeTypeOptions } from '../models';
 import { useCreateScheme } from '../stores/schemes';
 import styles from './NewScheme.module.css';
 
 export function NewScheme() {
   const createScheme = useCreateScheme();
   const navigate = useNavigate();
+  const [schemeType, setSchemeType] = useState<SchemeTypeOption['value']>('q_scheme');
   const [errors, formAction] = useActionState((prevState, formData) => {
     try {
       const name = formData.get('name') as string;
@@ -15,7 +18,8 @@ export function NewScheme() {
         throw { name: 'Name is required' };
       }
       const description = (formData.get('description') ?? null) as string | null;
-      const newId = createScheme(name, description);
+      const schemeType = (formData.get('type') ?? 'q_scheme') as SchemeTypeOption['value'];
+      const newId = createScheme(name, schemeType, description);
       navigate(`../${newId}`);
     } catch (error) {
       return error;
@@ -25,6 +29,18 @@ export function NewScheme() {
 
   return (
     <form action={formAction} className={styles.create_scheme_form_layout}>
+      <div className={styles.form_row}>
+        <label>
+          Scheme Type <span>*</span>
+        </label>
+        <VSegmentedControl
+          options={SchemeTypeOptions}
+          extendClassName={styles.custom_segment}
+          value={schemeType}
+          onChange={setSchemeType}
+        />
+        <input type="hidden" name="type" value={schemeType} />
+      </div>
       <div className={styles.form_row}>
         <label>
           Name <span>*</span>

src/stores/schemes.ts

@@ -74,7 +74,7 @@ export function useCreateScheme(): (
 ) => string {
   const updateSchemes = useSetAtom(schemesAtom);
   const createSchemeAction = useCallback(
-    (name: string, description?: string) => {
+    (name: string, type: SchemeType, description?: string) => {
       const newId = v4();
       updateSchemes((prev) => [
         ...prev,
@@ -112,7 +112,7 @@ export function useUpdateScheme(
             }
             return acc;
           },
-          [] as SchemeSet[],
+          [] as SchemeContent<SchemeStorage>[],
         ),
       );
     },