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:
@@ -23,6 +23,25 @@ const StockChartModal = ({
|
|||||||
const [chartData, setChartData] = useState(null);
|
const [chartData, setChartData] = useState(null);
|
||||||
const [preloadedData, setPreloadedData] = useState({});
|
const [preloadedData, setPreloadedData] = useState({});
|
||||||
|
|
||||||
|
// 处理关联描述(兼容对象和字符串格式)
|
||||||
|
const getRelationDesc = () => {
|
||||||
|
const relationDesc = stock?.relation_desc;
|
||||||
|
|
||||||
|
if (!relationDesc) return null;
|
||||||
|
|
||||||
|
if (typeof relationDesc === 'string') {
|
||||||
|
return relationDesc;
|
||||||
|
} else if (typeof relationDesc === 'object' && relationDesc.data && Array.isArray(relationDesc.data)) {
|
||||||
|
// 新格式:{data: [{query_part: "...", sentences: "..."}]}
|
||||||
|
return relationDesc.data
|
||||||
|
.map(item => item.query_part || item.sentences || '')
|
||||||
|
.filter(s => s)
|
||||||
|
.join(';') || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
// 预加载数据
|
// 预加载数据
|
||||||
const preloadData = async (type) => {
|
const preloadData = async (type) => {
|
||||||
if (!stock || preloadedData[type]) return;
|
if (!stock || preloadedData[type]) return;
|
||||||
@@ -539,10 +558,10 @@ const StockChartModal = ({
|
|||||||
<div ref={chartRef} style={{ height: '100%', width: '100%', minHeight: '500px' }} />
|
<div ref={chartRef} style={{ height: '100%', width: '100%', minHeight: '500px' }} />
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
{stock?.relation_desc && (
|
{getRelationDesc() && (
|
||||||
<Box p={4} borderTop="1px solid" borderTopColor="gray.200">
|
<Box p={4} borderTop="1px solid" borderTopColor="gray.200">
|
||||||
<Text fontSize="sm" fontWeight="bold" mb={2}>关联描述:</Text>
|
<Text fontSize="sm" fontWeight="bold" mb={2}>关联描述:</Text>
|
||||||
<Text fontSize="sm" color="gray.600">{stock.relation_desc}</Text>
|
<Text fontSize="sm" color="gray.600">{getRelationDesc()}</Text>
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
@@ -106,6 +106,8 @@ const StockListItem = ({
|
|||||||
borderColor={borderColor}
|
borderColor={borderColor}
|
||||||
borderRadius="md"
|
borderRadius="md"
|
||||||
p={4}
|
p={4}
|
||||||
|
onClick={handleViewDetail}
|
||||||
|
cursor="pointer"
|
||||||
_hover={{
|
_hover={{
|
||||||
boxShadow: 'md',
|
boxShadow: 'md',
|
||||||
borderColor: 'blue.300',
|
borderColor: 'blue.300',
|
||||||
@@ -155,7 +157,10 @@ const StockListItem = ({
|
|||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="sm"
|
||||||
colorScheme="blue"
|
colorScheme="blue"
|
||||||
onClick={handleViewDetail}
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
handleViewDetail();
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
查看
|
查看
|
||||||
</Button>
|
</Button>
|
||||||
@@ -169,7 +174,7 @@ const StockListItem = ({
|
|||||||
<Box>
|
<Box>
|
||||||
<SimpleGrid columns={2} spacing={3}>
|
<SimpleGrid columns={2} spacing={3}>
|
||||||
{/* 左侧:分时图 */}
|
{/* 左侧:分时图 */}
|
||||||
<Box>
|
<Box onClick={(e) => e.stopPropagation()}>
|
||||||
<Text fontSize="xs" color={descColor} mb={1} textAlign="center">
|
<Text fontSize="xs" color={descColor} mb={1} textAlign="center">
|
||||||
分时图
|
分时图
|
||||||
</Text>
|
</Text>
|
||||||
@@ -181,7 +186,7 @@ const StockListItem = ({
|
|||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
{/* 右侧:K线图 */}
|
{/* 右侧:K线图 */}
|
||||||
<Box>
|
<Box onClick={(e) => e.stopPropagation()}>
|
||||||
<Text fontSize="xs" color={descColor} mb={1} textAlign="center">
|
<Text fontSize="xs" color={descColor} mb={1} textAlign="center">
|
||||||
日K线
|
日K线
|
||||||
</Text>
|
</Text>
|
||||||
@@ -213,7 +218,10 @@ const StockListItem = ({
|
|||||||
size="xs"
|
size="xs"
|
||||||
variant="link"
|
variant="link"
|
||||||
colorScheme="blue"
|
colorScheme="blue"
|
||||||
onClick={() => setIsDescExpanded(!isDescExpanded)}
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setIsDescExpanded(!isDescExpanded);
|
||||||
|
}}
|
||||||
mt={1}
|
mt={1}
|
||||||
>
|
>
|
||||||
{isDescExpanded ? '收起' : '展开'}
|
{isDescExpanded ? '收起' : '展开'}
|
||||||
|
|||||||
Reference in New Issue
Block a user