From bb0a6099ba02b7380b08d42152f7241bb901bf6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Fri, 27 Dec 2024 14:53:54 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4Scheme=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80=E4=BB=A5=E5=8F=8A=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95=E6=A0=87=E9=A2=98=E7=9A=84=E7=BC=96=E8=BE=91=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/SchemeDetail.module.css |  5 +++++
 src/pages/SchemeDetail.tsx        | 23 ++++++++++++++++++-----
 2 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/SchemeDetail.module.css

diff --git a/src/pages/SchemeDetail.module.css b/src/pages/SchemeDetail.module.css
new file mode 100644
index 0000000..5b72152
--- /dev/null
+++ b/src/pages/SchemeDetail.module.css
@@ -0,0 +1,5 @@
+@layer pages {
+  .scheme_detail_layout {
+    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 8);
+  }
+}
diff --git a/src/pages/SchemeDetail.tsx b/src/pages/SchemeDetail.tsx
index e0be4a3..60d0249 100644
--- a/src/pages/SchemeDetail.tsx
+++ b/src/pages/SchemeDetail.tsx
@@ -1,12 +1,25 @@
-import { isNil } from 'lodash-es';
-import { useEffect } from 'react';
+import { isNil, set } from 'lodash-es';
+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>
-      <h3>{scheme?.name}</h3>
+    <div className={styles.scheme_detail_layout}>
+      <EditableTitle title={scheme?.name} onChange={updateTitle} />
       <p>{scheme?.description}</p>
     </div>
   );