From eaa65b232876c13109fe1bf09e2b0f93cba8724b Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Thu, 18 Dec 2025 18:23:16 +0800 Subject: [PATCH] =?UTF-8?q?fix(SubTabContainer):=20=E7=A7=BB=E9=99=A4?= =?UTF-8?q?=E5=A4=96=E5=B1=82=20Suspense=EF=BC=8CTab=20=E5=86=85=E5=AE=B9?= =?UTF-8?q?=E7=9B=B4=E6=8E=A5=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - SubTabContainer 内部为每个 Tab 添加 Suspense fallback={null} - 移除 Company/index.tsx 外层 Suspense 和 TabLoadingFallback - 切换一级 Tab 时不再显示整体 loading，直接展示内容 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- src/components/SubTabContainer/index.tsx | 6 ++- src/services/financialService.js | 58 ++++++++---------------- src/services/marketService.js | 57 ++++++++--------------- src/views/Company/index.tsx | 34 ++++---------- 4 files changed, 54 insertions(+), 101 deletions(-) diff --git a/src/components/SubTabContainer/index.tsx b/src/components/SubTabContainer/index.tsx index 028c6c36..53d7b9fe 100644 --- a/src/components/SubTabContainer/index.tsx +++ b/src/components/SubTabContainer/index.tsx @@ -19,7 +19,7 @@ * ``` */ -import React, { useState, useCallback, memo } from 'react'; +import React, { useState, useCallback, memo, Suspense } from 'react'; import { Box, Tabs, @@ -311,7 +311,9 @@ const SubTabContainer: React.FC = memo(({ return ( {shouldRender && Component ? ( - + + + ) : null} ); diff --git a/src/services/financialService.js b/src/services/financialService.js index 7fe04dfe..babc27b3 100644 --- a/src/services/financialService.js +++ b/src/services/financialService.js @@ -1,53 +1,35 @@ -import { getApiBase } from '../utils/apiConfig'; // src/services/financialService.js /** * 完整的财务数据服务层 * 对应Flask后端的所有财务API接口 */ -import { logger } from '../utils/logger'; - -const isProduction = process.env.NODE_ENV === 'production'; -const API_BASE_URL = getApiBase(); +import axios from '@utils/axiosConfig'; +/** + * 统一的 API 请求函数 + * axios 拦截器已自动处理日志记录 + */ const apiRequest = async (url, options = {}) => { - try { - logger.debug('financialService', 'API请求', { - url: `${API_BASE_URL}${url}`, - method: options.method || 'GET' - }); + const { method = 'GET', body, ...rest } = options; - const response = await fetch(`${API_BASE_URL}${url}`, { - ...options, - headers: { - 'Content-Type': 'application/json', - ...options.headers, - }, - credentials: 'include', // 包含 cookies，以便后端识别登录状态 - }); + const config = { + method, + url, + ...rest, + }; - if (!response.ok) { - const errorText = await response.text(); - logger.error('financialService', 'apiRequest', new Error(`HTTP ${response.status}`), { - url, - status: response.status, - errorText: errorText.substring(0, 200) - }); - throw new Error(`HTTP error! status: ${response.status}`); + // 如果有 body，根据方法设置 data 或 params + if (body) { + if (method === 'GET') { + config.params = typeof body === 'string' ? JSON.parse(body) : body; + } else { + config.data = typeof body === 'string' ? JSON.parse(body) : body; } - - const data = await response.json(); - logger.debug('financialService', 'API响应', { - url, - success: data.success, - hasData: !!data.data - }); - - return data; - } catch (error) { - logger.error('financialService', 'apiRequest', error, { url }); - throw error; } + + const response = await axios(config); + return response.data; }; export const financialService = { diff --git a/src/services/marketService.js b/src/services/marketService.js index a39062fd..f14551ba 100644 --- a/src/services/marketService.js +++ b/src/services/marketService.js @@ -1,53 +1,36 @@ -import { getApiBase } from '../utils/apiConfig'; // src/services/marketService.js /** * 完整的市场行情数据服务层 * 对应Flask后端的所有市场API接口 */ +import axios from '@utils/axiosConfig'; import { logger } from '../utils/logger'; -const isProduction = process.env.NODE_ENV === 'production'; -const API_BASE_URL = getApiBase(); - +/** + * 统一的 API 请求函数 + * axios 拦截器已自动处理日志记录 + */ const apiRequest = async (url, options = {}) => { - try { - logger.debug('marketService', 'API请求', { - url: `${API_BASE_URL}${url}`, - method: options.method || 'GET' - }); + const { method = 'GET', body, ...rest } = options; - const response = await fetch(`${API_BASE_URL}${url}`, { - ...options, - headers: { - 'Content-Type': 'application/json', - ...options.headers, - }, - credentials: 'include', // 包含 cookies，以便后端识别登录状态 - }); + const config = { + method, + url, + ...rest, + }; - if (!response.ok) { - const errorText = await response.text(); - logger.error('marketService', 'apiRequest', new Error(`HTTP ${response.status}`), { - url, - status: response.status, - errorText: errorText.substring(0, 200) - }); - throw new Error(`HTTP error! status: ${response.status}`); + // 如果有 body，根据方法设置 data 或 params + if (body) { + if (method === 'GET') { + config.params = typeof body === 'string' ? JSON.parse(body) : body; + } else { + config.data = typeof body === 'string' ? JSON.parse(body) : body; } - - const data = await response.json(); - logger.debug('marketService', 'API响应', { - url, - success: data.success, - hasData: !!data.data - }); - - return data; - } catch (error) { - logger.error('marketService', 'apiRequest', error, { url }); - throw error; } + + const response = await axios(config); + return response.data; }; export const marketService = { diff --git a/src/views/Company/index.tsx b/src/views/Company/index.tsx index 88ee5d28..94a985e4 100644 --- a/src/views/Company/index.tsx +++ b/src/views/Company/index.tsx @@ -9,12 +9,12 @@ * - HeroUI 现代组件风格 */ -import React, { memo, useCallback, useRef, useEffect, Suspense } from 'react'; +import React, { memo, useCallback, useRef, useEffect } from 'react'; // FUI 动画样式 import './theme/fui-animations.css'; import { useSearchParams } from 'react-router-dom'; -import { Box, Spinner, Center } from '@chakra-ui/react'; +import { Box } from '@chakra-ui/react'; import SubTabContainer from '@components/SubTabContainer'; import { useCompanyEvents } from './hooks/useCompanyEvents'; import { useCompanyData } from './hooks/useCompanyData'; @@ -22,18 +22,6 @@ import CompanyHeader from './components/CompanyHeader'; import StockQuoteCard from './components/StockQuoteCard'; import { THEME, TAB_CONFIG } from './config'; -// ============================================ -// 加载状态组件 -// ============================================ - -const TabLoadingFallback = memo(() => ( -
- -
-)); - -TabLoadingFallback.displayName = 'TabLoadingFallback'; - // ============================================ // 主内容区组件 - FUI 风格 // ============================================ @@ -121,16 +109,14 @@ const CompanyContent = memo(({ opacity={0.6} /> - }> - - + ));