diff --git a/src/views/Community/components/DynamicNewsDetail/CompactStockItem.js b/src/views/Community/components/DynamicNewsDetail/CompactStockItem.js
new file mode 100644
index 00000000..f3fd5e90
--- /dev/null
+++ b/src/views/Community/components/DynamicNewsDetail/CompactStockItem.js
@@ -0,0 +1,137 @@
+// src/views/Community/components/DynamicNewsDetail/CompactStockItem.js
+// 精简模式股票卡片组件（浮动卡片样式）
+
+import React from 'react';
+import {
+ Box,
+ Text,
+ Tooltip,
+ useColorModeValue,
+} from '@chakra-ui/react';
+
+/**
+ * 精简模式股票卡片组件
+ * @param {Object} props
+ * @param {Object} props.stock - 股票对象
+ * @param {Object} props.quote - 股票行情数据（可选）
+ */
+const CompactStockItem = ({ stock, quote = null }) => {
+ const nameColor = useColorModeValue('gray.700', 'gray.300');
+
+ const handleViewDetail = () => {
+ const stockCode = stock.stock_code.split('.')[0];
+ window.open(`https://valuefrontier.cn/company?scode=${stockCode}`, '_blank');
+ };
+
+ // 格式化涨跌幅显示
+ const formatChange = (value) => {
+ if (value === null || value === undefined || isNaN(value)) return '--';
+ const prefix = value > 0 ? '+' : '';
+ return `${prefix}${parseFloat(value).toFixed(2)}%`;
+ };
+
+ // 获取涨跌幅颜色（涨红跌绿）
+ const getChangeColor = (value) => {
+ const num = parseFloat(value);
+ if (isNaN(num) || num === 0) return 'gray.500';
+ return num > 0 ? 'red.500' : 'green.500';
+ };
+
+ // 获取背景渐变色（涨红跌绿）
+ const getBackgroundGradient = (value) => {
+ const num = parseFloat(value);
+ if (isNaN(num) || num === 0) {
+ return 'linear(to-br, gray.50, gray.100)';
+ }
+ return num > 0
+ ? 'linear(to-br, red.50, red.100)'
+ : 'linear(to-br, green.50, green.100)';
+ };
+
+ // 获取边框颜色
+ const getBorderColor = (value) => {
+ const num = parseFloat(value);
+ if (isNaN(num) || num === 0) return 'gray.300';
+ return num > 0 ? 'red.300' : 'green.300';
+ };
+
+ // 获取涨跌幅数据（优先使用 quote，fallback 到 stock）
+ const change = quote?.change ?? stock.daily_change ?? null;
+
+ return (
+
+
+ {/* 股票代码 */}
+
+ {stock.stock_code}
+
+
+ {/* 涨跌幅 - 超大号显示 */}
+
+ {formatChange(change)}
+
+
+ {/* 股票名称（小字） */}
+
+ {stock.stock_name}
+
+
+
+ );
+};
+
+export default CompactStockItem;
diff --git a/src/views/Community/components/DynamicNewsDetail/RelatedStocksSection.js b/src/views/Community/components/DynamicNewsDetail/RelatedStocksSection.js
index cab8d27c..8802db74 100644
--- a/src/views/Community/components/DynamicNewsDetail/RelatedStocksSection.js
+++ b/src/views/Community/components/DynamicNewsDetail/RelatedStocksSection.js
@@ -1,11 +1,18 @@
// src/views/Community/components/DynamicNewsDetail/RelatedStocksSection.js
// 相关股票列表区组件（纯内容，不含标题）
-import React from 'react';
+import React, { useState } from 'react';
import {
VStack,
+ Flex,
+ Button,
+ ButtonGroup,
+ Wrap,
+ WrapItem,
} from '@chakra-ui/react';
+import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
import StockListItem from './StockListItem';
+import CompactStockItem from './CompactStockItem';
/**
* 相关股票列表区组件（纯内容部分）
@@ -23,23 +30,67 @@ const RelatedStocksSection = ({
watchlistSet = new Set(),
onWatchlistToggle
}) => {
+ // 显示模式：'detail' 详情模式, 'compact' 精简模式
+ const [viewMode, setViewMode] = useState('detail');
+
// 如果没有股票数据，不渲染
if (!stocks || stocks.length === 0) {
return null;
}
return (
-
- {stocks.map((stock, index) => (
-
- ))}
+
+ {/* 模式切换按钮 */}
+
+
+ }
+ colorScheme={viewMode === 'detail' ? 'blue' : 'gray'}
+ variant={viewMode === 'detail' ? 'solid' : 'outline'}
+ onClick={() => setViewMode('detail')}
+ >
+ 详情模式
+
+ }
+ colorScheme={viewMode === 'compact' ? 'blue' : 'gray'}
+ variant={viewMode === 'compact' ? 'solid' : 'outline'}
+ onClick={() => setViewMode('compact')}
+ >
+ 精简模式
+
+
+
+
+ {/* 详情模式 */}
+ {viewMode === 'detail' && (
+
+ {stocks.map((stock, index) => (
+
+ ))}
+
+ )}
+
+ {/* 精简模式 */}
+ {viewMode === 'compact' && (
+
+ {stocks.map((stock, index) => (
+
+
+
+ ))}
+
+ )}
);
};
diff --git a/src/views/Community/components/DynamicNewsDetail/StockListItem.js b/src/views/Community/components/DynamicNewsDetail/StockListItem.js
index dd1a345d..29f54a83 100644
--- a/src/views/Community/components/DynamicNewsDetail/StockListItem.js
+++ b/src/views/Community/components/DynamicNewsDetail/StockListItem.js
@@ -126,13 +126,14 @@ const StockListItem = ({
>
{/* 单行紧凑布局：名称+涨跌幅 | 分时图 | K线图 | 关联描述 */}
- {/* 左侧：股票名称 + 涨跌幅（垂直排列） */}
+ {/* 左侧：股票名称 + 涨跌幅（垂直排列） - 收窄 */}
-
+
@@ -176,9 +177,9 @@ const StockListItem = ({
- {/* 分时图 */}
+ {/* 分时图 - 固定宽度 */}
- {/* K线图 */}
+ {/* K线图 - 固定宽度 */}
- {/* 关联描述（单行显示，点击展开） */}
+ {/* 关联描述（单行显示，点击展开）- 占据更多空间 */}
{relationText && relationText !== '--' && (
-
- 关联描述
-
-
+ {/* 去掉"关联描述"标题 */}
+