♻️ 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/components/playground/ChatArea.js

@@ -38,8 +38,9 @@ const ChatArea = ({
 
   return (
     <Card
-      className="!rounded-2xl h-full"
-      bodyStyle={{ padding: 0, height: 'calc(100vh - 108px)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}
+      className="h-full"
+      bordered={false}
+      bodyStyle={{ padding: 0, height: 'calc(100vh - 66px)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}
     >
       {/* 聊天头部 */}
       {styleState.isMobile ? (

web/src/components/playground/ConfigManager.js

@@ -217,8 +217,7 @@ const ConfigManager = ({
           theme="borderless"
           type="danger"
           onClick={handleReset}
-          className="!rounded-lg !text-xs !h-7 !px-2"
-          style={{ minWidth: 'auto' }}
+          className="!rounded-full !text-xs !px-2"
         />
       </div>
 

web/src/components/playground/DebugPanel.js

@@ -85,7 +85,8 @@ const DebugPanel = ({
 
   return (
     <Card
-      className="!rounded-2xl h-full flex flex-col"
+      className="h-full flex flex-col"
+      bordered={false}
       bodyStyle={{
         padding: styleState.isMobile ? '16px' : '24px',
         height: '100%',
@@ -159,7 +160,7 @@ const DebugPanel = ({
           <TabPane tab={
             <div className="flex items-center gap-2">
               <Zap size={16} />
-              {t('响应内容')}
+              {t('响应')}
             </div>
           } itemKey="response">
             <CodeViewer

web/src/components/playground/MessageContent.js

@@ -136,18 +136,10 @@ const MessageContent = ({
     !finalExtractedThinkingContent &&
     (!finalDisplayableFinalContent || finalDisplayableFinalContent.trim() === '')) {
     return (
-      <div className={`${className} flex items-center gap-2 sm:gap-4 p-4 sm:p-6 bg-gradient-to-r from-purple-50 to-indigo-50 rounded-xl sm:rounded-2xl`}>
-        <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center shadow-lg">
+      <div className={`${className} flex items-center gap-2 sm:gap-4 bg-gradient-to-r from-purple-50 to-indigo-50 rounded-xl sm:rounded-2xl`}>
+        <div className="w-4 h-4 rounded-full bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center shadow-lg">
           <Loader2 className="animate-spin text-white" size={styleState.isMobile ? 16 : 20} />
         </div>
-        <div className="flex flex-col">
-          <Typography.Text strong className="text-gray-800 text-sm sm:text-base">
-            {t('正在思考...')}
-          </Typography.Text>
-          <Typography.Text className="text-gray-500 text-xs sm:text-sm">
-            AI 正在分析您的问题
-          </Typography.Text>
-        </div>
       </div>
     );
   }

web/src/components/playground/SettingsPanel.js

@@ -54,7 +54,8 @@ const SettingsPanel = ({
 
   return (
     <Card
-      className={`!rounded-2xl h-full flex flex-col ${styleState.isMobile ? 'rounded-none border-none shadow-none' : ''}`}
+      className={`h-full flex flex-col ${styleState.isMobile ? 'rounded-none border-none shadow-none' : ''}`}
+      bordered={false}
       bodyStyle={{
         padding: styleState.isMobile ? '24px' : '24px 24px 16px 24px',
         height: '100%',