♻️ refactor(StyleContext): modernize context architecture and eliminate route transition flicker

## Breaking Changes
- Remove backward compatibility layer for old action types
- StyleContext is no longer exported, use useStyle hook instead

## Major Improvements
- **Architecture**: Replace useState with useReducer for complex state management
- **Performance**: Add debounced resize handling and batch updates via BATCH_UPDATE action
- **DX**: Export useStyle hook and styleActions for type-safe usage
- **Memory**: Use useMemo to cache context value and prevent unnecessary re-renders

## Bug Fixes
- **UI**: Eliminate padding flicker when navigating to /console/chat* and /console/playground routes
- **Logic**: Remove redundant localStorage operations and state synchronization

## Implementation Details
- Define ACTION_TYPES and ROUTE_PATTERNS constants for better maintainability
- Add comprehensive JSDoc documentation for all functions
- Extract custom hooks: useWindowResize, useRouteChange, useMobileSiderAutoHide
- Calculate shouldInnerPadding directly in PageLayout based on pathname to prevent async updates
- Integrate localStorage saving logic into SET_SIDER_COLLAPSED reducer case
- Remove SET_INNER_PADDING action as it's no longer needed

## Updated Components
- PageLayout.js: Direct padding calculation based on route
- HeaderBar.js: Use new useStyle hook and styleActions
- SiderBar.js: Remove redundant localStorage calls
- LogsTable.js: Remove unused StyleContext import
- Playground/index.js: Migrate to new API

## Performance Impact
- Reduced component re-renders through optimized context structure
- Eliminated unnecessary effect dependencies and state updates
- Improved route transition smoothness with synchronous padding calculation

web/src/pages/Playground/index.js

@@ -5,7 +5,7 @@ import { Layout, Toast, Modal } from '@douyinfe/semi-ui';
 
 // Context
 import { UserContext } from '../../context/User/index.js';
-import { StyleContext } from '../../context/Style/index.js';
+import { useStyle, styleActions } from '../../context/Style/index.js';
 
 // Utils and hooks
 import { getLogo } from '../../helpers/index.js';
@@ -60,10 +60,9 @@ const generateAvatarDataUrl = (username) => {
 const Playground = () => {
   const { t } = useTranslation();
   const [userState] = useContext(UserContext);
-  const [styleState, styleDispatch] = useContext(StyleContext);
+  const { state: styleState, dispatch: styleDispatch } = useStyle();
   const [searchParams] = useSearchParams();
 
-  // 使用自定义hooks
   const state = usePlaygroundState();
   const {
     inputs,
@@ -323,7 +322,7 @@ const Playground = () => {
     const handleResize = () => {
       const mobile = window.innerWidth < 768;
       if (styleState.isMobile !== mobile) {
-        styleDispatch({ type: 'SET_IS_MOBILE', payload: mobile });
+        styleDispatch(styleActions.setMobile(mobile));
       }
     };
 
@@ -363,7 +362,7 @@ const Playground = () => {
               flexShrink: 0,
               minWidth: styleState.isMobile ? '100%' : 320,
               maxWidth: styleState.isMobile ? '100%' : 320,
-              height: styleState.isMobile ? 'auto' : 'calc(100vh - 106px)',
+              height: styleState.isMobile ? 'auto' : 'calc(100vh - 64px)',
               overflow: 'auto',
               position: styleState.isMobile ? 'fixed' : 'relative',
               zIndex: styleState.isMobile ? 1000 : 1,
@@ -400,7 +399,7 @@ const Playground = () => {
         )}
 
         <Layout.Content className="relative flex-1 overflow-hidden">
-          <div className="sm:px-4 overflow-hidden flex flex-col lg:flex-row gap-2 sm:gap-4 h-[calc(100vh-106px)]">
+          <div className="overflow-hidden flex flex-col lg:flex-row h-[calc(100vh-64px)]">
             <div className="flex-1 flex flex-col">
               <ChatArea
                 chatRef={chatRef}