♻️ 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/Detail/index.js

@@ -6,7 +6,6 @@ import {
   Card,
   Form,
   Spin,
-  Typography,
   IconButton,
   Modal,
   Avatar,
@@ -40,17 +39,14 @@ import {
   modelToColor,
 } from '../../helpers/render';
 import { UserContext } from '../../context/User/index.js';
-import { StyleContext } from '../../context/Style/index.js';
 import { useTranslation } from 'react-i18next';
 
 const Detail = (props) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const { Text } = Typography;
   const formRef = useRef();
   let now = new Date();
   const [userState, userDispatch] = useContext(UserContext);
-  const [styleState, styleDispatch] = useContext(StyleContext);
   const [inputs, setInputs] = useState({
     username: '',
     token_name: '',

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}

web/src/pages/Setup/index.js

@@ -1,21 +1,13 @@
-import React, { useContext, useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import {
   Card,
-  Col,
-  Row,
   Form,
   Button,
   Typography,
-  Space,
-  RadioGroup,
-  Radio,
   Modal,
   Banner,
 } from '@douyinfe/semi-ui';
-import { API, showError, showNotice, timestamp2string } from '../../helpers';
-import { StatusContext } from '../../context/Status';
-import { marked } from 'marked';
-import { StyleContext } from '../../context/Style/index.js';
+import { API, showError, showNotice } from '../../helpers';
 import { useTranslation } from 'react-i18next';
 import {
   IconHelpCircle,
@@ -24,9 +16,7 @@ import {
 } from '@douyinfe/semi-icons';
 
 const Setup = () => {
-  const { t, i18n } = useTranslation();
-  const [statusState] = useContext(StatusContext);
-  const [styleState, styleDispatch] = useContext(StyleContext);
+  const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [selfUseModeInfoVisible, setUsageModeInfoVisible] = useState(false);
   const [setupStatus, setSetupStatus] = useState({