vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update pay ui

Browse Source
This commit is contained in:
zzlgreat
2025-12-17 17:22:49 +08:00
parent c1fcf6714e
commit 8def7f355b
1 changed files with 256 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

480
src/views/Company/index.js
View File

@@ -3,63 +3,77 @@ import { useSearchParams } from 'react-router-dom';
import { AutoComplete, Spin } from 'antd';
import { useStockSearch } from '@hooks/useStockSearch';
import {
Container,
Heading,
Card,
CardBody,
Tabs,
TabList,
TabPanels,
Tab,
TabPanel,
Box,
Flex,
HStack,
VStack,
Button,
Text,
Badge,
Divider,
Button,
Icon,
useColorModeValue,
useColorMode,
IconButton,
Badge,
useToast,
Skeleton,
} from '@chakra-ui/react';
import { SearchIcon, MoonIcon, SunIcon, StarIcon } from '@chakra-ui/icons';
import { FaChartLine, FaMoneyBillWave, FaChartBar, FaInfoCircle } from 'react-icons/fa';
import { Search, Star, Building2, TrendingUp, Wallet, FileBarChart } from 'lucide-react';
import { useAuth } from '../../contexts/AuthContext';
import { logger } from '../../utils/logger';
import { getApiBase } from '../../utils/apiConfig';
// Tab 内容组件
import FinancialPanorama from './components/FinancialPanorama';
import ForecastReport from './ForecastReport';
import MarketDataView from './MarketDataView';
import CompanyOverview from './components/CompanyOverview';
// 导入 PostHog 追踪 Hook
// PostHog 追踪
import { useCompanyEvents } from './hooks/useCompanyEvents';
// 页面组件
import CompanyHeader from './components/CompanyHeader';
import StockQuoteCard from './components/StockQuoteCard';
import CompanyTabs from './components/CompanyTabs';
// 通用组件
import SubTabContainer from '@components/SubTabContainer';
// ============================================
// 黑金主题配置
// ============================================
const THEME = {
bg: '#1A1A2E', // 深蓝黑背景
cardBg: '#16213E', // 卡片背景
gold: '#D4AF37', // 金色
goldLight: '#F0D78C', // 浅金色
goldDark: '#B8960C', // 深金色
textPrimary: '#FFFFFF',
textSecondary: 'rgba(255, 255, 255, 0.7)',
textMuted: 'rgba(255, 255, 255, 0.5)',
border: 'rgba(212, 175, 55, 0.2)',
borderHover: 'rgba(212, 175, 55, 0.4)',
};
// ============================================
// Tab 配置
// ============================================
const TAB_CONFIG = [
{ key: 'overview', name: '公司概览', icon: Building2, component: CompanyOverview },
{ key: 'market', name: '股票行情', icon: TrendingUp, component: MarketDataView },
{ key: 'financial', name: '财务全景', icon: Wallet, component: FinancialPanorama },
{ key: 'forecast', name: '盈利预测', icon: FileBarChart, component: ForecastReport },
];
/**
* 公司详情页面
*
* 功能：
* - 股票搜索与代码管理
* - 自选股添加/移除
* - 多维度数据展示（概览、行情、财务、预测）
* - PostHog 事件追踪
* 使用黑金主题，紧凑布局
*/
const CompanyIndex = () => {
const [searchParams, setSearchParams] = useSearchParams();
const [stockCode, setStockCode] = useState(searchParams.get('scode') || '000001');
const [inputCode, setInputCode] = useState(stockCode);
const [stockName, setStockName] = useState('');
const [stockPrice, setStockPrice] = useState(null);
const [priceChange, setPriceChange] = useState(null);
const prevStockCodeRef = useRef(stockCode);
const { colorMode, toggleColorMode } = useColorMode();
const toast = useToast();
const { isAuthenticated } = useAuth();
// 🎯 PostHog 事件追踪
// PostHog 事件追踪
const {
trackStockSearched,
trackTabChanged,
@@ -67,7 +81,7 @@ const CompanyIndex = () => {
trackWatchlistRemoved,
} = useCompanyEvents({ stockCode });
// 🔍 股票搜索 Hook（支持代码、名称、拼音缩写）
// 股票搜索 Hook
const {
searchResults,
isSearching,
@@ -84,28 +98,26 @@ const CompanyIndex = () => {
return searchResults.map((stock) => ({
value: stock.stock_code,
label: (
<span>
<strong>{stock.stock_code}</strong> {stock.stock_name}
<Flex justify="space-between" align="center" py={1}>
<HStack spacing={2}>
<Text fontWeight="bold" color={THEME.gold}>{stock.stock_code}</Text>
<Text color={THEME.textPrimary}>{stock.stock_name}</Text>
</HStack>
{stock.pinyin_abbr && (
<span style={{ color: '#999', marginLeft: 8 }}>
({stock.pinyin_abbr.toUpperCase()})
</span>
<Text fontSize="xs" color={THEME.textMuted}>
{stock.pinyin_abbr.toUpperCase()}
</Text>
)}
</span>
</Flex>
),
}));
}, [searchResults]);
// Tab 索引状态（用于追踪 Tab 切换）
const [currentTabIndex, setCurrentTabIndex] = useState(0);
const bgColor = useColorModeValue('white', 'gray.800');
const tabBg = useColorModeValue('gray.50', 'gray.700');
const activeBg = useColorModeValue('blue.500', 'blue.400');
// 自选股状态
const [isInWatchlist, setIsInWatchlist] = useState(false);
const [isWatchlistLoading, setIsWatchlistLoading] = useState(false);
// 加载自选股状态
const loadWatchlistStatus = useCallback(async () => {
try {
const base = getApiBase();
@@ -126,23 +138,43 @@ const CompanyIndex = () => {
}
}, [stockCode]);
// 当URL参数变化时更新股票代码
// 加载股票基本信息
const loadStockInfo = useCallback(async () => {
try {
const base = getApiBase();
const resp = await fetch(base + `/api/financial/stock-info/${stockCode}`, {
credentials: 'include',
});
if (resp.ok) {
const data = await resp.json();
if (data.success && data.data) {
setStockName(data.data.stock_name || '');
setStockPrice(data.data.close_price);
setPriceChange(data.data.change_pct);
}
}
} catch (e) {
logger.error('CompanyIndex', 'loadStockInfo', e);
}
}, [stockCode]);
// URL 参数变化时更新股票代码
useEffect(() => {
if (stockCode !== prevStockCodeRef.current) {
trackStockSearched(stockCode, prevStockCodeRef.current);
prevStockCodeRef.current = stockCode;
}
}, [searchParams, stockCode]);
}, [searchParams, stockCode, trackStockSearched]);
useEffect(() => {
loadWatchlistStatus();
}, [loadWatchlistStatus]);
loadStockInfo();
}, [loadWatchlistStatus, loadStockInfo]);
// 搜索处理
const handleSearch = () => {
if (inputCode && inputCode !== stockCode) {
// 🎯 追踪股票搜索
trackStockSearched(inputCode, stockCode);
setStockCode(inputCode);
setSearchParams({ scode: inputCode });
}
@@ -159,14 +191,13 @@ const CompanyIndex = () => {
}
};
// 自选股切换
const handleWatchlistToggle = async () => {
if (!stockCode) {
logger.warn('CompanyIndex', 'handleWatchlistToggle', '无效的股票代码', { stockCode });
toast({ title: '无效的股票代码', status: 'error', duration: 2000 });
return;
}
if (!isAuthenticated) {
logger.warn('CompanyIndex', 'handleWatchlistToggle', '用户未登录', { stockCode });
toast({ title: '请先登录后再加入自选', status: 'warning', duration: 2000 });
return;
}
@@ -174,219 +205,206 @@ const CompanyIndex = () => {
setIsWatchlistLoading(true);
const base = getApiBase();
if (isInWatchlist) {
logger.debug('CompanyIndex', '准备从自选移除', { stockCode });
const url = base + `/api/account/watchlist/${stockCode}`;
logger.api.request('DELETE', url, { stockCode });
const resp = await fetch(url, {
const resp = await fetch(base + `/api/account/watchlist/${stockCode}`, {
method: 'DELETE',
credentials: 'include'
});
logger.api.response('DELETE', url, resp.status);
if (!resp.ok) throw new Error('删除失败');
// 🎯 追踪移除自选
trackWatchlistRemoved(stockCode);
setIsInWatchlist(false);
toast({ title: '已从自选移除', status: 'info', duration: 1500 });
} else {
logger.debug('CompanyIndex', '准备添加到自选', { stockCode });
const url = base + '/api/account/watchlist';
const body = { stock_code: stockCode };
logger.api.request('POST', url, body);
const resp = await fetch(url, {
const resp = await fetch(base + '/api/account/watchlist', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
credentials: 'include',
body: JSON.stringify(body)
body: JSON.stringify({ stock_code: stockCode })
});
logger.api.response('POST', url, resp.status);
if (!resp.ok) throw new Error('添加失败');
// 🎯 追踪加入自选
trackWatchlistAdded(stockCode);
setIsInWatchlist(true);
toast({ title: '已加入自选', status: 'success', duration: 1500 });
}
} catch (error) {
logger.error('CompanyIndex', 'handleWatchlistToggle', error, { stockCode, isInWatchlist });
logger.error('CompanyIndex', 'handleWatchlistToggle', error);
toast({ title: '操作失败，请稍后重试', status: 'error', duration: 2000 });
} finally {
setIsWatchlistLoading(false);
}
};
// Tab 变更处理
const handleTabChange = useCallback((index, tabKey) => {
const tabNames = TAB_CONFIG.map(t => t.name);
trackTabChanged(index, tabNames[index], index);
}, [trackTabChanged]);
return (
<Container maxW="container.xl" py={5}>
{/* 页面标题和股票搜索 */}
<VStack align="stretch" spacing={5}>
<Card bg={bgColor} shadow="md">
<CardBody>
<HStack justify="space-between" align="center">
<VStack align="start" spacing={1}>
<Heading size="lg">个股详情</Heading>
<Text color="gray.600" fontSize="sm">
查看股票实时行情、财务数据和盈利预测
<Box bg={THEME.bg} minH="calc(100vh - 60px)">
{/* 顶部搜索栏 */}
<Box
bg={THEME.cardBg}
borderBottom="1px solid"
borderColor={THEME.border}
px={6}
py={4}
>
<Flex
maxW="container.xl"
mx="auto"
justify="space-between"
align="center"
wrap="wrap"
gap={4}
>
{/* 左侧：股票信息 */}
<HStack spacing={4}>
{/* 股票代码和名称 */}
<VStack align="start" spacing={0}>
<HStack spacing={2}>
<Text
fontSize="2xl"
fontWeight="bold"
color={THEME.gold}
letterSpacing="wider"
>
{stockCode}
</Text>
</VStack>
<HStack spacing={3}>
<AutoComplete
value={inputCode}
options={stockOptions}
onSearch={doSearch}
onSelect={handleStockSelect}
onChange={(value) => setInputCode(value)}
placeholder="输入代码、名称或拼音缩写"
style={{ width: 280 }}
size="large"
notFoundContent={isSearching ? <Spin size="small" /> : null}
onKeyDown={(e) => {
if (e.key === 'Enter') {
handleSearch();
}
}}
/>
<Button
colorScheme="blue"
size="lg"
onClick={handleSearch}
leftIcon={<SearchIcon />}
>
查询
</Button>
<Button
colorScheme={isInWatchlist ? 'yellow' : 'teal'}
variant={isInWatchlist ? 'solid' : 'outline'}
size="lg"
onClick={handleWatchlistToggle}
leftIcon={<StarIcon />}
isLoading={isWatchlistLoading}
>
{isInWatchlist ? '已在自选' : '加入自选'}
</Button>
<IconButton
icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
onClick={toggleColorMode}
variant="outline"
colorScheme={colorMode === 'light' ? 'blue' : 'yellow'}
size="lg"
aria-label="Toggle color mode"
/>
{stockName && (
<Text fontSize="xl" fontWeight="medium" color={THEME.textPrimary}>
{stockName}
</Text>
)}
</HStack>
</HStack>
{stockPrice !== null && (
<HStack spacing={3} mt={1}>
<Text fontSize="lg" fontWeight="bold" color={THEME.textPrimary}>
¥{stockPrice?.toFixed(2)}
</Text>
{priceChange !== null && (
<Badge
px={2}
py={0.5}
borderRadius="md"
bg={priceChange >= 0 ? 'rgba(239, 68, 68, 0.2)' : 'rgba(34, 197, 94, 0.2)'}
color={priceChange >= 0 ? '#EF4444' : '#22C55E'}
fontSize="sm"
fontWeight="bold"
>
{priceChange >= 0 ? '+' : ''}{priceChange?.toFixed(2)}%
</Badge>
)}
</HStack>
)}
</VStack>
</HStack>
{/* 当前股票信息 */}
<HStack mt={4} spacing={4}>
<Badge colorScheme="blue" fontSize="md" px={3} py={1}>
股票代码: {stockCode}
</Badge>
<Text fontSize="sm" color="gray.600">
更新时间: {new Date().toLocaleString()}
</Text>
</HStack>
</CardBody>
</Card>
{/* 数据展示区域 */}
<Card bg={bgColor} shadow="lg">
<CardBody p={0}>
<Tabs
variant="soft-rounded"
colorScheme="blue"
size="lg"
index={currentTabIndex}
onChange={(index) => {
const tabNames = ['公司概览', '股票行情', '财务全景', '盈利预测'];
// 🎯 追踪 Tab 切换
trackTabChanged(index, tabNames[index], currentTabIndex);
setCurrentTabIndex(index);
{/* 右侧：搜索和操作 */}
<HStack spacing={3}>
{/* 搜索框 */}
<Box
sx={{
'.ant-select-selector': {
backgroundColor: `${THEME.bg} !important`,
borderColor: `${THEME.border} !important`,
borderRadius: '8px !important',
height: '40px !important',
'&:hover': {
borderColor: `${THEME.borderHover} !important`,
},
},
'.ant-select-selection-search-input': {
color: `${THEME.textPrimary} !important`,
height: '38px !important',
},
'.ant-select-selection-placeholder': {
color: `${THEME.textMuted} !important`,
},
'.ant-select-dropdown': {
backgroundColor: `${THEME.cardBg} !important`,
borderColor: `${THEME.border} !important`,
},
'.ant-select-item': {
color: `${THEME.textPrimary} !important`,
'&:hover': {
backgroundColor: `${THEME.bg} !important`,
},
},
'.ant-select-item-option-selected': {
backgroundColor: `rgba(212, 175, 55, 0.2) !important`,
},
}}
>
<TabList p={4} bg={tabBg}>
<Tab
_selected={{
bg: activeBg,
color: 'white',
transform: 'scale(1.02)',
transition: 'all 0.2s'
}}
mr={2}
>
<HStack spacing={2}>
<Icon as={FaInfoCircle} />
<Text>公司概览</Text>
</HStack>
</Tab>
<Tab
_selected={{
bg: activeBg,
color: 'white',
transform: 'scale(1.02)',
transition: 'all 0.2s'
}}
mr={2}
>
<HStack spacing={2}>
<Icon as={FaChartLine} />
<Text>股票行情</Text>
</HStack>
</Tab>
<Tab
_selected={{
bg: activeBg,
color: 'white',
transform: 'scale(1.02)',
transition: 'all 0.2s'
}}
mr={2}
>
<HStack spacing={2}>
<Icon as={FaMoneyBillWave} />
<Text>财务全景</Text>
</HStack>
</Tab>
<Tab
_selected={{
bg: activeBg,
color: 'white',
transform: 'scale(1.02)',
transition: 'all 0.2s'
}}
>
<HStack spacing={2}>
<Icon as={FaChartBar} />
<Text>盈利预测</Text>
</HStack>
</Tab>
</TabList>
<AutoComplete
value={inputCode}
options={stockOptions}
onSearch={doSearch}
onSelect={handleStockSelect}
onChange={(value) => setInputCode(value)}
placeholder="输入代码、名称或拼音"
style={{ width: 220 }}
notFoundContent={isSearching ? <Spin size="small" /> : null}
onKeyDown={(e) => {
if (e.key === 'Enter') handleSearch();
}}
/>
</Box>
<Divider />
{/* 搜索按钮 */}
<Button
bg={THEME.gold}
color={THEME.bg}
_hover={{ bg: THEME.goldLight }}
_active={{ bg: THEME.goldDark }}
size="md"
onClick={handleSearch}
leftIcon={<Icon as={Search} boxSize={4} />}
fontWeight="bold"
>
查询
</Button>
<TabPanels>
<TabPanel p={6}>
<CompanyOverview stockCode={stockCode} />
</TabPanel>
<TabPanel p={6}>
<MarketDataView stockCode={stockCode} />
</TabPanel>
<TabPanel p={6}>
<FinancialPanorama stockCode={stockCode} />
</TabPanel>
<TabPanel p={6}>
<ForecastReport stockCode={stockCode} />
</TabPanel>
</TabPanels>
</Tabs>
</CardBody>
</Card>
</VStack>
</Container>
{/* 自选按钮 */}
<Button
variant={isInWatchlist ? 'solid' : 'outline'}
bg={isInWatchlist ? THEME.gold : 'transparent'}
color={isInWatchlist ? THEME.bg : THEME.gold}
borderColor={THEME.gold}
_hover={{
bg: isInWatchlist ? THEME.goldLight : 'rgba(212, 175, 55, 0.1)',
}}
size="md"
onClick={handleWatchlistToggle}
isLoading={isWatchlistLoading}
leftIcon={<Icon as={Star} boxSize={4} fill={isInWatchlist ? 'currentColor' : 'none'} />}
fontWeight="bold"
>
{isInWatchlist ? '已自选' : '自选'}
</Button>
</HStack>
</Flex>
</Box>
{/* 主内容区 - Tab 切换 */}
<Box maxW="container.xl" mx="auto" px={4} py={6}>
<Box
bg={THEME.cardBg}
borderRadius="xl"
border="1px solid"
borderColor={THEME.border}
overflow="hidden"
>
<SubTabContainer
tabs={TAB_CONFIG}
componentProps={{ stockCode }}
onTabChange={handleTabChange}
themePreset="blackGold"
contentPadding={6}
isLazy={true}
/>
</Box>
</Box>
</Box>
);
};