Przeglądaj źródła

refactor: Remove unnecessary transition styles and simplify sidebar state management

1808837298@qq.com 1 rok temu
rodzic
commit
627f95b034

+ 0 - 2
web/src/components/PageLayout.js

@@ -106,7 +106,6 @@ const PageLayout = () => {
             boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
             boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
             border: 'none',
             border: 'none',
             paddingRight: '0',
             paddingRight: '0',
-            transition: 'transform 0.3s ease',
             height: 'calc(100vh - 56px)',
             height: 'calc(100vh - 56px)',
           }}>
           }}>
             <SiderBar />
             <SiderBar />
@@ -126,7 +125,6 @@ const PageLayout = () => {
               WebkitOverflowScrolling: 'touch',
               WebkitOverflowScrolling: 'touch',
               padding: styleState.shouldInnerPadding? '24px': '0',
               padding: styleState.shouldInnerPadding? '24px': '0',
               position: 'relative',
               position: 'relative',
-              paddingBottom: styleState.isMobile ? '80px' : '0' // 移动端底部额外内边距
             }}
             }}
           >
           >
             <App />
             <App />

+ 8 - 9
web/src/components/SiderBar.js

@@ -39,7 +39,6 @@ import Text from '@douyinfe/semi-ui/lib/es/typography/text';
 const navItemStyle = {
 const navItemStyle = {
   borderRadius: '6px',
   borderRadius: '6px',
   margin: '4px 8px',
   margin: '4px 8px',
-  transition: 'all 0.3s ease'
 };
 };
 
 
 // 自定义侧边栏按钮悬停样式
 // 自定义侧边栏按钮悬停样式
@@ -60,7 +59,6 @@ const iconStyle = (itemKey, selectedKeys) => {
   return {
   return {
     fontSize: '18px',
     fontSize: '18px',
     color: selectedKeys.includes(itemKey) ? 'var(--semi-color-primary)' : 'var(--semi-color-text-2)',
     color: selectedKeys.includes(itemKey) ? 'var(--semi-color-primary)' : 'var(--semi-color-text-2)',
-    transition: 'all 0.3s ease'
   };
   };
 };
 };
 
 
@@ -81,7 +79,7 @@ const SiderBar = () => {
 
 
   // 预先计算所有可能的图标样式
   // 预先计算所有可能的图标样式
   const allItemKeys = useMemo(() => {
   const allItemKeys = useMemo(() => {
-    const keys = ['home', 'channel', 'token', 'redemption', 'topup', 'user', 'log', 'midjourney', 
+    const keys = ['home', 'channel', 'token', 'redemption', 'topup', 'user', 'log', 'midjourney',
                  'setting', 'about', 'chat', 'detail', 'pricing', 'task', 'playground', 'personal'];
                  'setting', 'about', 'chat', 'detail', 'pricing', 'task', 'playground', 'personal'];
     // 添加聊天项的keys
     // 添加聊天项的keys
     for (let i = 0; i < chatItems.length; i++) {
     for (let i = 0; i < chatItems.length; i++) {
@@ -242,13 +240,15 @@ const SiderBar = () => {
   useEffect(() => {
   useEffect(() => {
     const currentPath = location.pathname;
     const currentPath = location.pathname;
     const matchingKey = Object.keys(routerMap).find(key => routerMap[key] === currentPath);
     const matchingKey = Object.keys(routerMap).find(key => routerMap[key] === currentPath);
-    
+
     if (matchingKey) {
     if (matchingKey) {
       setSelectedKeys([matchingKey]);
       setSelectedKeys([matchingKey]);
     } else if (currentPath.startsWith('/chat/')) {
     } else if (currentPath.startsWith('/chat/')) {
       setSelectedKeys(['chat']);
       setSelectedKeys(['chat']);
     }
     }
+  }, [location.pathname]);
 
 
+  useEffect(() => {
     let chats = localStorage.getItem('chats');
     let chats = localStorage.getItem('chats');
     if (chats) {
     if (chats) {
       // console.log(chats);
       // console.log(chats);
@@ -274,8 +274,8 @@ const SiderBar = () => {
       }
       }
     }
     }
 
 
-    setIsCollapsed(localStorage.getItem('default_collapse_sidebar') === 'true');
-  }, [location.pathname]);
+    setIsCollapsed(styleState.siderCollapsed);
+  })
 
 
   // Custom divider style
   // Custom divider style
   const dividerStyle = {
   const dividerStyle = {
@@ -303,7 +303,6 @@ const SiderBar = () => {
           borderRight: '1px solid var(--semi-color-border)',
           borderRight: '1px solid var(--semi-color-border)',
           background: 'var(--semi-color-bg-1)',
           background: 'var(--semi-color-bg-1)',
           borderRadius: styleState.isMobile ? '0' : '0 8px 8px 0',
           borderRadius: styleState.isMobile ? '0' : '0 8px 8px 0',
-          transition: 'all 0.3s ease',
           position: 'relative',
           position: 'relative',
           zIndex: 95,
           zIndex: 95,
           height: '100%',
           height: '100%',
@@ -324,13 +323,13 @@ const SiderBar = () => {
           if (selectedKeys.length === 0) {
           if (selectedKeys.length === 0) {
             const currentPath = location.pathname;
             const currentPath = location.pathname;
             const matchingKey = Object.keys(routerMap).find(key => routerMap[key] === currentPath);
             const matchingKey = Object.keys(routerMap).find(key => routerMap[key] === currentPath);
-            
+
             if (matchingKey) {
             if (matchingKey) {
               setSelectedKeys([matchingKey]);
               setSelectedKeys([matchingKey]);
             } else if (currentPath.startsWith('/chat/')) {
             } else if (currentPath.startsWith('/chat/')) {
               setSelectedKeys(['chat']);
               setSelectedKeys(['chat']);
             } else {
             } else {
-              setSelectedKeys(['detail']); // 默认选中首页
+              setSelectedKeys([]); // 默认选中首页
             }
             }
           }
           }
         }}
         }}