调整Scheme内容页面布局以及测试标题的编辑。

src/pages/SchemeDetail.module.css

@@ -0,0 +1,5 @@
+@layer pages {
+  .scheme_detail_layout {
+    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 8);
+  }
+}

src/pages/SchemeDetail.tsx

@@ -1,12 +1,25 @@
-import { isNil } from 'lodash-es';
+import { isNil, set } from 'lodash-es';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { useScheme } from '../stores/schemes';
+import { EditableTitle } from '../components/EditableTitle';
+import { useScheme, useUpdateScheme } from '../stores/schemes';
+import styles from './SchemeDetail.module.css';
 
 export function SchemeDetail() {
   const { id } = useParams();
   const scheme = useScheme(id);
   const navigate = useNavigate();
+  const updateScheme = useUpdateScheme(id);
+
+  const updateTitle = useCallback(
+    (newTitle: string) => {
+      updateScheme((prev) => {
+        set(prev, 'name', newTitle);
+        return prev;
+      });
+    },
+    [id],
+  );
 
   useEffect(() => {
     if (isNil(scheme)) {
@@ -15,8 +28,8 @@ export function SchemeDetail() {
   }, [scheme, navigate]);
 
   return (
-    <div>
+    <div className={styles.scheme_detail_layout}>
-      <h3>{scheme?.name}</h3>
+      <EditableTitle title={scheme?.name} onChange={updateTitle} />
       <p>{scheme?.description}</p>
     </div>
   );