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 { Flex, HStack, Text, Badge, IconButton, Tooltip } from '@chakra-ui/react';
|
||||||
import { Share2 } from 'lucide-react';
|
import { Share2 } from 'lucide-react';
|
||||||
import FavoriteButton from '@components/FavoriteButton';
|
import FavoriteButton from '@components/FavoriteButton';
|
||||||
@@ -25,8 +25,6 @@ export interface StockHeaderProps {
|
|||||||
industry?: string;
|
industry?: string;
|
||||||
/** 指数标签(沪深300、中证500等) */
|
/** 指数标签(沪深300、中证500等) */
|
||||||
indexTags?: string[];
|
indexTags?: string[];
|
||||||
/** 更新时间 */
|
|
||||||
updateTime?: string;
|
|
||||||
// 关注相关
|
// 关注相关
|
||||||
isInWatchlist?: boolean;
|
isInWatchlist?: boolean;
|
||||||
isWatchlistLoading?: boolean;
|
isWatchlistLoading?: boolean;
|
||||||
@@ -51,7 +49,6 @@ export const StockHeader: React.FC<StockHeaderProps> = memo(({
|
|||||||
industryL1,
|
industryL1,
|
||||||
industry,
|
industry,
|
||||||
indexTags,
|
indexTags,
|
||||||
updateTime,
|
|
||||||
isInWatchlist = false,
|
isInWatchlist = false,
|
||||||
isWatchlistLoading = false,
|
isWatchlistLoading = false,
|
||||||
onWatchlistToggle,
|
onWatchlistToggle,
|
||||||
@@ -59,6 +56,17 @@ export const StockHeader: React.FC<StockHeaderProps> = memo(({
|
|||||||
isCompareLoading = false,
|
isCompareLoading = false,
|
||||||
onCompare,
|
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 (
|
return (
|
||||||
<Flex justify="space-between" align="center">
|
<Flex justify="space-between" align="center">
|
||||||
{/* 左侧:股票名称 + 行业标签 + 指数标签 */}
|
{/* 左侧:股票名称 + 行业标签 + 指数标签 */}
|
||||||
@@ -131,7 +139,7 @@ export const StockHeader: React.FC<StockHeaderProps> = memo(({
|
|||||||
/>
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Text fontSize="13px" color={T.textMuted}>
|
<Text fontSize="13px" color={T.textMuted}>
|
||||||
{updateTime?.split(' ')[1] || '--:--'}
|
{openTime}
|
||||||
</Text>
|
</Text>
|
||||||
</HStack>
|
</HStack>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
|||||||
@@ -14,8 +14,8 @@
|
|||||||
* - MainForceInfo:主力动态
|
* - MainForceInfo:主力动态
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { memo } from 'react';
|
import React, { memo, useCallback } from 'react';
|
||||||
import { Box, Flex, VStack, useDisclosure } from '@chakra-ui/react';
|
import { Box, Flex, VStack, useDisclosure, useToast } from '@chakra-ui/react';
|
||||||
import { CardGlow } from '@components/FUI';
|
import { CardGlow } from '@components/FUI';
|
||||||
|
|
||||||
// 子组件导入
|
// 子组件导入
|
||||||
@@ -64,6 +64,34 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
|||||||
clearCompare();
|
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) {
|
if (isLoading || !quoteData) {
|
||||||
return <LoadingSkeleton />;
|
return <LoadingSkeleton />;
|
||||||
@@ -83,10 +111,10 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
|||||||
industryL1={quoteData.industryL1}
|
industryL1={quoteData.industryL1}
|
||||||
industry={quoteData.industry}
|
industry={quoteData.industry}
|
||||||
indexTags={quoteData.indexTags}
|
indexTags={quoteData.indexTags}
|
||||||
updateTime={quoteData.updateTime}
|
|
||||||
isInWatchlist={isInWatchlist}
|
isInWatchlist={isInWatchlist}
|
||||||
isWatchlistLoading={isWatchlistLoading}
|
isWatchlistLoading={isWatchlistLoading}
|
||||||
onWatchlistToggle={onWatchlistToggle}
|
onWatchlistToggle={onWatchlistToggle}
|
||||||
|
onShare={handleShare}
|
||||||
isCompareLoading={isCompareLoading}
|
isCompareLoading={isCompareLoading}
|
||||||
onCompare={handleCompare}
|
onCompare={handleCompare}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user