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:
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user