From d241e4fe29e94f46c7e6d1c92b52e344b8386416 Mon Sep 17 00:00:00 2001
From: CalciumIon <1808837298@qq.com>
Date: Thu, 12 Dec 2024 20:39:49 +0800
Subject: [PATCH] fix: Update label truncation logic in Playground and adjust
 sider visibility in HeaderBar

- Modified the group label truncation in the Playground component to shorten labels exceeding 16 characters for better mobile display.
- Corrected the conditional rendering logic in the HeaderBar to toggle the sider visibility based on its current state, enhancing user interface responsiveness.
---
 web/src/components/HeaderBar.js        | 2 +-
 web/src/pages/Playground/Playground.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/components/HeaderBar.js b/web/src/components/HeaderBar.js
index 1ddf24e9..e15f7187 100644
--- a/web/src/components/HeaderBar.js
+++ b/web/src/components/HeaderBar.js
@@ -148,7 +148,7 @@ const HeaderBar = () => {
               logo: (
                 <>
                   {
-                    styleState.showSider ?
+                    !styleState.showSider ?
                       <Button icon={<IconMenu />} theme="light" aria-label="展开侧边栏" onClick={
                         () => styleDispatch({ type: 'SET_SIDER', payload: true })
                       } />:
diff --git a/web/src/pages/Playground/Playground.js b/web/src/pages/Playground/Playground.js
index 4f708d26..12c3d572 100644
--- a/web/src/pages/Playground/Playground.js
+++ b/web/src/pages/Playground/Playground.js
@@ -328,8 +328,8 @@ const Playground = () => {
               autoComplete='new-password'
               optionList={groups.map((group) => ({
                 ...group,
-                label: styleState.isMobile && group.label.length > 18
-                  ? group.label.substring(0, 18) + '...'
+                label: styleState.isMobile && group.label.length > 16
+                  ? group.label.substring(0, 16) + '...'
                   : group.label,
               }))}
             />