Compare commits
13 Commits
c4900bd280
...
feature_20
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
a446f71c04 | ||
|
|
e02cbcd9b7 | ||
|
|
9bb9eab922 | ||
|
|
3d7b0045b7 | ||
|
|
ada9f6e778 | ||
|
|
07aebbece5 | ||
|
|
7a11800cba | ||
|
|
3b352be1a8 | ||
|
|
c49dee72eb | ||
|
|
7159e510a6 | ||
|
|
385d452f5a | ||
|
|
bdc823e122 | ||
|
|
c83d239219 |
110
.husky/pre-commit
Executable file
110
.husky/pre-commit
Executable file
@@ -0,0 +1,110 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# Git Pre-commit Hook
|
||||||
|
# ============================================
|
||||||
|
# 规则:
|
||||||
|
# 1. src 目录下新增的代码文件必须使用 TypeScript (.ts/.tsx)
|
||||||
|
# 2. 修改的代码不能使用 fetch,应使用 axios
|
||||||
|
# ============================================
|
||||||
|
|
||||||
|
# 颜色定义
|
||||||
|
RED='\033[0;31m'
|
||||||
|
YELLOW='\033[1;33m'
|
||||||
|
GREEN='\033[0;32m'
|
||||||
|
NC='\033[0m' # No Color
|
||||||
|
|
||||||
|
has_error=0
|
||||||
|
|
||||||
|
echo ""
|
||||||
|
echo "🔍 正在检查代码规范..."
|
||||||
|
echo ""
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 规则 1: 新文件必须使用 TypeScript
|
||||||
|
# ============================================
|
||||||
|
|
||||||
|
# 获取新增的文件(只检查 src 目录下的代码文件)
|
||||||
|
new_js_files=$(git diff --cached --name-only --diff-filter=A | grep -E '^src/.*\.(js|jsx)$' || true)
|
||||||
|
|
||||||
|
if [ -n "$new_js_files" ]; then
|
||||||
|
echo "${RED}❌ 错误: 发现新增的 JavaScript 文件${NC}"
|
||||||
|
echo "${YELLOW} 新文件必须使用 TypeScript (.ts/.tsx)${NC}"
|
||||||
|
echo ""
|
||||||
|
echo " 以下文件需要改为 TypeScript:"
|
||||||
|
echo "$new_js_files" | while read file; do
|
||||||
|
echo " - $file"
|
||||||
|
done
|
||||||
|
echo ""
|
||||||
|
echo " 💡 提示: 请将文件扩展名改为 .ts 或 .tsx"
|
||||||
|
echo ""
|
||||||
|
has_error=1
|
||||||
|
fi
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 规则 2: 禁止使用 fetch,应使用 axios
|
||||||
|
# ============================================
|
||||||
|
|
||||||
|
# 获取所有暂存的文件(新增 + 修改)
|
||||||
|
staged_files=$(git diff --cached --name-only --diff-filter=AM | grep -E '^src/.*\.(js|jsx|ts|tsx)$' || true)
|
||||||
|
|
||||||
|
if [ -n "$staged_files" ]; then
|
||||||
|
# 检查暂存内容中是否包含 fetch 调用
|
||||||
|
# 使用 git diff --cached 检查实际修改的内容
|
||||||
|
fetch_found=""
|
||||||
|
|
||||||
|
for file in $staged_files; do
|
||||||
|
# 检查该文件暂存的更改中是否有 fetch 调用
|
||||||
|
# 排除注释和字符串中的 fetch
|
||||||
|
# 匹配: fetch(, await fetch, .fetch(
|
||||||
|
fetch_matches=$(git diff --cached -U0 "$file" 2>/dev/null | grep -E '^\+.*[^a-zA-Z_]fetch\s*\(' | grep -v '^\+\s*//' || true)
|
||||||
|
|
||||||
|
if [ -n "$fetch_matches" ]; then
|
||||||
|
fetch_found="$fetch_found
|
||||||
|
$file"
|
||||||
|
fi
|
||||||
|
done
|
||||||
|
|
||||||
|
if [ -n "$fetch_found" ]; then
|
||||||
|
echo "${RED}❌ 错误: 检测到使用了 fetch API${NC}"
|
||||||
|
echo "${YELLOW} 请使用 axios 进行 HTTP 请求${NC}"
|
||||||
|
echo ""
|
||||||
|
echo " 以下文件包含 fetch 调用:"
|
||||||
|
echo "$fetch_found" | while read file; do
|
||||||
|
if [ -n "$file" ]; then
|
||||||
|
echo " - $file"
|
||||||
|
fi
|
||||||
|
done
|
||||||
|
echo ""
|
||||||
|
echo " 💡 修改建议:"
|
||||||
|
echo " ${GREEN}// 替换前${NC}"
|
||||||
|
echo " fetch('/api/data').then(res => res.json())"
|
||||||
|
echo ""
|
||||||
|
echo " ${GREEN}// 替换后${NC}"
|
||||||
|
echo " import axios from 'axios';"
|
||||||
|
echo " axios.get('/api/data').then(res => res.data)"
|
||||||
|
echo ""
|
||||||
|
has_error=1
|
||||||
|
fi
|
||||||
|
fi
|
||||||
|
|
||||||
|
# ============================================
|
||||||
|
# 检查结果
|
||||||
|
# ============================================
|
||||||
|
|
||||||
|
if [ $has_error -eq 1 ]; then
|
||||||
|
echo "${RED}========================================${NC}"
|
||||||
|
echo "${RED}提交被阻止,请修复以上问题后重试${NC}"
|
||||||
|
echo "${RED}========================================${NC}"
|
||||||
|
echo ""
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo "${GREEN}✅ 代码规范检查通过${NC}"
|
||||||
|
echo ""
|
||||||
|
|
||||||
|
# 运行 lint-staged(如果配置了)
|
||||||
|
# 可选:在 package.json 中添加 "lint-staged" 配置来启用代码格式化
|
||||||
|
# if [ -f "package.json" ] && grep -q '"lint-staged"' package.json; then
|
||||||
|
# npx lint-staged
|
||||||
|
# fi
|
||||||
@@ -131,12 +131,14 @@
|
|||||||
"eslint-plugin-prettier": "3.4.0",
|
"eslint-plugin-prettier": "3.4.0",
|
||||||
"gulp": "4.0.2",
|
"gulp": "4.0.2",
|
||||||
"gulp-append-prepend": "1.0.9",
|
"gulp-append-prepend": "1.0.9",
|
||||||
|
"husky": "^9.1.7",
|
||||||
"imagemin": "^9.0.1",
|
"imagemin": "^9.0.1",
|
||||||
"imagemin-mozjpeg": "^10.0.0",
|
"imagemin-mozjpeg": "^10.0.0",
|
||||||
"imagemin-pngquant": "^10.0.0",
|
"imagemin-pngquant": "^10.0.0",
|
||||||
"kill-port": "^2.0.1",
|
"kill-port": "^2.0.1",
|
||||||
"less": "^4.4.2",
|
"less": "^4.4.2",
|
||||||
"less-loader": "^12.3.0",
|
"less-loader": "^12.3.0",
|
||||||
|
"lint-staged": "^16.2.7",
|
||||||
"msw": "^2.11.5",
|
"msw": "^2.11.5",
|
||||||
"prettier": "2.2.1",
|
"prettier": "2.2.1",
|
||||||
"react-error-overlay": "6.0.9",
|
"react-error-overlay": "6.0.9",
|
||||||
|
|||||||
@@ -118,6 +118,11 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
|
|||||||
// 当前索引
|
// 当前索引
|
||||||
const currentIndex = controlledIndex ?? internalIndex;
|
const currentIndex = controlledIndex ?? internalIndex;
|
||||||
|
|
||||||
|
// 记录已访问的 Tab 索引(用于真正的懒加载)
|
||||||
|
const [visitedTabs, setVisitedTabs] = useState<Set<number>>(
|
||||||
|
() => new Set([controlledIndex ?? defaultIndex])
|
||||||
|
);
|
||||||
|
|
||||||
// 合并主题
|
// 合并主题
|
||||||
const theme: SubTabTheme = {
|
const theme: SubTabTheme = {
|
||||||
...THEME_PRESETS[themePreset],
|
...THEME_PRESETS[themePreset],
|
||||||
@@ -132,6 +137,12 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
|
|||||||
const tabKey = tabs[newIndex]?.key || '';
|
const tabKey = tabs[newIndex]?.key || '';
|
||||||
onTabChange?.(newIndex, tabKey);
|
onTabChange?.(newIndex, tabKey);
|
||||||
|
|
||||||
|
// 记录已访问的 Tab(用于懒加载)
|
||||||
|
setVisitedTabs(prev => {
|
||||||
|
if (prev.has(newIndex)) return prev;
|
||||||
|
return new Set(prev).add(newIndex);
|
||||||
|
});
|
||||||
|
|
||||||
if (controlledIndex === undefined) {
|
if (controlledIndex === undefined) {
|
||||||
setInternalIndex(newIndex);
|
setInternalIndex(newIndex);
|
||||||
}
|
}
|
||||||
@@ -197,11 +208,16 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
|
|||||||
</TabList>
|
</TabList>
|
||||||
|
|
||||||
<TabPanels p={contentPadding}>
|
<TabPanels p={contentPadding}>
|
||||||
{tabs.map((tab) => {
|
{tabs.map((tab, idx) => {
|
||||||
const Component = tab.component;
|
const Component = tab.component;
|
||||||
|
// 懒加载:只渲染已访问过的 Tab
|
||||||
|
const shouldRender = !isLazy || visitedTabs.has(idx);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TabPanel key={tab.key} p={0}>
|
<TabPanel key={tab.key} p={0}>
|
||||||
{Component ? <Component {...componentProps} /> : null}
|
{shouldRender && Component ? (
|
||||||
|
<Component {...componentProps} />
|
||||||
|
) : null}
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|||||||
@@ -661,6 +661,12 @@ export const NotificationProvider = ({ children }) => {
|
|||||||
|
|
||||||
// ========== 连接到 Socket 服务(⚡ 异步初始化,不阻塞首屏) ==========
|
// ========== 连接到 Socket 服务(⚡ 异步初始化,不阻塞首屏) ==========
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
// ⚡ Mock 模式下跳过 Socket 连接(避免连接生产服务器失败的错误)
|
||||||
|
if (process.env.REACT_APP_ENABLE_MOCK === 'true') {
|
||||||
|
logger.debug('NotificationContext', 'Mock 模式,跳过 Socket 连接');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// ⚡ 防止 React Strict Mode 导致的重复初始化
|
// ⚡ 防止 React Strict Mode 导致的重复初始化
|
||||||
if (socketInitialized) {
|
if (socketInitialized) {
|
||||||
logger.debug('NotificationContext', 'Socket 已初始化,跳过重复执行(Strict Mode 保护)');
|
logger.debug('NotificationContext', 'Socket 已初始化,跳过重复执行(Strict Mode 保护)');
|
||||||
|
|||||||
11
src/index.js
11
src/index.js
@@ -5,6 +5,17 @@ import { BrowserRouter as Router } from 'react-router-dom';
|
|||||||
|
|
||||||
// ⚡ 性能监控:在应用启动时尽早标记
|
// ⚡ 性能监控:在应用启动时尽早标记
|
||||||
import { performanceMonitor } from './utils/performanceMonitor';
|
import { performanceMonitor } from './utils/performanceMonitor';
|
||||||
|
|
||||||
|
// T0: HTML 加载完成时间点
|
||||||
|
if (document.readyState === 'complete') {
|
||||||
|
performanceMonitor.mark('html-loaded');
|
||||||
|
} else {
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
performanceMonitor.mark('html-loaded');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// T1: React 开始初始化
|
||||||
performanceMonitor.mark('app-start');
|
performanceMonitor.mark('app-start');
|
||||||
|
|
||||||
// ⚡ 已删除 brainwave.css(项目未安装 Tailwind CSS,该文件无效)
|
// ⚡ 已删除 brainwave.css(项目未安装 Tailwind CSS,该文件无效)
|
||||||
|
|||||||
@@ -1,16 +1,28 @@
|
|||||||
// src/mocks/handlers/bytedesk.js
|
// src/mocks/handlers/bytedesk.js
|
||||||
/**
|
/**
|
||||||
* Bytedesk 客服 Widget MSW Handler
|
* Bytedesk 客服 Widget MSW Handler
|
||||||
* 使用 passthrough 让请求通过到真实服务器,消除 MSW 警告
|
* Mock 模式下返回模拟数据
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { http, passthrough } from 'msw';
|
import { http, HttpResponse, passthrough } from 'msw';
|
||||||
|
|
||||||
export const bytedeskHandlers = [
|
export const bytedeskHandlers = [
|
||||||
// Bytedesk API 请求 - 直接 passthrough
|
// 未读消息数量
|
||||||
// 匹配 /bytedesk/* 路径(通过代理访问后端)
|
http.get('/bytedesk/visitor/api/v1/message/unread/count', () => {
|
||||||
|
return HttpResponse.json({
|
||||||
|
code: 200,
|
||||||
|
message: 'success',
|
||||||
|
data: { count: 0 },
|
||||||
|
});
|
||||||
|
}),
|
||||||
|
|
||||||
|
// 其他 Bytedesk API - 返回通用成功响应
|
||||||
http.all('/bytedesk/*', () => {
|
http.all('/bytedesk/*', () => {
|
||||||
return passthrough();
|
return HttpResponse.json({
|
||||||
|
code: 200,
|
||||||
|
message: 'success',
|
||||||
|
data: null,
|
||||||
|
});
|
||||||
}),
|
}),
|
||||||
|
|
||||||
// Bytedesk 外部 CDN/服务请求
|
// Bytedesk 外部 CDN/服务请求
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
// 性能监控工具 - 统计白屏时间和性能指标
|
// 性能监控工具 - 统计白屏时间和性能指标
|
||||||
|
|
||||||
import { logger } from './logger';
|
import { logger } from './logger';
|
||||||
|
import { reportPerformanceMetrics } from '../lib/posthog';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 性能指标接口
|
* 性能指标接口
|
||||||
@@ -208,6 +209,9 @@ class PerformanceMonitor {
|
|||||||
// 性能分析建议
|
// 性能分析建议
|
||||||
this.analyzePerformance();
|
this.analyzePerformance();
|
||||||
|
|
||||||
|
// 上报性能指标到 PostHog
|
||||||
|
reportPerformanceMetrics(this.metrics);
|
||||||
|
|
||||||
return this.metrics;
|
return this.metrics;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
# Company 目录结构说明
|
# Company 目录结构说明
|
||||||
|
|
||||||
> 最后更新:2025-12-17(StockQuoteCard 数据下沉优化)
|
> 最后更新:2025-12-17(API 接口清单梳理)
|
||||||
|
|
||||||
## 目录结构
|
## 目录结构
|
||||||
|
|
||||||
@@ -230,6 +230,83 @@ src/views/Company/
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## API 接口清单
|
||||||
|
|
||||||
|
Company 模块共使用 **27 个** API 接口(去重后)。
|
||||||
|
|
||||||
|
### 一、股票基础信息 (8 个)
|
||||||
|
|
||||||
|
| 接口 | 方法 | 调用位置 |
|
||||||
|
|------|------|----------|
|
||||||
|
| `/api/stock/${stockCode}/basic-info` | GET | useBasicInfo.ts, useStockQuoteData.ts, NewsPanel.js |
|
||||||
|
| `/api/stock/${stockCode}/branches` | GET | useBranchesData.ts |
|
||||||
|
| `/api/stock/${stockCode}/management?active_only=true` | GET | useManagementData.ts |
|
||||||
|
| `/api/stock/${stockCode}/announcements?limit=20` | GET | useAnnouncementsData.ts |
|
||||||
|
| `/api/stock/${stockCode}/disclosure-schedule` | GET | useDisclosureData.ts |
|
||||||
|
| `/api/stock/${stockCode}/forecast` | GET | ForecastPanel.js |
|
||||||
|
| `/api/stock/${stockCode}/forecast-report` | GET | ForecastReport/index.tsx |
|
||||||
|
| `/api/stock/${stockCode}/latest-minute` | GET | marketService.ts |
|
||||||
|
|
||||||
|
### 二、股东信息 (4 个)
|
||||||
|
|
||||||
|
| 接口 | 方法 | 调用位置 |
|
||||||
|
|------|------|----------|
|
||||||
|
| `/api/stock/${stockCode}/actual-control` | GET | useShareholderData.ts |
|
||||||
|
| `/api/stock/${stockCode}/concentration` | GET | useShareholderData.ts |
|
||||||
|
| `/api/stock/${stockCode}/top-shareholders?limit=10` | GET | useShareholderData.ts |
|
||||||
|
| `/api/stock/${stockCode}/top-circulation-shareholders?limit=10` | GET | useShareholderData.ts |
|
||||||
|
|
||||||
|
### 三、行情数据 (8 个)
|
||||||
|
|
||||||
|
| 接口 | 方法 | 调用位置 |
|
||||||
|
|------|------|----------|
|
||||||
|
| `/api/stock/quotes` | POST | stockService.getQuotes |
|
||||||
|
| `/api/market/summary/${stockCode}` | GET | marketService.ts |
|
||||||
|
| `/api/market/trade/${stockCode}?days=${days}` | GET | marketService.ts |
|
||||||
|
| `/api/market/funding/${stockCode}?days=${days}` | GET | marketService.ts |
|
||||||
|
| `/api/market/bigdeal/${stockCode}?days=${days}` | GET | marketService.ts |
|
||||||
|
| `/api/market/unusual/${stockCode}?days=${days}` | GET | marketService.ts |
|
||||||
|
| `/api/market/pledge/${stockCode}` | GET | marketService.ts |
|
||||||
|
| `/api/market/rise-analysis/${stockCode}` | GET | marketService.ts |
|
||||||
|
|
||||||
|
### 四、深度分析 (5 个)
|
||||||
|
|
||||||
|
| 接口 | 方法 | 调用位置 |
|
||||||
|
|------|------|----------|
|
||||||
|
| `/api/company/comprehensive-analysis/${stockCode}` | GET | DeepAnalysis/index.js |
|
||||||
|
| `/api/company/value-chain-analysis/${stockCode}` | GET | DeepAnalysis/index.js |
|
||||||
|
| `/api/company/key-factors-timeline/${stockCode}` | GET | DeepAnalysis/index.js |
|
||||||
|
| `/api/company/value-chain/related-companies?node_name=...` | GET | ValueChainNodeCard/index.tsx |
|
||||||
|
| `/api/financial/industry-rank/${stockCode}` | GET | DeepAnalysis/index.js |
|
||||||
|
|
||||||
|
### 五、财务数据 (1 个)
|
||||||
|
|
||||||
|
| 接口 | 方法 | 调用位置 |
|
||||||
|
|------|------|----------|
|
||||||
|
| `/api/financial/financial-metrics/${stockCode}?limit=${limit}` | GET | financialService.getFinancialMetrics |
|
||||||
|
|
||||||
|
### 六、事件/新闻 (1 个)
|
||||||
|
|
||||||
|
| 接口 | 方法 | 调用位置 |
|
||||||
|
|------|------|----------|
|
||||||
|
| `/api/events?q=${searchTerm}&page=${page}&per_page=10` | GET | NewsPanel.js |
|
||||||
|
|
||||||
|
### 统计汇总
|
||||||
|
|
||||||
|
| 分类 | 数量 |
|
||||||
|
|------|------|
|
||||||
|
| 股票基础信息 | 8 |
|
||||||
|
| 股东信息 | 4 |
|
||||||
|
| 行情数据 | 8 |
|
||||||
|
| 深度分析 | 5 |
|
||||||
|
| 财务数据 | 1 |
|
||||||
|
| 事件/新闻 | 1 |
|
||||||
|
| **去重后总计** | **27** |
|
||||||
|
|
||||||
|
> 注:`/api/stock/${stockCode}/basic-info` 在 3 处调用,但只算 1 个接口。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## 文件职责说明
|
## 文件职责说明
|
||||||
|
|
||||||
### 入口文件
|
### 入口文件
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ import {
|
|||||||
VStack,
|
VStack,
|
||||||
} from '@chakra-ui/react';
|
} from '@chakra-ui/react';
|
||||||
import { SearchIcon } from '@chakra-ui/icons';
|
import { SearchIcon } from '@chakra-ui/icons';
|
||||||
|
import { useStockSearch } from '../../hooks/useStockSearch';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 股票搜索栏组件(带模糊搜索下拉)
|
* 股票搜索栏组件(带模糊搜索下拉)
|
||||||
@@ -31,27 +32,18 @@ const SearchBar = ({
|
|||||||
}) => {
|
}) => {
|
||||||
// 下拉状态
|
// 下拉状态
|
||||||
const [showDropdown, setShowDropdown] = useState(false);
|
const [showDropdown, setShowDropdown] = useState(false);
|
||||||
const [filteredStocks, setFilteredStocks] = useState([]);
|
|
||||||
const containerRef = useRef(null);
|
const containerRef = useRef(null);
|
||||||
|
|
||||||
// 从 Redux 获取全部股票列表
|
// 从 Redux 获取全部股票列表
|
||||||
const allStocks = useSelector(state => state.stock.allStocks);
|
const allStocks = useSelector(state => state.stock.allStocks);
|
||||||
|
|
||||||
// 模糊搜索过滤
|
// 使用共享的搜索 Hook
|
||||||
|
const filteredStocks = useStockSearch(allStocks, inputCode, { limit: 10 });
|
||||||
|
|
||||||
|
// 根据搜索结果更新下拉显示状态
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (inputCode && inputCode.trim()) {
|
setShowDropdown(filteredStocks.length > 0 && !!inputCode?.trim());
|
||||||
const searchTerm = inputCode.trim().toLowerCase();
|
}, [filteredStocks, inputCode]);
|
||||||
const filtered = allStocks.filter(stock =>
|
|
||||||
stock.code.toLowerCase().includes(searchTerm) ||
|
|
||||||
stock.name.includes(inputCode.trim())
|
|
||||||
).slice(0, 10); // 限制显示10条
|
|
||||||
setFilteredStocks(filtered);
|
|
||||||
setShowDropdown(filtered.length > 0);
|
|
||||||
} else {
|
|
||||||
setFilteredStocks([]);
|
|
||||||
setShowDropdown(false);
|
|
||||||
}
|
|
||||||
}, [inputCode, allStocks]);
|
|
||||||
|
|
||||||
// 点击外部关闭下拉
|
// 点击外部关闭下拉
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|||||||
@@ -12,15 +12,27 @@ import {
|
|||||||
Divider,
|
Divider,
|
||||||
Center,
|
Center,
|
||||||
Code,
|
Code,
|
||||||
|
Spinner,
|
||||||
} from "@chakra-ui/react";
|
} from "@chakra-ui/react";
|
||||||
|
|
||||||
import { THEME } from "../config";
|
import { THEME } from "../config";
|
||||||
|
import { useBasicInfo } from "../../hooks/useBasicInfo";
|
||||||
|
|
||||||
interface BusinessInfoPanelProps {
|
interface BusinessInfoPanelProps {
|
||||||
basicInfo: any;
|
stockCode: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const BusinessInfoPanel: React.FC<BusinessInfoPanelProps> = ({ basicInfo }) => {
|
const BusinessInfoPanel: React.FC<BusinessInfoPanelProps> = ({ stockCode }) => {
|
||||||
|
const { basicInfo, loading } = useBasicInfo(stockCode);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<Center h="200px">
|
||||||
|
<Spinner size="lg" color={THEME.gold} />
|
||||||
|
</Center>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
if (!basicInfo) {
|
if (!basicInfo) {
|
||||||
return (
|
return (
|
||||||
<Center h="200px">
|
<Center h="200px">
|
||||||
|
|||||||
@@ -17,7 +17,6 @@ import {
|
|||||||
// Props 类型定义
|
// Props 类型定义
|
||||||
export interface BasicInfoTabProps {
|
export interface BasicInfoTabProps {
|
||||||
stockCode: string;
|
stockCode: string;
|
||||||
basicInfo?: any;
|
|
||||||
|
|
||||||
// 可配置项
|
// 可配置项
|
||||||
enabledTabs?: string[]; // 指定显示哪些 Tab(通过 key)
|
enabledTabs?: string[]; // 指定显示哪些 Tab(通过 key)
|
||||||
@@ -59,7 +58,6 @@ const buildTabsConfig = (enabledKeys?: string[]): SubTabConfig[] => {
|
|||||||
*/
|
*/
|
||||||
const BasicInfoTab: React.FC<BasicInfoTabProps> = ({
|
const BasicInfoTab: React.FC<BasicInfoTabProps> = ({
|
||||||
stockCode,
|
stockCode,
|
||||||
basicInfo,
|
|
||||||
enabledTabs,
|
enabledTabs,
|
||||||
defaultTabIndex = 0,
|
defaultTabIndex = 0,
|
||||||
onTabChange,
|
onTabChange,
|
||||||
@@ -72,7 +70,7 @@ const BasicInfoTab: React.FC<BasicInfoTabProps> = ({
|
|||||||
<CardBody p={0}>
|
<CardBody p={0}>
|
||||||
<SubTabContainer
|
<SubTabContainer
|
||||||
tabs={tabs}
|
tabs={tabs}
|
||||||
componentProps={{ stockCode, basicInfo }}
|
componentProps={{ stockCode }}
|
||||||
defaultIndex={defaultTabIndex}
|
defaultIndex={defaultTabIndex}
|
||||||
onTabChange={onTabChange}
|
onTabChange={onTabChange}
|
||||||
themePreset="blackGold"
|
themePreset="blackGold"
|
||||||
|
|||||||
@@ -32,12 +32,10 @@ import {
|
|||||||
FaStar,
|
FaStar,
|
||||||
} from 'react-icons/fa';
|
} from 'react-icons/fa';
|
||||||
import { logger } from '@utils/logger';
|
import { logger } from '@utils/logger';
|
||||||
import { getApiBase } from '@utils/apiConfig';
|
import axios from '@utils/axiosConfig';
|
||||||
import RelatedCompaniesModal from './RelatedCompaniesModal';
|
import RelatedCompaniesModal from './RelatedCompaniesModal';
|
||||||
import type { ValueChainNodeCardProps, RelatedCompany } from '../../types';
|
import type { ValueChainNodeCardProps, RelatedCompany } from '../../types';
|
||||||
|
|
||||||
const API_BASE_URL = getApiBase();
|
|
||||||
|
|
||||||
// 黑金主题配置
|
// 黑金主题配置
|
||||||
const THEME = {
|
const THEME = {
|
||||||
cardBg: 'gray.700',
|
cardBg: 'gray.700',
|
||||||
@@ -120,12 +118,11 @@ const ValueChainNodeCard: React.FC<ValueChainNodeCardProps> = memo(({
|
|||||||
const fetchRelatedCompanies = async () => {
|
const fetchRelatedCompanies = async () => {
|
||||||
setLoadingRelated(true);
|
setLoadingRelated(true);
|
||||||
try {
|
try {
|
||||||
const response = await fetch(
|
const { data } = await axios.get(
|
||||||
`${API_BASE_URL}/api/company/value-chain/related-companies?node_name=${encodeURIComponent(
|
`/api/company/value-chain/related-companies?node_name=${encodeURIComponent(
|
||||||
node.node_name
|
node.node_name
|
||||||
)}`
|
)}`
|
||||||
);
|
);
|
||||||
const data = await response.json();
|
|
||||||
if (data.success) {
|
if (data.success) {
|
||||||
setRelatedCompanies(data.data || []);
|
setRelatedCompanies(data.data || []);
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@@ -1,13 +1,11 @@
|
|||||||
// src/views/Company/components/CompanyOverview/hooks/useAnnouncementsData.ts
|
// src/views/Company/components/CompanyOverview/hooks/useAnnouncementsData.ts
|
||||||
// 公告数据 Hook - 用于公司公告 Tab
|
// 公告数据 Hook - 用于公司公告 Tab
|
||||||
|
|
||||||
import { useState, useEffect, useCallback } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { logger } from "@utils/logger";
|
import { logger } from "@utils/logger";
|
||||||
import { getApiBase } from "@utils/apiConfig";
|
import axios from "@utils/axiosConfig";
|
||||||
import type { Announcement } from "../types";
|
import type { Announcement } from "../types";
|
||||||
|
|
||||||
const API_BASE_URL = getApiBase();
|
|
||||||
|
|
||||||
interface ApiResponse<T> {
|
interface ApiResponse<T> {
|
||||||
success: boolean;
|
success: boolean;
|
||||||
data: T;
|
data: T;
|
||||||
@@ -28,34 +26,38 @@ export const useAnnouncementsData = (stockCode?: string): UseAnnouncementsDataRe
|
|||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
const loadData = useCallback(async () => {
|
useEffect(() => {
|
||||||
if (!stockCode) return;
|
if (!stockCode) return;
|
||||||
|
|
||||||
setLoading(true);
|
const controller = new AbortController();
|
||||||
setError(null);
|
|
||||||
|
|
||||||
try {
|
const loadData = async () => {
|
||||||
const response = await fetch(
|
setLoading(true);
|
||||||
`${API_BASE_URL}/api/stock/${stockCode}/announcements?limit=20`
|
setError(null);
|
||||||
);
|
|
||||||
const result = (await response.json()) as ApiResponse<Announcement[]>;
|
|
||||||
|
|
||||||
if (result.success) {
|
try {
|
||||||
setAnnouncements(result.data);
|
const { data: result } = await axios.get<ApiResponse<Announcement[]>>(
|
||||||
} else {
|
`/api/stock/${stockCode}/announcements?limit=20`,
|
||||||
setError("加载公告数据失败");
|
{ signal: controller.signal }
|
||||||
|
);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
setAnnouncements(result.data);
|
||||||
|
} else {
|
||||||
|
setError("加载公告数据失败");
|
||||||
|
}
|
||||||
|
} catch (err: any) {
|
||||||
|
if (err.name === "CanceledError") return;
|
||||||
|
logger.error("useAnnouncementsData", "loadData", err, { stockCode });
|
||||||
|
setError("网络请求失败");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
}
|
}
|
||||||
} catch (err) {
|
};
|
||||||
logger.error("useAnnouncementsData", "loadData", err, { stockCode });
|
|
||||||
setError("网络请求失败");
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, [stockCode]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
loadData();
|
loadData();
|
||||||
}, [loadData]);
|
return () => controller.abort();
|
||||||
|
}, [stockCode]);
|
||||||
|
|
||||||
return { announcements, loading, error };
|
return { announcements, loading, error };
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,13 +1,11 @@
|
|||||||
// src/views/Company/components/CompanyOverview/hooks/useBasicInfo.ts
|
// src/views/Company/components/CompanyOverview/hooks/useBasicInfo.ts
|
||||||
// 公司基本信息 Hook - 用于 CompanyHeaderCard
|
// 公司基本信息 Hook - 用于 CompanyHeaderCard
|
||||||
|
|
||||||
import { useState, useEffect, useCallback } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { logger } from "@utils/logger";
|
import { logger } from "@utils/logger";
|
||||||
import { getApiBase } from "@utils/apiConfig";
|
import axios from "@utils/axiosConfig";
|
||||||
import type { BasicInfo } from "../types";
|
import type { BasicInfo } from "../types";
|
||||||
|
|
||||||
const API_BASE_URL = getApiBase();
|
|
||||||
|
|
||||||
interface ApiResponse<T> {
|
interface ApiResponse<T> {
|
||||||
success: boolean;
|
success: boolean;
|
||||||
data: T;
|
data: T;
|
||||||
@@ -28,32 +26,38 @@ export const useBasicInfo = (stockCode?: string): UseBasicInfoResult => {
|
|||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
const loadData = useCallback(async () => {
|
useEffect(() => {
|
||||||
if (!stockCode) return;
|
if (!stockCode) return;
|
||||||
|
|
||||||
setLoading(true);
|
const controller = new AbortController();
|
||||||
setError(null);
|
|
||||||
|
|
||||||
try {
|
const loadData = async () => {
|
||||||
const response = await fetch(`${API_BASE_URL}/api/stock/${stockCode}/basic-info`);
|
setLoading(true);
|
||||||
const result = (await response.json()) as ApiResponse<BasicInfo>;
|
setError(null);
|
||||||
|
|
||||||
if (result.success) {
|
try {
|
||||||
setBasicInfo(result.data);
|
const { data: result } = await axios.get<ApiResponse<BasicInfo>>(
|
||||||
} else {
|
`/api/stock/${stockCode}/basic-info`,
|
||||||
setError("加载基本信息失败");
|
{ signal: controller.signal }
|
||||||
|
);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
setBasicInfo(result.data);
|
||||||
|
} else {
|
||||||
|
setError("加载基本信息失败");
|
||||||
|
}
|
||||||
|
} catch (err: any) {
|
||||||
|
if (err.name === "CanceledError") return;
|
||||||
|
logger.error("useBasicInfo", "loadData", err, { stockCode });
|
||||||
|
setError("网络请求失败");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
}
|
}
|
||||||
} catch (err) {
|
};
|
||||||
logger.error("useBasicInfo", "loadData", err, { stockCode });
|
|
||||||
setError("网络请求失败");
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, [stockCode]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
loadData();
|
loadData();
|
||||||
}, [loadData]);
|
return () => controller.abort();
|
||||||
|
}, [stockCode]);
|
||||||
|
|
||||||
return { basicInfo, loading, error };
|
return { basicInfo, loading, error };
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,13 +1,11 @@
|
|||||||
// src/views/Company/components/CompanyOverview/hooks/useBranchesData.ts
|
// src/views/Company/components/CompanyOverview/hooks/useBranchesData.ts
|
||||||
// 分支机构数据 Hook - 用于分支机构 Tab
|
// 分支机构数据 Hook - 用于分支机构 Tab
|
||||||
|
|
||||||
import { useState, useEffect, useCallback } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { logger } from "@utils/logger";
|
import { logger } from "@utils/logger";
|
||||||
import { getApiBase } from "@utils/apiConfig";
|
import axios from "@utils/axiosConfig";
|
||||||
import type { Branch } from "../types";
|
import type { Branch } from "../types";
|
||||||
|
|
||||||
const API_BASE_URL = getApiBase();
|
|
||||||
|
|
||||||
interface ApiResponse<T> {
|
interface ApiResponse<T> {
|
||||||
success: boolean;
|
success: boolean;
|
||||||
data: T;
|
data: T;
|
||||||
@@ -28,32 +26,38 @@ export const useBranchesData = (stockCode?: string): UseBranchesDataResult => {
|
|||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
const loadData = useCallback(async () => {
|
useEffect(() => {
|
||||||
if (!stockCode) return;
|
if (!stockCode) return;
|
||||||
|
|
||||||
setLoading(true);
|
const controller = new AbortController();
|
||||||
setError(null);
|
|
||||||
|
|
||||||
try {
|
const loadData = async () => {
|
||||||
const response = await fetch(`${API_BASE_URL}/api/stock/${stockCode}/branches`);
|
setLoading(true);
|
||||||
const result = (await response.json()) as ApiResponse<Branch[]>;
|
setError(null);
|
||||||
|
|
||||||
if (result.success) {
|
try {
|
||||||
setBranches(result.data);
|
const { data: result } = await axios.get<ApiResponse<Branch[]>>(
|
||||||
} else {
|
`/api/stock/${stockCode}/branches`,
|
||||||
setError("加载分支机构数据失败");
|
{ signal: controller.signal }
|
||||||
|
);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
setBranches(result.data);
|
||||||
|
} else {
|
||||||
|
setError("加载分支机构数据失败");
|
||||||
|
}
|
||||||
|
} catch (err: any) {
|
||||||
|
if (err.name === "CanceledError") return;
|
||||||
|
logger.error("useBranchesData", "loadData", err, { stockCode });
|
||||||
|
setError("网络请求失败");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
}
|
}
|
||||||
} catch (err) {
|
};
|
||||||
logger.error("useBranchesData", "loadData", err, { stockCode });
|
|
||||||
setError("网络请求失败");
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, [stockCode]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
loadData();
|
loadData();
|
||||||
}, [loadData]);
|
return () => controller.abort();
|
||||||
|
}, [stockCode]);
|
||||||
|
|
||||||
return { branches, loading, error };
|
return { branches, loading, error };
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,140 +0,0 @@
|
|||||||
// src/views/Company/components/CompanyOverview/hooks/useCompanyOverviewData.ts
|
|
||||||
// 公司概览数据加载 Hook
|
|
||||||
|
|
||||||
import { useState, useEffect, useCallback } from "react";
|
|
||||||
import { logger } from "@utils/logger";
|
|
||||||
import { getApiBase } from "@utils/apiConfig";
|
|
||||||
import type {
|
|
||||||
BasicInfo,
|
|
||||||
ActualControl,
|
|
||||||
Concentration,
|
|
||||||
Management,
|
|
||||||
Shareholder,
|
|
||||||
Branch,
|
|
||||||
Announcement,
|
|
||||||
DisclosureSchedule,
|
|
||||||
CompanyOverviewData,
|
|
||||||
} from "../types";
|
|
||||||
|
|
||||||
const API_BASE_URL = getApiBase();
|
|
||||||
|
|
||||||
interface ApiResponse<T> {
|
|
||||||
success: boolean;
|
|
||||||
data: T;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 公司概览数据加载 Hook
|
|
||||||
* @param propStockCode - 股票代码
|
|
||||||
* @returns 公司概览数据
|
|
||||||
*/
|
|
||||||
export const useCompanyOverviewData = (propStockCode?: string): CompanyOverviewData => {
|
|
||||||
const [stockCode, setStockCode] = useState(propStockCode || "000001");
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [dataLoaded, setDataLoaded] = useState(false);
|
|
||||||
|
|
||||||
// 基本信息数据
|
|
||||||
const [basicInfo, setBasicInfo] = useState<BasicInfo | null>(null);
|
|
||||||
const [actualControl, setActualControl] = useState<ActualControl[]>([]);
|
|
||||||
const [concentration, setConcentration] = useState<Concentration[]>([]);
|
|
||||||
const [management, setManagement] = useState<Management[]>([]);
|
|
||||||
const [topCirculationShareholders, setTopCirculationShareholders] = useState<Shareholder[]>([]);
|
|
||||||
const [topShareholders, setTopShareholders] = useState<Shareholder[]>([]);
|
|
||||||
const [branches, setBranches] = useState<Branch[]>([]);
|
|
||||||
const [announcements, setAnnouncements] = useState<Announcement[]>([]);
|
|
||||||
const [disclosureSchedule, setDisclosureSchedule] = useState<DisclosureSchedule[]>([]);
|
|
||||||
|
|
||||||
// 监听 props 中的 stockCode 变化
|
|
||||||
useEffect(() => {
|
|
||||||
if (propStockCode && propStockCode !== stockCode) {
|
|
||||||
setStockCode(propStockCode);
|
|
||||||
setDataLoaded(false);
|
|
||||||
}
|
|
||||||
}, [propStockCode, stockCode]);
|
|
||||||
|
|
||||||
// 加载基本信息数据(9个接口)
|
|
||||||
const loadBasicInfoData = useCallback(async () => {
|
|
||||||
if (dataLoaded) return;
|
|
||||||
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const [
|
|
||||||
basicRes,
|
|
||||||
actualRes,
|
|
||||||
concentrationRes,
|
|
||||||
managementRes,
|
|
||||||
circulationRes,
|
|
||||||
shareholdersRes,
|
|
||||||
branchesRes,
|
|
||||||
announcementsRes,
|
|
||||||
disclosureRes,
|
|
||||||
] = await Promise.all([
|
|
||||||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/basic-info`).then((r) =>
|
|
||||||
r.json()
|
|
||||||
) as Promise<ApiResponse<BasicInfo>>,
|
|
||||||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/actual-control`).then((r) =>
|
|
||||||
r.json()
|
|
||||||
) as Promise<ApiResponse<ActualControl[]>>,
|
|
||||||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/concentration`).then((r) =>
|
|
||||||
r.json()
|
|
||||||
) as Promise<ApiResponse<Concentration[]>>,
|
|
||||||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/management?active_only=true`).then((r) =>
|
|
||||||
r.json()
|
|
||||||
) as Promise<ApiResponse<Management[]>>,
|
|
||||||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/top-circulation-shareholders?limit=10`).then((r) =>
|
|
||||||
r.json()
|
|
||||||
) as Promise<ApiResponse<Shareholder[]>>,
|
|
||||||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/top-shareholders?limit=10`).then((r) =>
|
|
||||||
r.json()
|
|
||||||
) as Promise<ApiResponse<Shareholder[]>>,
|
|
||||||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/branches`).then((r) =>
|
|
||||||
r.json()
|
|
||||||
) as Promise<ApiResponse<Branch[]>>,
|
|
||||||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/announcements?limit=20`).then((r) =>
|
|
||||||
r.json()
|
|
||||||
) as Promise<ApiResponse<Announcement[]>>,
|
|
||||||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/disclosure-schedule`).then((r) =>
|
|
||||||
r.json()
|
|
||||||
) as Promise<ApiResponse<DisclosureSchedule[]>>,
|
|
||||||
]);
|
|
||||||
|
|
||||||
if (basicRes.success) setBasicInfo(basicRes.data);
|
|
||||||
if (actualRes.success) setActualControl(actualRes.data);
|
|
||||||
if (concentrationRes.success) setConcentration(concentrationRes.data);
|
|
||||||
if (managementRes.success) setManagement(managementRes.data);
|
|
||||||
if (circulationRes.success) setTopCirculationShareholders(circulationRes.data);
|
|
||||||
if (shareholdersRes.success) setTopShareholders(shareholdersRes.data);
|
|
||||||
if (branchesRes.success) setBranches(branchesRes.data);
|
|
||||||
if (announcementsRes.success) setAnnouncements(announcementsRes.data);
|
|
||||||
if (disclosureRes.success) setDisclosureSchedule(disclosureRes.data);
|
|
||||||
|
|
||||||
setDataLoaded(true);
|
|
||||||
} catch (err) {
|
|
||||||
logger.error("useCompanyOverviewData", "loadBasicInfoData", err, { stockCode });
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, [stockCode, dataLoaded]);
|
|
||||||
|
|
||||||
// 首次加载
|
|
||||||
useEffect(() => {
|
|
||||||
if (stockCode) {
|
|
||||||
loadBasicInfoData();
|
|
||||||
}
|
|
||||||
}, [stockCode, loadBasicInfoData]);
|
|
||||||
|
|
||||||
return {
|
|
||||||
basicInfo,
|
|
||||||
actualControl,
|
|
||||||
concentration,
|
|
||||||
management,
|
|
||||||
topCirculationShareholders,
|
|
||||||
topShareholders,
|
|
||||||
branches,
|
|
||||||
announcements,
|
|
||||||
disclosureSchedule,
|
|
||||||
loading,
|
|
||||||
dataLoaded,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@@ -1,13 +1,11 @@
|
|||||||
// src/views/Company/components/CompanyOverview/hooks/useDisclosureData.ts
|
// src/views/Company/components/CompanyOverview/hooks/useDisclosureData.ts
|
||||||
// 披露日程数据 Hook - 用于工商信息 Tab
|
// 披露日程数据 Hook - 用于工商信息 Tab
|
||||||
|
|
||||||
import { useState, useEffect, useCallback } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { logger } from "@utils/logger";
|
import { logger } from "@utils/logger";
|
||||||
import { getApiBase } from "@utils/apiConfig";
|
import axios from "@utils/axiosConfig";
|
||||||
import type { DisclosureSchedule } from "../types";
|
import type { DisclosureSchedule } from "../types";
|
||||||
|
|
||||||
const API_BASE_URL = getApiBase();
|
|
||||||
|
|
||||||
interface ApiResponse<T> {
|
interface ApiResponse<T> {
|
||||||
success: boolean;
|
success: boolean;
|
||||||
data: T;
|
data: T;
|
||||||
@@ -28,34 +26,38 @@ export const useDisclosureData = (stockCode?: string): UseDisclosureDataResult =
|
|||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
const loadData = useCallback(async () => {
|
useEffect(() => {
|
||||||
if (!stockCode) return;
|
if (!stockCode) return;
|
||||||
|
|
||||||
setLoading(true);
|
const controller = new AbortController();
|
||||||
setError(null);
|
|
||||||
|
|
||||||
try {
|
const loadData = async () => {
|
||||||
const response = await fetch(
|
setLoading(true);
|
||||||
`${API_BASE_URL}/api/stock/${stockCode}/disclosure-schedule`
|
setError(null);
|
||||||
);
|
|
||||||
const result = (await response.json()) as ApiResponse<DisclosureSchedule[]>;
|
|
||||||
|
|
||||||
if (result.success) {
|
try {
|
||||||
setDisclosureSchedule(result.data);
|
const { data: result } = await axios.get<ApiResponse<DisclosureSchedule[]>>(
|
||||||
} else {
|
`/api/stock/${stockCode}/disclosure-schedule`,
|
||||||
setError("加载披露日程数据失败");
|
{ signal: controller.signal }
|
||||||
|
);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
setDisclosureSchedule(result.data);
|
||||||
|
} else {
|
||||||
|
setError("加载披露日程数据失败");
|
||||||
|
}
|
||||||
|
} catch (err: any) {
|
||||||
|
if (err.name === "CanceledError") return;
|
||||||
|
logger.error("useDisclosureData", "loadData", err, { stockCode });
|
||||||
|
setError("网络请求失败");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
}
|
}
|
||||||
} catch (err) {
|
};
|
||||||
logger.error("useDisclosureData", "loadData", err, { stockCode });
|
|
||||||
setError("网络请求失败");
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, [stockCode]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
loadData();
|
loadData();
|
||||||
}, [loadData]);
|
return () => controller.abort();
|
||||||
|
}, [stockCode]);
|
||||||
|
|
||||||
return { disclosureSchedule, loading, error };
|
return { disclosureSchedule, loading, error };
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,13 +1,11 @@
|
|||||||
// src/views/Company/components/CompanyOverview/hooks/useManagementData.ts
|
// src/views/Company/components/CompanyOverview/hooks/useManagementData.ts
|
||||||
// 管理团队数据 Hook - 用于管理团队 Tab
|
// 管理团队数据 Hook - 用于管理团队 Tab
|
||||||
|
|
||||||
import { useState, useEffect, useCallback } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { logger } from "@utils/logger";
|
import { logger } from "@utils/logger";
|
||||||
import { getApiBase } from "@utils/apiConfig";
|
import axios from "@utils/axiosConfig";
|
||||||
import type { Management } from "../types";
|
import type { Management } from "../types";
|
||||||
|
|
||||||
const API_BASE_URL = getApiBase();
|
|
||||||
|
|
||||||
interface ApiResponse<T> {
|
interface ApiResponse<T> {
|
||||||
success: boolean;
|
success: boolean;
|
||||||
data: T;
|
data: T;
|
||||||
@@ -28,34 +26,38 @@ export const useManagementData = (stockCode?: string): UseManagementDataResult =
|
|||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
const loadData = useCallback(async () => {
|
useEffect(() => {
|
||||||
if (!stockCode) return;
|
if (!stockCode) return;
|
||||||
|
|
||||||
setLoading(true);
|
const controller = new AbortController();
|
||||||
setError(null);
|
|
||||||
|
|
||||||
try {
|
const loadData = async () => {
|
||||||
const response = await fetch(
|
setLoading(true);
|
||||||
`${API_BASE_URL}/api/stock/${stockCode}/management?active_only=true`
|
setError(null);
|
||||||
);
|
|
||||||
const result = (await response.json()) as ApiResponse<Management[]>;
|
|
||||||
|
|
||||||
if (result.success) {
|
try {
|
||||||
setManagement(result.data);
|
const { data: result } = await axios.get<ApiResponse<Management[]>>(
|
||||||
} else {
|
`/api/stock/${stockCode}/management?active_only=true`,
|
||||||
setError("加载管理团队数据失败");
|
{ signal: controller.signal }
|
||||||
|
);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
setManagement(result.data);
|
||||||
|
} else {
|
||||||
|
setError("加载管理团队数据失败");
|
||||||
|
}
|
||||||
|
} catch (err: any) {
|
||||||
|
if (err.name === "CanceledError") return;
|
||||||
|
logger.error("useManagementData", "loadData", err, { stockCode });
|
||||||
|
setError("网络请求失败");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
}
|
}
|
||||||
} catch (err) {
|
};
|
||||||
logger.error("useManagementData", "loadData", err, { stockCode });
|
|
||||||
setError("网络请求失败");
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, [stockCode]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
loadData();
|
loadData();
|
||||||
}, [loadData]);
|
return () => controller.abort();
|
||||||
|
}, [stockCode]);
|
||||||
|
|
||||||
return { management, loading, error };
|
return { management, loading, error };
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,13 +1,11 @@
|
|||||||
// src/views/Company/components/CompanyOverview/hooks/useShareholderData.ts
|
// src/views/Company/components/CompanyOverview/hooks/useShareholderData.ts
|
||||||
// 股权结构数据 Hook - 用于股权结构 Tab
|
// 股权结构数据 Hook - 用于股权结构 Tab
|
||||||
|
|
||||||
import { useState, useEffect, useCallback } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { logger } from "@utils/logger";
|
import { logger } from "@utils/logger";
|
||||||
import { getApiBase } from "@utils/apiConfig";
|
import axios from "@utils/axiosConfig";
|
||||||
import type { ActualControl, Concentration, Shareholder } from "../types";
|
import type { ActualControl, Concentration, Shareholder } from "../types";
|
||||||
|
|
||||||
const API_BASE_URL = getApiBase();
|
|
||||||
|
|
||||||
interface ApiResponse<T> {
|
interface ApiResponse<T> {
|
||||||
success: boolean;
|
success: boolean;
|
||||||
data: T;
|
data: T;
|
||||||
@@ -34,43 +32,44 @@ export const useShareholderData = (stockCode?: string): UseShareholderDataResult
|
|||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
const loadData = useCallback(async () => {
|
useEffect(() => {
|
||||||
if (!stockCode) return;
|
if (!stockCode) return;
|
||||||
|
|
||||||
setLoading(true);
|
const controller = new AbortController();
|
||||||
setError(null);
|
|
||||||
|
|
||||||
try {
|
const loadData = async () => {
|
||||||
const [actualRes, concentrationRes, shareholdersRes, circulationRes] = await Promise.all([
|
setLoading(true);
|
||||||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/actual-control`).then((r) =>
|
setError(null);
|
||||||
r.json()
|
|
||||||
) as Promise<ApiResponse<ActualControl[]>>,
|
|
||||||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/concentration`).then((r) =>
|
|
||||||
r.json()
|
|
||||||
) as Promise<ApiResponse<Concentration[]>>,
|
|
||||||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/top-shareholders?limit=10`).then((r) =>
|
|
||||||
r.json()
|
|
||||||
) as Promise<ApiResponse<Shareholder[]>>,
|
|
||||||
fetch(`${API_BASE_URL}/api/stock/${stockCode}/top-circulation-shareholders?limit=10`).then((r) =>
|
|
||||||
r.json()
|
|
||||||
) as Promise<ApiResponse<Shareholder[]>>,
|
|
||||||
]);
|
|
||||||
|
|
||||||
if (actualRes.success) setActualControl(actualRes.data);
|
try {
|
||||||
if (concentrationRes.success) setConcentration(concentrationRes.data);
|
const [
|
||||||
if (shareholdersRes.success) setTopShareholders(shareholdersRes.data);
|
{ data: actualRes },
|
||||||
if (circulationRes.success) setTopCirculationShareholders(circulationRes.data);
|
{ data: concentrationRes },
|
||||||
} catch (err) {
|
{ data: shareholdersRes },
|
||||||
logger.error("useShareholderData", "loadData", err, { stockCode });
|
{ data: circulationRes },
|
||||||
setError("加载股权结构数据失败");
|
] = await Promise.all([
|
||||||
} finally {
|
axios.get<ApiResponse<ActualControl[]>>(`/api/stock/${stockCode}/actual-control`, { signal: controller.signal }),
|
||||||
setLoading(false);
|
axios.get<ApiResponse<Concentration[]>>(`/api/stock/${stockCode}/concentration`, { signal: controller.signal }),
|
||||||
}
|
axios.get<ApiResponse<Shareholder[]>>(`/api/stock/${stockCode}/top-shareholders?limit=10`, { signal: controller.signal }),
|
||||||
}, [stockCode]);
|
axios.get<ApiResponse<Shareholder[]>>(`/api/stock/${stockCode}/top-circulation-shareholders?limit=10`, { signal: controller.signal }),
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (actualRes.success) setActualControl(actualRes.data);
|
||||||
|
if (concentrationRes.success) setConcentration(concentrationRes.data);
|
||||||
|
if (shareholdersRes.success) setTopShareholders(shareholdersRes.data);
|
||||||
|
if (circulationRes.success) setTopCirculationShareholders(circulationRes.data);
|
||||||
|
} catch (err: any) {
|
||||||
|
if (err.name === "CanceledError") return;
|
||||||
|
logger.error("useShareholderData", "loadData", err, { stockCode });
|
||||||
|
setError("加载股权结构数据失败");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
loadData();
|
loadData();
|
||||||
}, [loadData]);
|
return () => controller.abort();
|
||||||
|
}, [stockCode]);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
actualControl,
|
actualControl,
|
||||||
|
|||||||
@@ -4,10 +4,9 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { VStack } from "@chakra-ui/react";
|
import { VStack } from "@chakra-ui/react";
|
||||||
|
|
||||||
import { useBasicInfo } from "./hooks/useBasicInfo";
|
|
||||||
import type { CompanyOverviewProps } from "./types";
|
import type { CompanyOverviewProps } from "./types";
|
||||||
|
|
||||||
// 子组件(暂保持 JS)
|
// 子组件
|
||||||
import BasicInfoTab from "./BasicInfoTab";
|
import BasicInfoTab from "./BasicInfoTab";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -18,17 +17,13 @@ import BasicInfoTab from "./BasicInfoTab";
|
|||||||
*
|
*
|
||||||
* 懒加载策略:
|
* 懒加载策略:
|
||||||
* - BasicInfoTab 内部根据 Tab 切换懒加载数据
|
* - BasicInfoTab 内部根据 Tab 切换懒加载数据
|
||||||
|
* - 各 Panel 组件自行获取所需数据(如 BusinessInfoPanel 调用 useBasicInfo)
|
||||||
*/
|
*/
|
||||||
const CompanyOverview: React.FC<CompanyOverviewProps> = ({ stockCode }) => {
|
const CompanyOverview: React.FC<CompanyOverviewProps> = ({ stockCode }) => {
|
||||||
const { basicInfo } = useBasicInfo(stockCode);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<VStack spacing={6} align="stretch">
|
<VStack spacing={6} align="stretch">
|
||||||
{/* 基本信息内容 - 传入 stockCode,内部懒加载各 Tab 数据 */}
|
{/* 基本信息内容 - 传入 stockCode,内部懒加载各 Tab 数据 */}
|
||||||
<BasicInfoTab
|
<BasicInfoTab stockCode={stockCode} />
|
||||||
stockCode={stockCode}
|
|
||||||
basicInfo={basicInfo}
|
|
||||||
/>
|
|
||||||
</VStack>
|
</VStack>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -22,6 +22,15 @@ export interface BasicInfo {
|
|||||||
email?: string;
|
email?: string;
|
||||||
tel?: string;
|
tel?: string;
|
||||||
company_intro?: string;
|
company_intro?: string;
|
||||||
|
// 工商信息字段
|
||||||
|
credit_code?: string;
|
||||||
|
company_size?: string;
|
||||||
|
reg_address?: string;
|
||||||
|
office_address?: string;
|
||||||
|
accounting_firm?: string;
|
||||||
|
law_firm?: string;
|
||||||
|
main_business?: string;
|
||||||
|
business_scope?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -107,23 +116,6 @@ export interface DisclosureSchedule {
|
|||||||
disclosure_date?: string;
|
disclosure_date?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* useCompanyOverviewData Hook 返回值
|
|
||||||
*/
|
|
||||||
export interface CompanyOverviewData {
|
|
||||||
basicInfo: BasicInfo | null;
|
|
||||||
actualControl: ActualControl[];
|
|
||||||
concentration: Concentration[];
|
|
||||||
management: Management[];
|
|
||||||
topCirculationShareholders: Shareholder[];
|
|
||||||
topShareholders: Shareholder[];
|
|
||||||
branches: Branch[];
|
|
||||||
announcements: Announcement[];
|
|
||||||
disclosureSchedule: DisclosureSchedule[];
|
|
||||||
loading: boolean;
|
|
||||||
dataLoaded: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* CompanyOverview 组件 Props
|
* CompanyOverview 组件 Props
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -3,13 +3,11 @@
|
|||||||
|
|
||||||
import React, { useState, useEffect, useCallback, useRef } from "react";
|
import React, { useState, useEffect, useCallback, useRef } from "react";
|
||||||
import { logger } from "@utils/logger";
|
import { logger } from "@utils/logger";
|
||||||
import { getApiBase } from "@utils/apiConfig";
|
import axios from "@utils/axiosConfig";
|
||||||
|
|
||||||
// 复用原有的展示组件
|
// 复用原有的展示组件
|
||||||
import DeepAnalysisTab from "../CompanyOverview/DeepAnalysisTab";
|
import DeepAnalysisTab from "../CompanyOverview/DeepAnalysisTab";
|
||||||
|
|
||||||
const API_BASE_URL = getApiBase();
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Tab 与 API 接口映射
|
* Tab 与 API 接口映射
|
||||||
* - strategy 和 business 共用 comprehensive 接口
|
* - strategy 和 business 共用 comprehensive 接口
|
||||||
@@ -84,9 +82,9 @@ const DeepAnalysis = ({ stockCode }) => {
|
|||||||
switch (apiKey) {
|
switch (apiKey) {
|
||||||
case "comprehensive":
|
case "comprehensive":
|
||||||
setComprehensiveLoading(true);
|
setComprehensiveLoading(true);
|
||||||
const comprehensiveRes = await fetch(
|
const { data: comprehensiveRes } = await axios.get(
|
||||||
`${API_BASE_URL}/api/company/comprehensive-analysis/${stockCode}`
|
`/api/company/comprehensive-analysis/${stockCode}`
|
||||||
).then((r) => r.json());
|
);
|
||||||
// 检查 stockCode 是否已变更(防止竞态)
|
// 检查 stockCode 是否已变更(防止竞态)
|
||||||
if (currentStockCodeRef.current === stockCode) {
|
if (currentStockCodeRef.current === stockCode) {
|
||||||
if (comprehensiveRes.success)
|
if (comprehensiveRes.success)
|
||||||
@@ -97,9 +95,9 @@ const DeepAnalysis = ({ stockCode }) => {
|
|||||||
|
|
||||||
case "valueChain":
|
case "valueChain":
|
||||||
setValueChainLoading(true);
|
setValueChainLoading(true);
|
||||||
const valueChainRes = await fetch(
|
const { data: valueChainRes } = await axios.get(
|
||||||
`${API_BASE_URL}/api/company/value-chain-analysis/${stockCode}`
|
`/api/company/value-chain-analysis/${stockCode}`
|
||||||
).then((r) => r.json());
|
);
|
||||||
if (currentStockCodeRef.current === stockCode) {
|
if (currentStockCodeRef.current === stockCode) {
|
||||||
if (valueChainRes.success) setValueChainData(valueChainRes.data);
|
if (valueChainRes.success) setValueChainData(valueChainRes.data);
|
||||||
loadedApisRef.current.valueChain = true;
|
loadedApisRef.current.valueChain = true;
|
||||||
@@ -108,9 +106,9 @@ const DeepAnalysis = ({ stockCode }) => {
|
|||||||
|
|
||||||
case "keyFactors":
|
case "keyFactors":
|
||||||
setKeyFactorsLoading(true);
|
setKeyFactorsLoading(true);
|
||||||
const keyFactorsRes = await fetch(
|
const { data: keyFactorsRes } = await axios.get(
|
||||||
`${API_BASE_URL}/api/company/key-factors-timeline/${stockCode}`
|
`/api/company/key-factors-timeline/${stockCode}`
|
||||||
).then((r) => r.json());
|
);
|
||||||
if (currentStockCodeRef.current === stockCode) {
|
if (currentStockCodeRef.current === stockCode) {
|
||||||
if (keyFactorsRes.success) setKeyFactorsData(keyFactorsRes.data);
|
if (keyFactorsRes.success) setKeyFactorsData(keyFactorsRes.data);
|
||||||
loadedApisRef.current.keyFactors = true;
|
loadedApisRef.current.keyFactors = true;
|
||||||
@@ -119,9 +117,9 @@ const DeepAnalysis = ({ stockCode }) => {
|
|||||||
|
|
||||||
case "industryRank":
|
case "industryRank":
|
||||||
setIndustryRankLoading(true);
|
setIndustryRankLoading(true);
|
||||||
const industryRankRes = await fetch(
|
const { data: industryRankRes } = await axios.get(
|
||||||
`${API_BASE_URL}/api/financial/industry-rank/${stockCode}`
|
`/api/financial/industry-rank/${stockCode}`
|
||||||
).then((r) => r.json());
|
);
|
||||||
if (currentStockCodeRef.current === stockCode) {
|
if (currentStockCodeRef.current === stockCode) {
|
||||||
if (industryRankRes.success) setIndustryRankData(industryRankRes.data);
|
if (industryRankRes.success) setIndustryRankData(industryRankRes.data);
|
||||||
loadedApisRef.current.industryRank = true;
|
loadedApisRef.current.industryRank = true;
|
||||||
|
|||||||
@@ -12,9 +12,7 @@ import {
|
|||||||
} from '@chakra-ui/react';
|
} from '@chakra-ui/react';
|
||||||
import { Tag } from 'antd';
|
import { Tag } from 'antd';
|
||||||
import { logger } from '@utils/logger';
|
import { logger } from '@utils/logger';
|
||||||
import { getApiBase } from '@utils/apiConfig';
|
import axios from '@utils/axiosConfig';
|
||||||
|
|
||||||
const API_BASE_URL = getApiBase();
|
|
||||||
|
|
||||||
// 黑金主题
|
// 黑金主题
|
||||||
const THEME = {
|
const THEME = {
|
||||||
@@ -53,10 +51,9 @@ const ForecastPanel = ({ stockCode }) => {
|
|||||||
|
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const response = await fetch(
|
const { data: result } = await axios.get(
|
||||||
`${API_BASE_URL}/api/stock/${stockCode}/forecast`
|
`/api/stock/${stockCode}/forecast`
|
||||||
);
|
);
|
||||||
const result = await response.json();
|
|
||||||
if (result.success && result.data) {
|
if (result.success && result.data) {
|
||||||
setForecast(result.data);
|
setForecast(result.data);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,11 +3,9 @@
|
|||||||
|
|
||||||
import React, { useState, useEffect, useCallback } from 'react';
|
import React, { useState, useEffect, useCallback } from 'react';
|
||||||
import { logger } from '@utils/logger';
|
import { logger } from '@utils/logger';
|
||||||
import { getApiBase } from '@utils/apiConfig';
|
import axios from '@utils/axiosConfig';
|
||||||
import NewsEventsTab from '../../CompanyOverview/NewsEventsTab';
|
import NewsEventsTab from '../../CompanyOverview/NewsEventsTab';
|
||||||
|
|
||||||
const API_BASE_URL = getApiBase();
|
|
||||||
|
|
||||||
const NewsPanel = ({ stockCode }) => {
|
const NewsPanel = ({ stockCode }) => {
|
||||||
const [newsEvents, setNewsEvents] = useState([]);
|
const [newsEvents, setNewsEvents] = useState([]);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
@@ -25,10 +23,9 @@ const NewsPanel = ({ stockCode }) => {
|
|||||||
// 获取股票名称
|
// 获取股票名称
|
||||||
const fetchStockName = useCallback(async () => {
|
const fetchStockName = useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
const response = await fetch(
|
const { data: result } = await axios.get(
|
||||||
`${API_BASE_URL}/api/stock/${stockCode}/basic-info`
|
`/api/stock/${stockCode}/basic-info`
|
||||||
);
|
);
|
||||||
const result = await response.json();
|
|
||||||
if (result.success && result.data) {
|
if (result.success && result.data) {
|
||||||
const name = result.data.SECNAME || result.data.ORGNAME || stockCode;
|
const name = result.data.SECNAME || result.data.ORGNAME || stockCode;
|
||||||
setStockName(name);
|
setStockName(name);
|
||||||
@@ -47,10 +44,9 @@ const NewsPanel = ({ stockCode }) => {
|
|||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const searchTerm = query || stockName || stockCode;
|
const searchTerm = query || stockName || stockCode;
|
||||||
const response = await fetch(
|
const { data: result } = await axios.get(
|
||||||
`${API_BASE_URL}/api/events?q=${encodeURIComponent(searchTerm)}&page=${page}&per_page=10`
|
`/api/events?q=${encodeURIComponent(searchTerm)}&page=${page}&per_page=10`
|
||||||
);
|
);
|
||||||
const result = await response.json();
|
|
||||||
|
|
||||||
if (result.success) {
|
if (result.success) {
|
||||||
setNewsEvents(result.data || []);
|
setNewsEvents(result.data || []);
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
// src/views/Company/components/MarketDataView/services/marketService.ts
|
// src/views/Company/components/MarketDataView/services/marketService.ts
|
||||||
// MarketDataView API 服务层
|
// MarketDataView API 服务层
|
||||||
|
|
||||||
import { getApiBase } from '@utils/apiConfig';
|
import axios from '@utils/axiosConfig';
|
||||||
import { logger } from '@utils/logger';
|
import { logger } from '@utils/logger';
|
||||||
import type {
|
import type {
|
||||||
MarketSummary,
|
MarketSummary,
|
||||||
@@ -23,27 +23,6 @@ interface ApiResponse<T> {
|
|||||||
message?: string;
|
message?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* API 基础 URL
|
|
||||||
*/
|
|
||||||
const getBaseUrl = (): string => getApiBase();
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 通用 API 请求函数
|
|
||||||
*/
|
|
||||||
const apiRequest = async <T>(url: string): Promise<ApiResponse<T>> => {
|
|
||||||
try {
|
|
||||||
const response = await fetch(`${getBaseUrl()}${url}`);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`HTTP error! status: ${response.status}`);
|
|
||||||
}
|
|
||||||
return response.json();
|
|
||||||
} catch (error) {
|
|
||||||
logger.error('marketService', 'apiRequest', error, { url });
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 市场数据服务
|
* 市场数据服务
|
||||||
*/
|
*/
|
||||||
@@ -53,7 +32,8 @@ export const marketService = {
|
|||||||
* @param stockCode 股票代码
|
* @param stockCode 股票代码
|
||||||
*/
|
*/
|
||||||
async getMarketSummary(stockCode: string): Promise<ApiResponse<MarketSummary>> {
|
async getMarketSummary(stockCode: string): Promise<ApiResponse<MarketSummary>> {
|
||||||
return apiRequest<MarketSummary>(`/api/market/summary/${stockCode}`);
|
const { data } = await axios.get<ApiResponse<MarketSummary>>(`/api/market/summary/${stockCode}`);
|
||||||
|
return data;
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -62,7 +42,8 @@ export const marketService = {
|
|||||||
* @param days 天数,默认 60 天
|
* @param days 天数,默认 60 天
|
||||||
*/
|
*/
|
||||||
async getTradeData(stockCode: string, days: number = 60): Promise<ApiResponse<TradeDayData[]>> {
|
async getTradeData(stockCode: string, days: number = 60): Promise<ApiResponse<TradeDayData[]>> {
|
||||||
return apiRequest<TradeDayData[]>(`/api/market/trade/${stockCode}?days=${days}`);
|
const { data } = await axios.get<ApiResponse<TradeDayData[]>>(`/api/market/trade/${stockCode}?days=${days}`);
|
||||||
|
return data;
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -71,7 +52,8 @@ export const marketService = {
|
|||||||
* @param days 天数,默认 30 天
|
* @param days 天数,默认 30 天
|
||||||
*/
|
*/
|
||||||
async getFundingData(stockCode: string, days: number = 30): Promise<ApiResponse<FundingDayData[]>> {
|
async getFundingData(stockCode: string, days: number = 30): Promise<ApiResponse<FundingDayData[]>> {
|
||||||
return apiRequest<FundingDayData[]>(`/api/market/funding/${stockCode}?days=${days}`);
|
const { data } = await axios.get<ApiResponse<FundingDayData[]>>(`/api/market/funding/${stockCode}?days=${days}`);
|
||||||
|
return data;
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -80,11 +62,8 @@ export const marketService = {
|
|||||||
* @param days 天数,默认 30 天
|
* @param days 天数,默认 30 天
|
||||||
*/
|
*/
|
||||||
async getBigDealData(stockCode: string, days: number = 30): Promise<BigDealData> {
|
async getBigDealData(stockCode: string, days: number = 30): Promise<BigDealData> {
|
||||||
const response = await fetch(`${getBaseUrl()}/api/market/bigdeal/${stockCode}?days=${days}`);
|
const { data } = await axios.get<BigDealData>(`/api/market/bigdeal/${stockCode}?days=${days}`);
|
||||||
if (!response.ok) {
|
return data;
|
||||||
throw new Error(`HTTP error! status: ${response.status}`);
|
|
||||||
}
|
|
||||||
return response.json();
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -93,11 +72,8 @@ export const marketService = {
|
|||||||
* @param days 天数,默认 30 天
|
* @param days 天数,默认 30 天
|
||||||
*/
|
*/
|
||||||
async getUnusualData(stockCode: string, days: number = 30): Promise<UnusualData> {
|
async getUnusualData(stockCode: string, days: number = 30): Promise<UnusualData> {
|
||||||
const response = await fetch(`${getBaseUrl()}/api/market/unusual/${stockCode}?days=${days}`);
|
const { data } = await axios.get<UnusualData>(`/api/market/unusual/${stockCode}?days=${days}`);
|
||||||
if (!response.ok) {
|
return data;
|
||||||
throw new Error(`HTTP error! status: ${response.status}`);
|
|
||||||
}
|
|
||||||
return response.json();
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -105,7 +81,8 @@ export const marketService = {
|
|||||||
* @param stockCode 股票代码
|
* @param stockCode 股票代码
|
||||||
*/
|
*/
|
||||||
async getPledgeData(stockCode: string): Promise<ApiResponse<PledgeData[]>> {
|
async getPledgeData(stockCode: string): Promise<ApiResponse<PledgeData[]>> {
|
||||||
return apiRequest<PledgeData[]>(`/api/market/pledge/${stockCode}`);
|
const { data } = await axios.get<ApiResponse<PledgeData[]>>(`/api/market/pledge/${stockCode}`);
|
||||||
|
return data;
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -123,7 +100,8 @@ export const marketService = {
|
|||||||
if (startDate && endDate) {
|
if (startDate && endDate) {
|
||||||
url += `?start_date=${startDate}&end_date=${endDate}`;
|
url += `?start_date=${startDate}&end_date=${endDate}`;
|
||||||
}
|
}
|
||||||
return apiRequest<RiseAnalysis[]>(url);
|
const { data } = await axios.get<ApiResponse<RiseAnalysis[]>>(url);
|
||||||
|
return data;
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -132,18 +110,8 @@ export const marketService = {
|
|||||||
*/
|
*/
|
||||||
async getMinuteData(stockCode: string): Promise<MinuteData> {
|
async getMinuteData(stockCode: string): Promise<MinuteData> {
|
||||||
try {
|
try {
|
||||||
const response = await fetch(`${getBaseUrl()}/api/stock/${stockCode}/latest-minute`, {
|
const { data } = await axios.get<MinuteData>(`/api/stock/${stockCode}/latest-minute`);
|
||||||
method: 'GET',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error('Failed to fetch minute data');
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
if (data.data && Array.isArray(data.data)) {
|
if (data.data && Array.isArray(data.data)) {
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,6 +18,7 @@ import {
|
|||||||
} from '@chakra-ui/react';
|
} from '@chakra-ui/react';
|
||||||
import { SearchIcon } from '@chakra-ui/icons';
|
import { SearchIcon } from '@chakra-ui/icons';
|
||||||
import { BarChart2 } from 'lucide-react';
|
import { BarChart2 } from 'lucide-react';
|
||||||
|
import { useStockSearch, type Stock } from '../../../hooks/useStockSearch';
|
||||||
|
|
||||||
interface CompareStockInputProps {
|
interface CompareStockInputProps {
|
||||||
onCompare: (stockCode: string) => void;
|
onCompare: (stockCode: string) => void;
|
||||||
@@ -25,11 +26,6 @@ interface CompareStockInputProps {
|
|||||||
currentStockCode?: string;
|
currentStockCode?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Stock {
|
|
||||||
code: string;
|
|
||||||
name: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface RootState {
|
interface RootState {
|
||||||
stock: {
|
stock: {
|
||||||
allStocks: Stock[];
|
allStocks: Stock[];
|
||||||
@@ -43,7 +39,6 @@ const CompareStockInput: React.FC<CompareStockInputProps> = ({
|
|||||||
}) => {
|
}) => {
|
||||||
const [inputValue, setInputValue] = useState('');
|
const [inputValue, setInputValue] = useState('');
|
||||||
const [showDropdown, setShowDropdown] = useState(false);
|
const [showDropdown, setShowDropdown] = useState(false);
|
||||||
const [filteredStocks, setFilteredStocks] = useState<Stock[]>([]);
|
|
||||||
const [selectedStock, setSelectedStock] = useState<Stock | null>(null);
|
const [selectedStock, setSelectedStock] = useState<Stock | null>(null);
|
||||||
const containerRef = useRef<HTMLDivElement>(null);
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
@@ -55,25 +50,16 @@ const CompareStockInput: React.FC<CompareStockInputProps> = ({
|
|||||||
const goldColor = '#F4D03F';
|
const goldColor = '#F4D03F';
|
||||||
const bgColor = '#1A202C';
|
const bgColor = '#1A202C';
|
||||||
|
|
||||||
// 模糊搜索过滤
|
// 使用共享的搜索 Hook(排除当前股票)
|
||||||
|
const filteredStocks = useStockSearch(allStocks, inputValue, {
|
||||||
|
excludeCode: currentStockCode,
|
||||||
|
limit: 8,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 根据搜索结果更新下拉显示状态
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (inputValue && inputValue.trim()) {
|
setShowDropdown(filteredStocks.length > 0 && !!inputValue?.trim());
|
||||||
const searchTerm = inputValue.trim().toLowerCase();
|
}, [filteredStocks, inputValue]);
|
||||||
const filtered = allStocks
|
|
||||||
.filter(
|
|
||||||
(stock) =>
|
|
||||||
stock.code !== currentStockCode && // 排除当前股票
|
|
||||||
(stock.code.toLowerCase().includes(searchTerm) ||
|
|
||||||
stock.name.includes(inputValue.trim()))
|
|
||||||
)
|
|
||||||
.slice(0, 8); // 限制显示8条
|
|
||||||
setFilteredStocks(filtered);
|
|
||||||
setShowDropdown(filtered.length > 0);
|
|
||||||
} else {
|
|
||||||
setFilteredStocks([]);
|
|
||||||
setShowDropdown(false);
|
|
||||||
}
|
|
||||||
}, [inputValue, allStocks, currentStockCode]);
|
|
||||||
|
|
||||||
// 点击外部关闭下拉
|
// 点击外部关闭下拉
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|||||||
@@ -7,12 +7,10 @@
|
|||||||
import { useState, useEffect, useCallback } from 'react';
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
import { stockService } from '@services/eventService';
|
import { stockService } from '@services/eventService';
|
||||||
import { logger } from '@utils/logger';
|
import { logger } from '@utils/logger';
|
||||||
import { getApiBase } from '@utils/apiConfig';
|
import axios from '@utils/axiosConfig';
|
||||||
import type { StockQuoteCardData } from '../types';
|
import type { StockQuoteCardData } from '../types';
|
||||||
import type { BasicInfo } from '../../CompanyOverview/types';
|
import type { BasicInfo } from '../../CompanyOverview/types';
|
||||||
|
|
||||||
const API_BASE_URL = getApiBase();
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 将 API 响应数据转换为 StockQuoteCard 所需格式
|
* 将 API 响应数据转换为 StockQuoteCard 所需格式
|
||||||
*/
|
*/
|
||||||
@@ -75,24 +73,18 @@ export const useStockQuoteData = (stockCode?: string): UseStockQuoteDataResult =
|
|||||||
const [basicLoading, setBasicLoading] = useState(false);
|
const [basicLoading, setBasicLoading] = useState(false);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
// 获取行情数据
|
// 用于手动刷新的 ref
|
||||||
const fetchQuote = useCallback(async () => {
|
const refetchRef = useCallback(async () => {
|
||||||
if (!stockCode) {
|
if (!stockCode) return;
|
||||||
setQuoteData(null);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
// 获取行情数据
|
||||||
setQuoteLoading(true);
|
setQuoteLoading(true);
|
||||||
setError(null);
|
setError(null);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
logger.debug('useStockQuoteData', '获取股票行情', { stockCode });
|
logger.debug('useStockQuoteData', '获取股票行情', { stockCode });
|
||||||
const quotes = await stockService.getQuotes([stockCode]);
|
const quotes = await stockService.getQuotes([stockCode]);
|
||||||
|
|
||||||
// API 返回格式: { [stockCode]: quoteData }
|
|
||||||
const quoteResult = quotes?.[stockCode] || quotes;
|
const quoteResult = quotes?.[stockCode] || quotes;
|
||||||
const transformedData = transformQuoteData(quoteResult, stockCode);
|
const transformedData = transformQuoteData(quoteResult, stockCode);
|
||||||
|
|
||||||
logger.debug('useStockQuoteData', '行情数据转换完成', { stockCode, hasData: !!transformedData });
|
logger.debug('useStockQuoteData', '行情数据转换完成', { stockCode, hasData: !!transformedData });
|
||||||
setQuoteData(transformedData);
|
setQuoteData(transformedData);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@@ -102,50 +94,85 @@ export const useStockQuoteData = (stockCode?: string): UseStockQuoteDataResult =
|
|||||||
} finally {
|
} finally {
|
||||||
setQuoteLoading(false);
|
setQuoteLoading(false);
|
||||||
}
|
}
|
||||||
}, [stockCode]);
|
|
||||||
|
|
||||||
// 获取基本信息
|
|
||||||
const fetchBasicInfo = useCallback(async () => {
|
|
||||||
if (!stockCode) {
|
|
||||||
setBasicInfo(null);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
// 获取基本信息
|
||||||
setBasicLoading(true);
|
setBasicLoading(true);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await fetch(`${API_BASE_URL}/api/stock/${stockCode}/basic-info`);
|
const { data: result } = await axios.get(`/api/stock/${stockCode}/basic-info`);
|
||||||
const result = await response.json();
|
|
||||||
|
|
||||||
if (result.success) {
|
if (result.success) {
|
||||||
setBasicInfo(result.data);
|
setBasicInfo(result.data);
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
logger.error('useStockQuoteData', '获取基本信息失败', err);
|
logger.error('useStockQuoteData', '获取基本信息失败', err);
|
||||||
// 基本信息获取失败不影响主流程,只记录日志
|
|
||||||
} finally {
|
} finally {
|
||||||
setBasicLoading(false);
|
setBasicLoading(false);
|
||||||
}
|
}
|
||||||
}, [stockCode]);
|
}, [stockCode]);
|
||||||
|
|
||||||
// stockCode 变化时重新获取数据
|
// stockCode 变化时重新获取数据(带取消支持)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchQuote();
|
if (!stockCode) {
|
||||||
fetchBasicInfo();
|
setQuoteData(null);
|
||||||
}, [fetchQuote, fetchBasicInfo]);
|
setBasicInfo(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// 手动刷新
|
const controller = new AbortController();
|
||||||
const refetch = useCallback(() => {
|
let isCancelled = false;
|
||||||
fetchQuote();
|
|
||||||
fetchBasicInfo();
|
const fetchData = async () => {
|
||||||
}, [fetchQuote, fetchBasicInfo]);
|
// 获取行情数据
|
||||||
|
setQuoteLoading(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
logger.debug('useStockQuoteData', '获取股票行情', { stockCode });
|
||||||
|
const quotes = await stockService.getQuotes([stockCode]);
|
||||||
|
if (isCancelled) return;
|
||||||
|
const quoteResult = quotes?.[stockCode] || quotes;
|
||||||
|
const transformedData = transformQuoteData(quoteResult, stockCode);
|
||||||
|
logger.debug('useStockQuoteData', '行情数据转换完成', { stockCode, hasData: !!transformedData });
|
||||||
|
setQuoteData(transformedData);
|
||||||
|
} catch (err: any) {
|
||||||
|
if (isCancelled || err.name === 'CanceledError') return;
|
||||||
|
logger.error('useStockQuoteData', '获取行情失败', err);
|
||||||
|
setError('获取行情数据失败');
|
||||||
|
setQuoteData(null);
|
||||||
|
} finally {
|
||||||
|
if (!isCancelled) setQuoteLoading(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取基本信息
|
||||||
|
setBasicLoading(true);
|
||||||
|
try {
|
||||||
|
const { data: result } = await axios.get(`/api/stock/${stockCode}/basic-info`, {
|
||||||
|
signal: controller.signal,
|
||||||
|
});
|
||||||
|
if (isCancelled) return;
|
||||||
|
if (result.success) {
|
||||||
|
setBasicInfo(result.data);
|
||||||
|
}
|
||||||
|
} catch (err: any) {
|
||||||
|
if (isCancelled || err.name === 'CanceledError') return;
|
||||||
|
logger.error('useStockQuoteData', '获取基本信息失败', err);
|
||||||
|
} finally {
|
||||||
|
if (!isCancelled) setBasicLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchData();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
isCancelled = true;
|
||||||
|
controller.abort();
|
||||||
|
};
|
||||||
|
}, [stockCode]);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
quoteData,
|
quoteData,
|
||||||
basicInfo,
|
basicInfo,
|
||||||
isLoading: quoteLoading || basicLoading,
|
isLoading: quoteLoading || basicLoading,
|
||||||
error,
|
error,
|
||||||
refetch,
|
refetch: refetchRef,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,38 +0,0 @@
|
|||||||
import type { StockQuoteCardData } from './types';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 贵州茅台 Mock 数据
|
|
||||||
*/
|
|
||||||
export const mockStockQuoteData: StockQuoteCardData = {
|
|
||||||
// 基础信息
|
|
||||||
name: '贵州茅台',
|
|
||||||
code: '600519.SH',
|
|
||||||
indexTags: ['沪深300'],
|
|
||||||
|
|
||||||
// 价格信息
|
|
||||||
currentPrice: 2178.5,
|
|
||||||
changePercent: 3.65,
|
|
||||||
todayOpen: 2156.0,
|
|
||||||
yesterdayClose: 2101.0,
|
|
||||||
todayHigh: 2185.0,
|
|
||||||
todayLow: 2150.0,
|
|
||||||
|
|
||||||
// 关键指标
|
|
||||||
pe: 38.62,
|
|
||||||
pb: 14.82,
|
|
||||||
marketCap: '2.73万亿',
|
|
||||||
week52Low: 1980,
|
|
||||||
week52High: 2350,
|
|
||||||
|
|
||||||
// 主力动态
|
|
||||||
mainNetInflow: 1.28,
|
|
||||||
institutionHolding: 72.35,
|
|
||||||
buyRatio: 85,
|
|
||||||
sellRatio: 15,
|
|
||||||
|
|
||||||
// 更新时间
|
|
||||||
updateTime: '2025-12-03 14:30:25',
|
|
||||||
|
|
||||||
// 自选状态
|
|
||||||
isFavorite: false,
|
|
||||||
};
|
|
||||||
59
src/views/Company/hooks/useStockSearch.ts
Normal file
59
src/views/Company/hooks/useStockSearch.ts
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
/**
|
||||||
|
* useStockSearch - 股票模糊搜索 Hook
|
||||||
|
*
|
||||||
|
* 提取自 SearchBar.js 和 CompareStockInput.tsx 的共享搜索逻辑
|
||||||
|
* 支持按代码或名称搜索,可选排除指定股票
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useMemo } from 'react';
|
||||||
|
|
||||||
|
export interface Stock {
|
||||||
|
code: string;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UseStockSearchOptions {
|
||||||
|
excludeCode?: string;
|
||||||
|
limit?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 股票模糊搜索 Hook
|
||||||
|
*
|
||||||
|
* @param allStocks - 全部股票列表
|
||||||
|
* @param searchTerm - 搜索关键词
|
||||||
|
* @param options - 可选配置
|
||||||
|
* @param options.excludeCode - 排除的股票代码(用于对比场景)
|
||||||
|
* @param options.limit - 返回结果数量限制,默认 10
|
||||||
|
* @returns 过滤后的股票列表
|
||||||
|
*/
|
||||||
|
export const useStockSearch = (
|
||||||
|
allStocks: Stock[],
|
||||||
|
searchTerm: string,
|
||||||
|
options: UseStockSearchOptions = {}
|
||||||
|
): Stock[] => {
|
||||||
|
const { excludeCode, limit = 10 } = options;
|
||||||
|
|
||||||
|
return useMemo(() => {
|
||||||
|
const trimmed = searchTerm?.trim();
|
||||||
|
if (!trimmed) return [];
|
||||||
|
|
||||||
|
const term = trimmed.toLowerCase();
|
||||||
|
|
||||||
|
return allStocks
|
||||||
|
.filter((stock) => {
|
||||||
|
// 排除指定股票
|
||||||
|
if (excludeCode && stock.code === excludeCode) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// 按代码或名称匹配
|
||||||
|
return (
|
||||||
|
stock.code.toLowerCase().includes(term) ||
|
||||||
|
stock.name.includes(trimmed)
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.slice(0, limit);
|
||||||
|
}, [allStocks, searchTerm, excludeCode, limit]);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useStockSearch;
|
||||||
Reference in New Issue
Block a user