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

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>