feat: 优化股票卡片交互体验

StockListItem 组件优化:
- 整个卡片可点击,点击后跳转到股票详情页(新标签页)
- 添加 cursor="pointer" 鼠标悬停提示
- 分时图/K线图区域点击时阻止事件冒泡,仅打开弹窗
- "查看"按钮、自选股按钮、展开/收起按钮点击时阻止冒泡

StockChartModal 组件修复:
- 修复 relation_desc 对象渲染错误
- 添加 getRelationDesc() 函数兼容对象和字符串格式
- 正确提取 {data: [...]} 结构中的文本内容

交互改进:
- 用户可点击卡片任意空白区域快速跳转
- 图表、按钮保持独立交互功能
- 提升用户操作便利性和体验流畅度

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-11-03 12:54:26 +08:00
parent 92d6751529
commit 7291777488
2 changed files with 33 additions and 6 deletions

View File

@@ -106,6 +106,8 @@ const StockListItem = ({
borderColor={borderColor}
borderRadius="md"
p={4}
onClick={handleViewDetail}
cursor="pointer"
_hover={{
boxShadow: 'md',
borderColor: 'blue.300',
@@ -155,7 +157,10 @@ const StockListItem = ({
<Button
size="sm"
colorScheme="blue"
onClick={handleViewDetail}
onClick={(e) => {
e.stopPropagation();
handleViewDetail();
}}
>
查看
</Button>
@@ -169,7 +174,7 @@ const StockListItem = ({
<Box>
<SimpleGrid columns={2} spacing={3}>
{/* 左侧:分时图 */}
<Box>
<Box onClick={(e) => e.stopPropagation()}>
<Text fontSize="xs" color={descColor} mb={1} textAlign="center">
分时图
</Text>
@@ -181,7 +186,7 @@ const StockListItem = ({
</Box>
{/* 右侧K线图 */}
<Box>
<Box onClick={(e) => e.stopPropagation()}>
<Text fontSize="xs" color={descColor} mb={1} textAlign="center">
日K线
</Text>
@@ -213,7 +218,10 @@ const StockListItem = ({
size="xs"
variant="link"
colorScheme="blue"
onClick={() => setIsDescExpanded(!isDescExpanded)}
onClick={(e) => {
e.stopPropagation();
setIsDescExpanded(!isDescExpanded);
}}
mt={1}
>
{isDescExpanded ? '收起' : '展开'}