fix: Adjust inner padding style in PageLayout component

- Updated the overflowY style to always be 'auto', ensuring consistent scrolling behavior. - Maintained conditional inner padding based on the styleState, enhancing layout responsiveness.
fix: Refine sider visibility and inner padding logic in StyleProvider component
2026-04-04 23:16:58 +00:00 · 2024-12-12 23:34:14 +08:00 · 2024-12-12 20:52:22 +08:00 · 2024-12-12 20:39:49 +08:00 · 2024-12-12 20:31:40 +08:00
5 changed files with 31 additions and 12 deletions
--- a/web/src/components/HeaderBar.js
+++ b/web/src/components/HeaderBar.js
@@ -124,11 +124,11 @@ const HeaderBar = () => {
              return (
                <div onClick={(e) => {
                  if (props.itemKey === 'home') {
-                    styleDispatch({ type: 'SET_INNER_PADDING', payload: true });
-                    styleDispatch({ type: 'SET_SIDER', payload: true });
-                  } else {
                    styleDispatch({ type: 'SET_INNER_PADDING', payload: false });
                    styleDispatch({ type: 'SET_SIDER', payload: false });
+                  } else {
+                    styleDispatch({ type: 'SET_INNER_PADDING', payload: true });
+                    styleDispatch({ type: 'SET_SIDER', payload: true });
                  }
                }}>
                  <Link
@@ -148,12 +148,12 @@ const HeaderBar = () => {
              logo: (
                <>
                  {
-                    styleState.showSider ?
+                    !styleState.showSider ?
                      <Button icon={<IconMenu />} theme="light" aria-label="展开侧边栏" onClick={
-                        () => styleDispatch({ type: 'SET_SIDER', payload: false })
+                        () => styleDispatch({ type: 'SET_SIDER', payload: true })
                      } />:
                      <Button icon={<IconIndentLeft />} theme="light" aria-label="关闭侧边栏" onClick={
-                        () => styleDispatch({ type: 'SET_SIDER', payload: true })
+                        () => styleDispatch({ type: 'SET_SIDER', payload: false })
                      } />
                  }
                </>
--- a/web/src/components/PageLayout.js
+++ b/web/src/components/PageLayout.js
@@ -19,11 +19,11 @@ const PageLayout = () => {
      </Header>
      <Layout style={{ flex: 1, overflow: 'hidden' }}>
        <Sider>
-          {styleState.showSider ? null : <SiderBar />}
+          {styleState.showSider ? <SiderBar /> : null}
        </Sider>
        <Layout>
          <Content
-            style={{ overflowY: styleState.shouldInnerPadding?'hidden':'auto', padding: styleState.shouldInnerPadding? '0': '24px' }}
+            style={{ overflowY: 'auto', padding: styleState.shouldInnerPadding? '24px': '0' }}
          >
            <App />
          </Content>
--- a/web/src/components/SiderBar.js
+++ b/web/src/components/SiderBar.js
@@ -274,9 +274,9 @@ const SiderBar = () => {
        items={headerButtons}
        onSelect={(key) => {
          if (key.itemKey.toString().startsWith('chat')) {
-            styleDispatch({ type: 'SET_INNER_PADDING', payload: true });
-          } else {
            styleDispatch({ type: 'SET_INNER_PADDING', payload: false });
+          } else {
+            styleDispatch({ type: 'SET_INNER_PADDING', payload: true });
          }
          setSelectedKeys([key.itemKey]);
        }}
--- a/web/src/context/Style/index.js
+++ b/web/src/context/Style/index.js
@@ -44,6 +44,25 @@ export const StyleProvider = ({ children }) => {

    updateIsMobile();

+    const updateShowSider = () => {
+      // check pathname
+      const pathname = window.location.pathname;
+      if (pathname === '' || pathname === '/' || pathname.includes('/home') || pathname.includes('/chat')) {
+        dispatch({ type: 'SET_SIDER', payload: false });
+        dispatch({ type: 'SET_INNER_PADDING', payload: false });
+      } else {
+        dispatch({ type: 'SET_SIDER', payload: true });
+        dispatch({ type: 'SET_INNER_PADDING', payload: true });
+      }
+
+      if (isMobile()) {
+        dispatch({ type: 'SET_SIDER', payload: false });
+      }
+    };
+
+    updateShowSider()
+
+
    // Optionally, add event listeners to handle window resize
    window.addEventListener('resize', updateIsMobile);

--- 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,
              }))}
            />
Author	SHA1	Message	Date
CalciumIon	2a6f3ad27f	fix: Adjust inner padding style in PageLayout component - Updated the overflowY style to always be 'auto', ensuring consistent scrolling behavior. - Maintained conditional inner padding based on the styleState, enhancing layout responsiveness.	2024-12-12 23:34:14 +08:00
CalciumIon	16599a900b	fix: Refine sider visibility and inner padding logic in StyleProvider component - Consolidated the logic for managing sider visibility and inner padding based on the current pathname, improving responsiveness to navigation changes. - Ensured that the sider is hidden on specific paths and adjusted inner padding accordingly, enhancing the user interface experience on both mobile and desktop views.	2024-12-12 20:52:22 +08:00
CalciumIon	d241e4fe29	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.	2024-12-12 20:39:49 +08:00
CalciumIon	e17f36e7b7	fix: Correct inner padding and sider visibility logic in HeaderBar, PageLayout, and SiderBar components - Updated the click handler in HeaderBar to toggle inner padding and sider visibility correctly based on the selected item. - Adjusted the conditional rendering of SiderBar in PageLayout to ensure it displays when the sider is shown. - Refined the inner padding logic in SiderBar to maintain consistent behavior when selecting items. - Introduced a new function in Style context to manage sider visibility based on the current pathname, enhancing responsiveness to navigation changes.	2024-12-12 20:31:40 +08:00