♻️ 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
This commit is contained in:
Apple\Apple
2025-06-02 04:16:48 +08:00
parent 90d4e0e41c
commit cc3f3cf033
15 changed files with 261 additions and 190 deletions

View File

@@ -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({