feat(StockQuoteCard): 实现分享功能和优化时间显示

- index.tsx: 实现 handleShare,点击复制链接并显示 Toast 提示
- StockHeader: 移除 updateTime prop,改为显示页面打开时间
- StockHeader: 时间格式改为「年-月-日 时:分」完整格式

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-26 13:32:49 +08:00
parent 8cf9465412
commit 0017302e5c
2 changed files with 44 additions and 8 deletions

View File

@@ -7,7 +7,7 @@
* - 操作按钮悬停态有玻璃效果
*/
import React, { memo } from 'react';
import React, { memo, useState } from 'react';
import { Flex, HStack, Text, Badge, IconButton, Tooltip } from '@chakra-ui/react';
import { Share2 } from 'lucide-react';
import FavoriteButton from '@components/FavoriteButton';
@@ -25,8 +25,6 @@ export interface StockHeaderProps {
industry?: string;
/** 指数标签沪深300、中证500等 */
indexTags?: string[];
/** 更新时间 */
updateTime?: string;
// 关注相关
isInWatchlist?: boolean;
isWatchlistLoading?: boolean;
@@ -51,7 +49,6 @@ export const StockHeader: React.FC<StockHeaderProps> = memo(({
industryL1,
industry,
indexTags,
updateTime,
isInWatchlist = false,
isWatchlistLoading = false,
onWatchlistToggle,
@@ -59,6 +56,17 @@ export const StockHeader: React.FC<StockHeaderProps> = memo(({
isCompareLoading = false,
onCompare,
}) => {
// 页面打开时间(组件首次渲染时记录,格式:年月日时分)
const [openTime] = useState(() => {
const now = new Date();
const year = now.getFullYear();
const month = (now.getMonth() + 1).toString().padStart(2, '0');
const day = now.getDate().toString().padStart(2, '0');
const hour = now.getHours().toString().padStart(2, '0');
const minute = now.getMinutes().toString().padStart(2, '0');
return `${year}-${month}-${day} ${hour}:${minute}`;
});
return (
<Flex justify="space-between" align="center">
{/* 左侧:股票名称 + 行业标签 + 指数标签 */}
@@ -131,7 +139,7 @@ export const StockHeader: React.FC<StockHeaderProps> = memo(({
/>
</Tooltip>
<Text fontSize="13px" color={T.textMuted}>
{updateTime?.split(' ')[1] || '--:--'}
{openTime}
</Text>
</HStack>
</Flex>

View File

@@ -14,8 +14,8 @@
* - MainForceInfo主力动态
*/
import React, { memo } from 'react';
import { Box, Flex, VStack, useDisclosure } from '@chakra-ui/react';
import React, { memo, useCallback } from 'react';
import { Box, Flex, VStack, useDisclosure, useToast } from '@chakra-ui/react';
import { CardGlow } from '@components/FUI';
// 子组件导入
@@ -64,6 +64,34 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
clearCompare();
};
// Toast 提示
const toast = useToast();
// 分享功能:复制链接到剪贴板
const handleShare = useCallback(async () => {
const shareUrl = `https://valuefrontier.cn/company?scode=${stockCode}`;
try {
await navigator.clipboard.writeText(shareUrl);
toast({
title: '链接已复制',
description: '快去分享给好友吧~',
status: 'success',
duration: 2000,
isClosable: true,
position: 'top',
});
} catch (err) {
toast({
title: '复制失败',
description: '请手动复制链接',
status: 'error',
duration: 2000,
position: 'top',
});
}
}, [stockCode, toast]);
// 加载中
if (isLoading || !quoteData) {
return <LoadingSkeleton />;
@@ -83,10 +111,10 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
industryL1={quoteData.industryL1}
industry={quoteData.industry}
indexTags={quoteData.indexTags}
updateTime={quoteData.updateTime}
isInWatchlist={isInWatchlist}
isWatchlistLoading={isWatchlistLoading}
onWatchlistToggle={onWatchlistToggle}
onShare={handleShare}
isCompareLoading={isCompareLoading}
onCompare={handleCompare}
/>