|
|
@@ -1,117 +1,227 @@
|
|
|
-// contexts/User/index.jsx
|
|
|
+// contexts/Style/index.js
|
|
|
|
|
|
-import React, { useState, useEffect, useCallback } from 'react';
|
|
|
+import React, { useReducer, useEffect, useMemo, createContext } from 'react';
|
|
|
import { useLocation } from 'react-router-dom';
|
|
|
import { isMobile as getIsMobile } from '../../helpers/index.js';
|
|
|
|
|
|
-export const StyleContext = React.createContext({
|
|
|
- dispatch: () => null,
|
|
|
-});
|
|
|
+// Action Types
|
|
|
+const ACTION_TYPES = {
|
|
|
+ TOGGLE_SIDER: 'TOGGLE_SIDER',
|
|
|
+ SET_SIDER: 'SET_SIDER',
|
|
|
+ SET_MOBILE: 'SET_MOBILE',
|
|
|
+ SET_SIDER_COLLAPSED: 'SET_SIDER_COLLAPSED',
|
|
|
+ BATCH_UPDATE: 'BATCH_UPDATE',
|
|
|
+};
|
|
|
|
|
|
-export const StyleProvider = ({ children }) => {
|
|
|
- const location = useLocation();
|
|
|
- const initialIsMobile = getIsMobile();
|
|
|
+// Constants
|
|
|
+const STORAGE_KEYS = {
|
|
|
+ SIDEBAR_COLLAPSED: 'default_collapse_sidebar',
|
|
|
+};
|
|
|
+
|
|
|
+const ROUTE_PATTERNS = {
|
|
|
+ CONSOLE: '/console',
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * 判断路径是否为控制台路由
|
|
|
+ * @param {string} pathname - 路由路径
|
|
|
+ * @returns {boolean} 是否为控制台路由
|
|
|
+ */
|
|
|
+const isConsoleRoute = (pathname) => {
|
|
|
+ return pathname === ROUTE_PATTERNS.CONSOLE ||
|
|
|
+ pathname.startsWith(ROUTE_PATTERNS.CONSOLE + '/');
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * 获取初始状态
|
|
|
+ * @param {string} pathname - 当前路由路径
|
|
|
+ * @returns {Object} 初始状态对象
|
|
|
+ */
|
|
|
+const getInitialState = (pathname) => {
|
|
|
+ const isMobile = getIsMobile();
|
|
|
+ const isConsole = isConsoleRoute(pathname);
|
|
|
+ const isCollapsed = localStorage.getItem(STORAGE_KEYS.SIDEBAR_COLLAPSED) === 'true';
|
|
|
+
|
|
|
+ return {
|
|
|
+ isMobile,
|
|
|
+ showSider: isConsole && !isMobile,
|
|
|
+ siderCollapsed: isCollapsed,
|
|
|
+ isManualSiderControl: false,
|
|
|
+ };
|
|
|
+};
|
|
|
|
|
|
- const initialPathname = location.pathname;
|
|
|
- let initialShowSiderValue = false;
|
|
|
- let initialInnerPaddingValue = false;
|
|
|
+/**
|
|
|
+ * Style reducer
|
|
|
+ * @param {Object} state - 当前状态
|
|
|
+ * @param {Object} action - action 对象
|
|
|
+ * @returns {Object} 新状态
|
|
|
+ */
|
|
|
+const styleReducer = (state, action) => {
|
|
|
+ switch (action.type) {
|
|
|
+ case ACTION_TYPES.TOGGLE_SIDER:
|
|
|
+ return {
|
|
|
+ ...state,
|
|
|
+ showSider: !state.showSider,
|
|
|
+ isManualSiderControl: true,
|
|
|
+ };
|
|
|
|
|
|
- if (initialPathname.includes('/console')) {
|
|
|
- initialShowSiderValue = !initialIsMobile;
|
|
|
- initialInnerPaddingValue = true;
|
|
|
+ case ACTION_TYPES.SET_SIDER:
|
|
|
+ return {
|
|
|
+ ...state,
|
|
|
+ showSider: action.payload,
|
|
|
+ isManualSiderControl: action.isManualControl ?? false,
|
|
|
+ };
|
|
|
+
|
|
|
+ case ACTION_TYPES.SET_MOBILE:
|
|
|
+ return {
|
|
|
+ ...state,
|
|
|
+ isMobile: action.payload,
|
|
|
+ };
|
|
|
+
|
|
|
+ case ACTION_TYPES.SET_SIDER_COLLAPSED:
|
|
|
+ // 自动保存到 localStorage
|
|
|
+ localStorage.setItem(STORAGE_KEYS.SIDEBAR_COLLAPSED, action.payload.toString());
|
|
|
+ return {
|
|
|
+ ...state,
|
|
|
+ siderCollapsed: action.payload,
|
|
|
+ };
|
|
|
+
|
|
|
+ case ACTION_TYPES.BATCH_UPDATE:
|
|
|
+ return {
|
|
|
+ ...state,
|
|
|
+ ...action.payload,
|
|
|
+ };
|
|
|
+
|
|
|
+ default:
|
|
|
+ return state;
|
|
|
}
|
|
|
+};
|
|
|
|
|
|
- const [state, setState] = useState({
|
|
|
- isMobile: initialIsMobile,
|
|
|
- showSider: initialShowSiderValue,
|
|
|
- siderCollapsed: false,
|
|
|
- shouldInnerPadding: initialInnerPaddingValue,
|
|
|
- manualSiderControl: false,
|
|
|
- });
|
|
|
-
|
|
|
- const dispatch = useCallback((action) => {
|
|
|
- if ('type' in action) {
|
|
|
- switch (action.type) {
|
|
|
- case 'TOGGLE_SIDER':
|
|
|
- setState((prev) => ({
|
|
|
- ...prev,
|
|
|
- showSider: !prev.showSider,
|
|
|
- manualSiderControl: true
|
|
|
- }));
|
|
|
- break;
|
|
|
- case 'SET_SIDER':
|
|
|
- setState((prev) => ({
|
|
|
- ...prev,
|
|
|
- showSider: action.payload,
|
|
|
- manualSiderControl: action.manual || false
|
|
|
- }));
|
|
|
- break;
|
|
|
- case 'SET_MOBILE':
|
|
|
- setState((prev) => ({ ...prev, isMobile: action.payload }));
|
|
|
- break;
|
|
|
- case 'SET_SIDER_COLLAPSED':
|
|
|
- setState((prev) => ({ ...prev, siderCollapsed: action.payload }));
|
|
|
- break;
|
|
|
- case 'SET_INNER_PADDING':
|
|
|
- setState((prev) => ({ ...prev, shouldInnerPadding: action.payload }));
|
|
|
- break;
|
|
|
- default:
|
|
|
- setState((prev) => ({ ...prev, ...action }));
|
|
|
- }
|
|
|
- } else {
|
|
|
- setState((prev) => ({ ...prev, ...action }));
|
|
|
- }
|
|
|
- }, []);
|
|
|
+// Context (内部使用，不导出)
|
|
|
+const StyleContext = createContext(null);
|
|
|
|
|
|
+/**
|
|
|
+ * 自定义 Hook - 处理窗口大小变化
|
|
|
+ * @param {Function} dispatch - dispatch 函数
|
|
|
+ * @param {Object} state - 当前状态
|
|
|
+ * @param {string} pathname - 当前路径
|
|
|
+ */
|
|
|
+const useWindowResize = (dispatch, state, pathname) => {
|
|
|
useEffect(() => {
|
|
|
- const updateMobileStatus = () => {
|
|
|
- const currentIsMobile = getIsMobile();
|
|
|
- if (!currentIsMobile &&
|
|
|
- (location.pathname === '/console' || location.pathname.startsWith('/console/'))) {
|
|
|
- dispatch({ type: 'SET_SIDER', payload: true, manual: false });
|
|
|
+ const handleResize = () => {
|
|
|
+ const isMobile = getIsMobile();
|
|
|
+ dispatch({ type: ACTION_TYPES.SET_MOBILE, payload: isMobile });
|
|
|
+
|
|
|
+ // 只有在非手动控制的情况下，才根据屏幕大小自动调整侧边栏
|
|
|
+ if (!state.isManualSiderControl && isConsoleRoute(pathname)) {
|
|
|
+ dispatch({
|
|
|
+ type: ACTION_TYPES.SET_SIDER,
|
|
|
+ payload: !isMobile,
|
|
|
+ isManualControl: false
|
|
|
+ });
|
|
|
}
|
|
|
- dispatch({ type: 'SET_MOBILE', payload: currentIsMobile });
|
|
|
};
|
|
|
- window.addEventListener('resize', updateMobileStatus);
|
|
|
- return () => window.removeEventListener('resize', updateMobileStatus);
|
|
|
- }, [dispatch, location.pathname]);
|
|
|
|
|
|
+ let timeoutId;
|
|
|
+ const debouncedResize = () => {
|
|
|
+ clearTimeout(timeoutId);
|
|
|
+ timeoutId = setTimeout(handleResize, 150);
|
|
|
+ };
|
|
|
+
|
|
|
+ window.addEventListener('resize', debouncedResize);
|
|
|
+ return () => {
|
|
|
+ window.removeEventListener('resize', debouncedResize);
|
|
|
+ clearTimeout(timeoutId);
|
|
|
+ };
|
|
|
+ }, [dispatch, state.isManualSiderControl, pathname]);
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * 自定义 Hook - 处理路由变化
|
|
|
+ * @param {Function} dispatch - dispatch 函数
|
|
|
+ * @param {string} pathname - 当前路径
|
|
|
+ */
|
|
|
+const useRouteChange = (dispatch, pathname) => {
|
|
|
useEffect(() => {
|
|
|
- if (state.isMobile && state.showSider && !state.manualSiderControl) {
|
|
|
- dispatch({ type: 'SET_SIDER', payload: false });
|
|
|
- }
|
|
|
- }, [state.isMobile, state.showSider, state.manualSiderControl, dispatch]);
|
|
|
+ const isMobile = getIsMobile();
|
|
|
+ const isConsole = isConsoleRoute(pathname);
|
|
|
+
|
|
|
+ dispatch({
|
|
|
+ type: ACTION_TYPES.BATCH_UPDATE,
|
|
|
+ payload: {
|
|
|
+ showSider: isConsole && !isMobile,
|
|
|
+ isManualSiderControl: false,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }, [pathname, dispatch]);
|
|
|
+};
|
|
|
|
|
|
+/**
|
|
|
+ * 自定义 Hook - 处理移动设备侧边栏自动收起
|
|
|
+ * @param {Object} state - 当前状态
|
|
|
+ * @param {Function} dispatch - dispatch 函数
|
|
|
+ */
|
|
|
+const useMobileSiderAutoHide = (state, dispatch) => {
|
|
|
useEffect(() => {
|
|
|
- const currentPathname = location.pathname;
|
|
|
- const currentlyMobile = getIsMobile();
|
|
|
-
|
|
|
- if (currentPathname === '/console' || currentPathname.startsWith('/console/')) {
|
|
|
- dispatch({
|
|
|
- type: 'SET_SIDER',
|
|
|
- payload: !currentlyMobile,
|
|
|
- manual: false
|
|
|
- });
|
|
|
- dispatch({ type: 'SET_INNER_PADDING', payload: true });
|
|
|
- } else {
|
|
|
- dispatch({
|
|
|
- type: 'SET_SIDER',
|
|
|
- payload: false,
|
|
|
- manual: false
|
|
|
- });
|
|
|
- dispatch({ type: 'SET_INNER_PADDING', payload: false });
|
|
|
+ // 移动设备上，如果不是手动控制且侧边栏是打开的，则自动关闭
|
|
|
+ if (state.isMobile && state.showSider && !state.isManualSiderControl) {
|
|
|
+ dispatch({ type: ACTION_TYPES.SET_SIDER, payload: false });
|
|
|
}
|
|
|
- }, [location.pathname, dispatch]);
|
|
|
+ }, [state.isMobile, state.showSider, state.isManualSiderControl, dispatch]);
|
|
|
+};
|
|
|
|
|
|
- useEffect(() => {
|
|
|
- const isCollapsed =
|
|
|
- localStorage.getItem('default_collapse_sidebar') === 'true';
|
|
|
- dispatch({ type: 'SET_SIDER_COLLAPSED', payload: isCollapsed });
|
|
|
- }, [dispatch]);
|
|
|
+/**
|
|
|
+ * Style Provider 组件
|
|
|
+ */
|
|
|
+export const StyleProvider = ({ children }) => {
|
|
|
+ const location = useLocation();
|
|
|
+ const pathname = location.pathname;
|
|
|
+
|
|
|
+ const [state, dispatch] = useReducer(
|
|
|
+ styleReducer,
|
|
|
+ pathname,
|
|
|
+ getInitialState
|
|
|
+ );
|
|
|
+
|
|
|
+ useWindowResize(dispatch, state, pathname);
|
|
|
+ useRouteChange(dispatch, pathname);
|
|
|
+ useMobileSiderAutoHide(state, dispatch);
|
|
|
+
|
|
|
+ const contextValue = useMemo(
|
|
|
+ () => ({ state, dispatch }),
|
|
|
+ [state]
|
|
|
+ );
|
|
|
|
|
|
return (
|
|
|
- <StyleContext.Provider value={[state, dispatch]}>
|
|
|
+ <StyleContext.Provider value={contextValue}>
|
|
|
{children}
|
|
|
</StyleContext.Provider>
|
|
|
);
|
|
|
};
|
|
|
+
|
|
|
+/**
|
|
|
+ * 自定义 Hook - 使用 StyleContext
|
|
|
+ * @returns {{state: Object, dispatch: Function}} context value
|
|
|
+ */
|
|
|
+export const useStyle = () => {
|
|
|
+ const context = React.useContext(StyleContext);
|
|
|
+ if (!context) {
|
|
|
+ throw new Error('useStyle must be used within StyleProvider');
|
|
|
+ }
|
|
|
+ return context;
|
|
|
+};
|
|
|
+
|
|
|
+// 导出 action creators 以便外部使用
|
|
|
+export const styleActions = {
|
|
|
+ toggleSider: () => ({ type: ACTION_TYPES.TOGGLE_SIDER }),
|
|
|
+ setSider: (show, isManualControl = false) => ({
|
|
|
+ type: ACTION_TYPES.SET_SIDER,
|
|
|
+ payload: show,
|
|
|
+ isManualControl
|
|
|
+ }),
|
|
|
+ setMobile: (isMobile) => ({ type: ACTION_TYPES.SET_MOBILE, payload: isMobile }),
|
|
|
+ setSiderCollapsed: (collapsed) => ({
|
|
|
+ type: ACTION_TYPES.SET_SIDER_COLLAPSED,
|
|
|
+ payload: collapsed
|
|
|
+ }),
|
|
|
+};
|
Apple\Apple