From a085bb7f3ff476554a198e5a37de5156654c0d28 Mon Sep 17 00:00:00 2001
From: dundun003 <liangshaojun@papegames.net>
Date: Tue, 10 Dec 2024 16:21:26 +0800
Subject: [PATCH 1/2] style(navigation): adjust collapse button layout to fix
 alignment issue #2406

---
 packages/semi-foundation/navigation/navigation.scss | 8 ++++++++
 packages/semi-ui/navigation/CollapseButton.tsx      | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/semi-foundation/navigation/navigation.scss b/packages/semi-foundation/navigation/navigation.scss
index 4679dcea8d..d366d886e5 100644
--- a/packages/semi-foundation/navigation/navigation.scss
+++ b/packages/semi-foundation/navigation/navigation.scss
@@ -389,6 +389,14 @@ $module: #{$prefix}-navigation;
         .#{$module}-collapse-btn {
             text-overflow: ellipsis;
             white-space: nowrap;
+            width: 100%;
+            display: flex;
+            &-inner {
+                flex: 1;
+                span{
+                    margin-right: auto;
+                }
+            }
         }
     }
 }
diff --git a/packages/semi-ui/navigation/CollapseButton.tsx b/packages/semi-ui/navigation/CollapseButton.tsx
index 11088f1771..82530d0943 100644
--- a/packages/semi-ui/navigation/CollapseButton.tsx
+++ b/packages/semi-ui/navigation/CollapseButton.tsx
@@ -40,7 +40,7 @@ export default function CollapseButton({ prefixCls, locale, collapseText, isColl
                     <Button {...(btnProps as any)} />
                 </Tooltip>
             ) : (
-                <Button {...(btnProps as any)}>{finalCollapseText}</Button>
+                <Button className={`${prefixCls}-collapse-btn-inner`} {...(btnProps as any)}>{finalCollapseText}</Button>
             )}
         </div>
     );

From ff51f2e391d63682d3cf953339820172157e2452 Mon Sep 17 00:00:00 2001
From: dundun003 <liangshaojun@papegames.net>
Date: Thu, 12 Dec 2024 12:19:54 +0800
Subject: [PATCH 2/2] feat(form/story): enhance form state display with
 improved readability and styling

---
 .../semi-ui/form/_story/Hook/hookDemo.jsx     | 43 ++++++++++++++++---
 1 file changed, 38 insertions(+), 5 deletions(-)

diff --git a/packages/semi-ui/form/_story/Hook/hookDemo.jsx b/packages/semi-ui/form/_story/Hook/hookDemo.jsx
index 82c9b7b9da..cb7f4830fb 100644
--- a/packages/semi-ui/form/_story/Hook/hookDemo.jsx
+++ b/packages/semi-ui/form/_story/Hook/hookDemo.jsx
@@ -59,7 +59,11 @@ const UseFormApiDemo = () => {
 };
 
 const CustomStringify = values => {
-    return JSON.stringify(values, (k, v) => (v === undefined ? '__undefined' : v)).replace(
+    return JSON.stringify(
+        values, 
+        (k, v) => (v === undefined ? '__undefined' : v), 
+        2
+    ).replace(
         '"__undefined"',
         'undefined'
     );
@@ -97,15 +101,44 @@ const ComponentUsingFormApi = () => {
     );
 };
 
+ 
 
+// const ComponentUsingFormState = () => {
+//     const formState = useFormState();
+//     return (
+//         <pre>
+//             <code style={{ wordBreak: 'break-all', width: 600, whiteSpace: 'normal' }}>{JSON.stringify(formState)}</code>
+//             {/* <code style={{wordBreak:'break-all', width: 600, whiteSpace: 'normal'}}>{CustomStringify(formState)}</code> */}
+//         </pre>
+//     );
+// };
 /** */
 const ComponentUsingFormState = () => {
     const formState = useFormState();
     return (
-        <pre>
-            <code style={{ wordBreak: 'break-all', width: 600, whiteSpace: 'normal' }}>{JSON.stringify(formState)}</code>
-            {/* <code style={{wordBreak:'break-all', width: 600, whiteSpace: 'normal'}}>{CustomStringify(formState)}</code> */}
-        </pre>
+        <div 
+            style={{
+                backgroundColor: '#f4f4f4',
+                borderRadius: '8px',
+                padding: '16px',
+                border: '1px solid #e0e0e0',
+                margin: '16px 0',
+            }}
+        >
+            <pre>
+                <code 
+                    style={{ 
+                        fontSize: '14px',
+                        lineHeight: '1.5',
+                        color: '#333',
+                        whiteSpace: 'pre-wrap',
+                        wordBreak: 'break-all'
+                    }}
+                >
+                    {JSON.stringify(formState, null, 2)}
+                </code>
+            </pre>
+        </div>
     );
 };